chore: moved imageView to seperate component

src/features/ModelView/ModelImageView/ModelImageView.styled.tsx → src/components/ImageView/ImageView.styled.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
-import { spacings } from '../../../tokens/spacings'
-import { theme } from '../../../tokens/theme'
+import { spacings } from '../../tokens/spacings'
+import { theme } from '../../tokens/theme'
 
 export const ImageWrapper = styled.div`
   display: flex;
@@ -12,24 +12,17 @@ export const ImageWrapper = styled.div`
   border-color: ${theme.light.ui.background.medium};
 
   max-width: 100%;
-  height: 100%;
+
+  height: fit-content;
 
   > h5 {
     font-weight: normal;
     margin: 0;
     padding: ${spacings.SMALL};
   }
 
-  > .metadata-image {
+  > .image {
     max-width: 100%;
     padding: ${spacings.SMALL};
   }
-
-  @media (max-width: 1350px) {
-    max-width: 100%;
-
-    > .metadata-image {
-      max-width: 100%;
-    }
-  }
 `

src/components/ImageView/ImageView.tsx

@@ -0,0 +1,18 @@
+import * as Styled from './ImageView.styled'
+
+export const ImageView = ({
+  text,
+  img,
+  altText,
+}: {
+  text: string
+  img: string
+  altText: string
+}) => {
+  return (
+    <Styled.ImageWrapper>
+      <img className="image" alt={altText} src={img} />
+      <h5>{text}</h5>
+    </Styled.ImageWrapper>
+  )
+}

src/features/ModelView/ModelView.tsx

@@ -1,7 +1,8 @@
-import { ModelImageView } from '../../features/ModelView/ModelImageView/ModelImageView'
+import { ImageView } from '../../components/ImageView/ImageView'
 import { ModelMetadataView } from '../../features/ModelView/ModelMetadataView/ModelMetadataView'
 import { ModelSourceView } from '../../features/ModelView/ModelSourceView/ModelSourceView'
 import * as Styled from './ModelView.styled'
+import Img from './image.png'
 
 export const ModelView = () => {
   return (
@@ -10,7 +11,11 @@ export const ModelView = () => {
         <ModelMetadataView />
         <ModelSourceView />
       </Styled.InnerMetadataWrapper>
-      <ModelImageView />
+      <ImageView
+        text="Model placeholder image"
+        img={Img}
+        altText="Model placeholder image"
+      />
     </Styled.MetadataWrapper>
   )
 }