updating our directory page with directory component and category ite…

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": {

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} />
   );
 };
 

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

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

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

src/components/directory/directory.styles.scss

@@ -0,0 +1,6 @@
+.directory-container {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }