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 ++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/components/Image/BackgroundImage.tsx

(limited to 'src/components/Image/BackgroundImage.tsx')

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;
+
-- 
cgit v1.2.3


From e8519bdddd31a33ace25ffbcb73273c1573e9c33 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 14 Aug 2020 16:51:19 +0300
Subject: feat: apply cool transitions to Image

---
 src/components/Image/BackgroundImage.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/components/Image/BackgroundImage.tsx')

diff --git a/src/components/Image/BackgroundImage.tsx b/src/components/Image/BackgroundImage.tsx
index 824f667..e749d10 100644
--- a/src/components/Image/BackgroundImage.tsx
+++ b/src/components/Image/BackgroundImage.tsx
@@ -7,7 +7,7 @@ interface PropTypes {
   alt?: string;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles({
   root: {
     position: 'absolute',
     width: '100%',
@@ -19,7 +19,7 @@ const useStyles = makeStyles(theme => ({
     width: '100%',
     height: '100%'
   }
-}));
+});
 
 const BackgroundImage: React.FC<PropTypes> = ({ src, alt }) => {
   const classes = useStyles();
@@ -28,8 +28,8 @@ const BackgroundImage: React.FC<PropTypes> = ({ src, alt }) => {
     <picture className={classes.root}>
       <Image src={src} alt={alt} className={classes.image} />
     </picture>
-  )
-}
+  );
+};
 
 export default BackgroundImage;
 
-- 
cgit v1.2.3