feat: create Image and BackgroundImage components

2 files changed, 49 insertions, 0 deletions

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;
+