Refactor Code with Reusable Components: 12. E-Commerce Advanced Filter Project

Author: DevHanza

12. E-Commerce Filter Advanced/src/Products/Products.jsx

@@ -1,40 +1,14 @@
 import "./Products.css";
-import { AiFillStar } from "react-icons/ai";
-import { BsFillBagHeartFill } from "react-icons/bs";
+import Card from "../components/Card";
 
 function Products() {
   return (
-    <>
-      <div className="card-container">
-        <div className="card">
-          <img
-            className="card-img"
-            src="https://m.media-amazon.com/images/I/6125yAfsJKL._AC_UX575_.jpg"
-            alt="Shoe"
-          />
-          <div className="card-details">
-            <h3 className="card-title">Shoe</h3>
-            <section className="card-reviews">
-              <AiFillStar className="ratings-start" />
-              <AiFillStar className="ratings-start" />
-              <AiFillStar className="ratings-start" />
-              <AiFillStar className="ratings-start" />
-
-              <span className="total-reviews">4</span>
-            </section>
-            <section className="card-price">
-              <div className="price">
-                <del>$300</del>
-              </div>
-
-              <div className="bag">
-                <BsFillBagHeartFill className="bag-icon" />
-              </div>
-            </section>
-          </div>
-        </div>
-      </div>
-    </>
+    <div className="card-container">
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+    </div>
   );
 }
 

12. E-Commerce Filter Advanced/src/Sidebar/Category/Category.jsx

@@ -1,14 +1,16 @@
 import "./Category.css";
+import Input from "../../components/Input";
 
 function Category() {
   return (
     <div>
       <h2 className="sidebar-title">Category</h2>
       <div>
-        <label className="sidebar-label-container">
-          <input type="radio" name="test" id="" />
-          <span className="checkmark"></span>All
-        </label>
+        <Input />
+        <Input />
+        <Input />
+        <Input />
+       
       </div>
     </div>
   );

12. E-Commerce Filter Advanced/src/Sidebar/Colors/Colors.jsx

@@ -1,13 +1,15 @@
 import "./Colors.css";
+import Input from "../../components/Input";
+
 function Colors() {
   return (
     <div>
       <h2 className="sidebar-title">Colors</h2>
       <div>
-        <label className="sidebar-label-container">
-          <input type="radio" name="test" id="" />
-          <span className="checkmark"></span>All
-        </label>
+        <Input />
+        <Input />
+        <Input />
+        <Input />
       </div>
     </div>
   );

12. E-Commerce Filter Advanced/src/Sidebar/Price/Price.jsx

@@ -1,15 +1,16 @@
 import React from "react";
+import Input from "../../components/Input";
 import "./Price.css";
 
 function Price() {
   return (
     <div className="ml">
       <h2 className="sidebar-title price-title">Price</h2>
 
-      <label className="sidebar-label-container">
-        <input type="radio" name="test" id="" />
-        <span className="checkmark"></span>$0 - $50
-      </label>
+      <Input />
+      <Input />
+      <Input />
+      <Input />
     </div>
   );
 }

12. E-Commerce Filter Advanced/src/components/Card.jsx

@@ -1,7 +1,39 @@
 import React from "react";
+import { AiFillStar } from "react-icons/ai";
+import { BsFillBagHeartFill } from "react-icons/bs";
 
 function Card() {
-  return <div></div>;
+  return (
+    <>
+      <div className="card">
+        <img
+          className="card-img"
+          src="https://m.media-amazon.com/images/I/6125yAfsJKL._AC_UX575_.jpg"
+          alt="Shoe"
+        />
+        <div className="card-details">
+          <h3 className="card-title">Shoe</h3>
+          <section className="card-reviews">
+            <AiFillStar className="ratings-start" />
+            <AiFillStar className="ratings-start" />
+            <AiFillStar className="ratings-start" />
+            <AiFillStar className="ratings-start" />
+
+            <span className="total-reviews">4</span>
+          </section>
+          <section className="card-price">
+            <div className="price">
+              <del>$300</del>
+            </div>
+
+            <div className="bag">
+              <BsFillBagHeartFill className="bag-icon" />
+            </div>
+          </section>
+        </div>
+      </div>
+    </>
+  );
 }
 
 export default Card;

12. E-Commerce Filter Advanced/src/components/Input.jsx

@@ -1,7 +1,12 @@
 import React from "react";
 
 function Input() {
-  return <div></div>;
+  return (
+    <label className="sidebar-label-container">
+      <input type="radio" name="test" id="" />
+      <span className="checkmark"></span>All
+    </label>
+  );
 }
 
 export default Input;

package-lock.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "react-icons": "^5.5.0"
+  }
+}