From 1883b6f173ad17ffc27e9736b4272b5f783b8286 Mon Sep 17 00:00:00 2001
From: zeim839 <zeim839@users.noreply.github.com>
Date: Sat, 29 Jun 2024 15:21:15 -0400
Subject: [PATCH] feat: create Image component

---
 src/Image/Image.css |  5 +++++
 src/Image/Image.jsx | 28 ++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 src/Image/Image.css
 create mode 100644 src/Image/Image.jsx

diff --git a/src/Image/Image.css b/src/Image/Image.css
new file mode 100644
index 00000000..dd45d903
--- /dev/null
+++ b/src/Image/Image.css
@@ -0,0 +1,5 @@
+.dynamic-image picture, img, source {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
diff --git a/src/Image/Image.jsx b/src/Image/Image.jsx
new file mode 100644
index 00000000..3f3d5532
--- /dev/null
+++ b/src/Image/Image.jsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import './Image.css'
+
+// Creates a dynamically loaded image.
+const Image = ({ src, type, alt, lazy, width, height, className, style }) => {
+  const lazyLoading = (lazy === true)
+  const imgalt = alt || 'Bytes of Love image'
+  return (
+    <div className={className} style={style}>
+      <div style={{ width, height }}>
+        <picture className='dynamic-image'>
+          <source
+            loading={(lazyLoading) ? 'lazy' : ''}
+            alt={imgalt} type={type} src={src} width={width}
+            height={height}
+          />
+          <img
+            loading={(lazyLoading) ? 'lazy' : ''}
+            alt={imgalt} type={type} src={src} width={width}
+            height={height}
+          />
+        </picture>
+      </div>
+    </div>
+  )
+}
+
+export default Image