From e20636b4f1f1fb6746f421ca2f4db9ef17052a5b Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Tue, 15 Oct 2019 01:22:33 +0300
Subject: [PATCH] Image component written in ts

---
 src/components/Image.jsx       | 21 ------------------
 src/components/Image/index.tsx | 40 ++++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 21 deletions(-)
 delete mode 100644 src/components/Image.jsx
 create mode 100644 src/components/Image/index.tsx

diff --git a/src/components/Image.jsx b/src/components/Image.jsx
deleted file mode 100644
index 7f38d1a2..00000000
--- a/src/components/Image.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import className from 'classnames'
-
-export const Image = ({data, alt, opa = true}) => (
-    <picture>
-        <style jsx>{`
-            picture img {
-                display: block;
-            }
-        `}</style>
-
-		<img
-            className={className({ opa })}
-			alt={alt}
-			src={data.src}
-			srcSet={data.set.map(({url, density}) => `${url} ${density}x`)}
-		/>
-	</picture >
-)
-
-export default Image
\ No newline at end of file
diff --git a/src/components/Image/index.tsx b/src/components/Image/index.tsx
new file mode 100644
index 00000000..68d75eea
--- /dev/null
+++ b/src/components/Image/index.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react'
+import cx from 'classnames'
+
+export interface IImageProps {
+    style?: React.CSSProperties
+    imgStyle?: React.CSSProperties
+    src: string
+    alt: string
+    opa: boolean
+    set: Array<{
+        url: string
+        density: number
+    }>
+}
+
+export const Image: React.FC<IImageProps> = React.memo(props => {
+    const srcSet = props.set
+        .map(({ url, density }) => `${url} ${density}x`)
+        .join(' ')
+
+    return (
+        <picture style={props.style}>
+            <style jsx>{`
+                picture img {
+                    display: block;
+                }
+            `}</style>
+
+            <img
+                style={props.imgStyle}
+                className={cx({
+                    opa: props.opa
+                })}
+                alt={props.alt}
+                src={props.src}
+                srcSet={srcSet}
+            />
+        </picture >
+    )
+})