collective page images refactoring

src/components/CollectiveImage.jsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import { Image } from './Image'
-
-export const CollectiveImage = (props) => (
-    <div
-        style={props.style}
-    >
-        <Image
-            src={props.data.src}
-            alt={props.data.alt}
-            set={props.data.set}
-            opa={false}
-            style={{
-                marginBottom: 'var(--double-margin)',
-            }}
-            imgStyle={{
-                width: '100%',
-                borderRadius: 'var(--radius)',
-            }}
-        />
-    </div>
-)

src/components/Image/index.tsx

@@ -1,40 +1,23 @@
-import * as React from 'react'
-import cx from 'classnames'
+import './styles.css'
+import { memo } from 'react'
 
-export interface IImageProps {
+export type ImageProps = {
     style?: React.CSSProperties
     imgStyle?: React.CSSProperties
     src: string
-    alt: string
-    opa: boolean
-    set: Array<{
-        url: string
-        density: number
-    }>
+    alt?: string
+    srcSet?: string
 }
 
-export const Image: React.FC<IImageProps> = React.memo(props => {
-    const srcSet = props.set
-        .map(({ url, density }) => `${url} ${density}x`)
-        .join(' ')
-
+export const Image: React.FC<ImageProps> = memo(props => {
     return (
-        <picture style={props.style}>
-            <style jsx>{`
-                picture img {
-                    display: block;
-                }
-            `}</style>
-
+        <picture className={'image'} style={props.style}>
             <img
                 style={props.imgStyle}
-                className={cx({
-                    opa: props.opa
-                })}
                 alt={props.alt}
                 src={props.src}
-                srcSet={srcSet}
+                srcSet={props.srcSet}
             />
-        </picture >
+        </picture>
     )
 })

src/components/Image/styles.css

@@ -0,0 +1,7 @@
+.image {
+    display: block;
+}
+
+.image img {
+    display: block;
+}