From fc95e83e704ec054f551bae587a8a6e5bcaf4135 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 14 Aug 2020 15:36:17 +0300
Subject: feat: create Image and BackgroundImage components

---
 src/components/Image/BackgroundImage.tsx | 35 ++++++++++++++++++++++++++++++++
 src/components/Image/Image.tsx           | 14 +++++++++++++
 2 files changed, 49 insertions(+)
 create mode 100644 src/components/Image/BackgroundImage.tsx
 create mode 100644 src/components/Image/Image.tsx

(limited to 'src/components/Image')

diff --git a/src/components/Image/BackgroundImage.tsx b/src/components/Image/BackgroundImage.tsx
new file mode 100644
index 0000000..824f667
--- /dev/null
+++ b/src/components/Image/BackgroundImage.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Image from './Image';
+
+interface PropTypes {
+  src?: string;
+  alt?: string;
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%'
+  },
+  image: {
+    objectFit: 'cover',
+    pointerEvents: 'none',
+    width: '100%',
+    height: '100%'
+  }
+}));
+
+const BackgroundImage: React.FC<PropTypes> = ({ src, alt }) => {
+  const classes = useStyles();
+
+  return (
+    <picture className={classes.root}>
+      <Image src={src} alt={alt} className={classes.image} />
+    </picture>
+  )
+}
+
+export default BackgroundImage;
+
diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
new file mode 100644
index 0000000..de67c6a
--- /dev/null
+++ b/src/components/Image/Image.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+interface PropTypes {
+  src?: string;
+  alt?: string;
+  className?: string;
+}
+
+const Image: React.FC<PropTypes> = ({ src, alt, className }) => {
+  return <img src={src} alt={alt} className={className} />;
+};
+
+export default Image;
+
-- 
cgit v1.2.3