From e347aedee6f2810fb5822b530d6fb9dce8dcdf86 Mon Sep 17 00:00:00 2001
From: Arcel <darcel21@gmail.com>
Date: Fri, 25 Aug 2023 17:56:44 -0400
Subject: [PATCH] updating our directory page with directory component and
 category item compnent

---
 package-lock.json                             |  2 +-
 package.json                                  |  2 +-
 src/App.js                                    | 69 ++++++++---------
 .../category-item/category-item.component.jsx | 21 +++++
 .../category-item/category-item.styles.scss   | 76 +++++++++++++++++++
 .../directory/directory.component.jsx         | 16 ++++
 .../directory/directory.styles.scss           |  6 ++
 7 files changed, 153 insertions(+), 39 deletions(-)
 create mode 100644 src/components/category-item/category-item.component.jsx
 create mode 100644 src/components/category-item/category-item.styles.scss
 create mode 100644 src/components/directory/directory.component.jsx
 create mode 100644 src/components/directory/directory.styles.scss

diff --git a/package-lock.json b/package-lock.json
index 068318c3cb..dbe3219392 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
         "@testing-library/user-event": "13.5.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "react-scripts": "5.0.0",
+        "react-scripts": "^5.0.0",
         "web-vitals": "2.1.4"
       }
     },
diff --git a/package.json b/package.json
index 58bae38ee1..5506ddf3a0 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "@testing-library/user-event": "13.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "5.0.0",
+    "react-scripts": "^5.0.0",
     "web-vitals": "2.1.4"
   },
   "scripts": {
diff --git a/src/App.js b/src/App.js
index a3e1c29fd9..dcb0a3f015 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,42 +1,37 @@
+import Directory from './components/directory/directory.component'
+
 const App = () => {
+  const categories = [
+
+  {
+    "id": 1,
+    "title": "hats",
+    "imageUrl": "https://i.ibb.co/cvpntL1/hats.png"
+  },
+  {
+    "id": 2,
+    "title": "jackets",
+    "imageUrl": "https://i.ibb.co/px2tCc3/jackets.png"
+  },
+  {
+    "id": 3,
+    "title": "sneakers",
+    "imageUrl": "https://i.ibb.co/0jqHpnp/sneakers.png"
+  },
+  {
+    "id": 4,
+    "title": "womens",
+    "imageUrl": "https://i.ibb.co/GCCdy8t/womens.png"
+  },
+  {
+    "id": 5,
+    "title": "mens",
+    "imageUrl": "https://i.ibb.co/R70vBrQ/men.png"
+  },
+];
+
   return (
-    <div className='categories-container'>
-      <div className='category-container'>
-        {/* <img /> */}
-        <div className='category-body-container'>
-          <h2>Hats</h2>
-          <p>Shop Now</p>
-        </div>
-      </div>
-      <div className='category-container'>
-        {/* <img /> */}
-        <div className='category-body-container'>
-          <h2>Jackets</h2>
-          <p>Shop Now</p>
-        </div>
-      </div>
-      <div className='category-container'>
-        {/* <img /> */}
-        <div className='category-body-container'>
-          <h2>Sneakers</h2>
-          <p>Shop Now</p>
-        </div>
-      </div>
-      <div className='category-container'>
-        {/* <img /> */}
-        <div className='category-body-container'>
-          <h2>Womens</h2>
-          <p>Shop Now</p>
-        </div>
-      </div>
-      <div className='category-container'>
-        {/* <img /> */}
-        <div className='category-body-container'>
-          <h2>Mens</h2>
-          <p>Shop Now</p>
-        </div>
-      </div>
-    </div>
+     <Directory categories= {categories} />
   );
 };
 
diff --git a/src/components/category-item/category-item.component.jsx b/src/components/category-item/category-item.component.jsx
new file mode 100644
index 0000000000..6368ff3a30
--- /dev/null
+++ b/src/components/category-item/category-item.component.jsx
@@ -0,0 +1,21 @@
+import './category-item.styles.scss'
+
+const CategoryItem = ({ category }) => {
+    const { imageUrl, title } = category;
+    return (
+            <div className='category-container'>
+        <div 
+        className= 'background-image' 
+        style={{
+            backgroundImage: `url(${imageUrl})`
+            }}
+        />
+            <div className='category-body-container'>
+            <h2>{title}</h2>
+            <p>Shop Now</p>
+            </div>
+        </div>
+    )
+}
+
+export default CategoryItem
\ No newline at end of file
diff --git a/src/components/category-item/category-item.styles.scss b/src/components/category-item/category-item.styles.scss
new file mode 100644
index 0000000000..028b9c7fbf
--- /dev/null
+++ b/src/components/category-item/category-item.styles.scss
@@ -0,0 +1,76 @@
+.categories-container {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+  
+  .category-container {
+    min-width: 30%;
+    height: 240px;
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid black;
+    margin: 0 7.5px 15px;
+    overflow: hidden;
+  
+    &:hover {
+      cursor: pointer;
+  
+      & .background-image {
+        transform: scale(1.1);
+        transition: transform 6s cubic-bezier(0.25, 0.45, 0.45, 0.95);
+      }
+  
+      & .category-body-container {
+        opacity: 0.9;
+      }
+    }
+  
+    &.large {
+      height: 380px;
+    }
+  
+    &:first-child {
+      margin-right: 7.5px;
+    }
+  
+    &:last-child {
+      margin-left: 7.5px;
+    }
+  
+    .background-image {
+      width: 100%;
+      height: 100%;
+      background-size: cover;
+      background-position: center;
+    }
+  
+    .category-body-container {
+      height: 90px;
+      padding: 0 25px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid black;
+      background-color: white;
+      opacity: 0.7;
+      position: absolute;
+  
+      h2 {
+        font-weight: bold;
+        margin: 0 6px 0;
+        font-size: 22px;
+        color: #4a4a4a;
+      }
+  
+      p {
+        font-weight: lighter;
+        font-size: 16px;
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/src/components/directory/directory.component.jsx b/src/components/directory/directory.component.jsx
new file mode 100644
index 0000000000..01c3e8525e
--- /dev/null
+++ b/src/components/directory/directory.component.jsx
@@ -0,0 +1,16 @@
+import CategoryItem from '../category-item/category-item.component';
+
+import './directory.styles.scss';
+
+const Directory = ({ categories }) => {
+    return (
+        <div className='directory-container'>
+        {categories.map((category) => (
+          <CategoryItem key={category.id} category={category} />
+        ))}
+     </div>
+    );
+};
+
+
+export default Directory
\ No newline at end of file
diff --git a/src/components/directory/directory.styles.scss b/src/components/directory/directory.styles.scss
new file mode 100644
index 0000000000..160ccba627
--- /dev/null
+++ b/src/components/directory/directory.styles.scss
@@ -0,0 +1,6 @@
+.directory-container {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
\ No newline at end of file