feat(allproducts page): create all products page to display all products

src/components/ShoppingCard/ShoppingCard.jsx

@@ -12,13 +12,11 @@ export default function ShoppingCard({ id, title, image, price, rating }) {
           <img
             src={image}
             alt={title}
-
             style={{ width: "60%", height: "250px", padding: "1rem" }}
           />
         </figure>
         <div className="card-body text-center">
           <h2 className="card-title text-text-brown mb-2 ">
-
             {title.length > 25 ? `${title.slice(0, 25)}...` : title}
           </h2>
           <StarRating rating={rating.rate} />
@@ -28,7 +26,6 @@ export default function ShoppingCard({ id, title, image, price, rating }) {
             </button>
 
             <p className="font-bold text-xl">{price}$</p>
-
           </div>
         </div>
       </div>

src/pages/products/index.jsx

@@ -0,0 +1,28 @@
+import ShoppingCard from "@/components/ShoppingCard/ShoppingCard"
+
+import { useEffect, useState } from "react"
+
+const AllProducts = () => {
+  const [products, setProducts] = useState([])
+
+  function fetchProducts() {
+    fetch("https://fakestoreapi.com/products")
+      .then((res) => res.json())
+      .then((products) => setProducts(products))
+  }
+  useEffect(() => {
+    fetchProducts()
+  }, [])
+
+  return (
+    <div>
+      <h1 className="text-3xl  text-center font-semibold py-2">All Products</h1>
+      <div className="grid grid-cols-3 gap-6 mx-auto p-16 justify-center bg-slate-100">
+        {products.map((product) => {
+          return <ShoppingCard key={product.id} {...product} />
+        })}
+      </div>
+    </div>
+  )
+}
+export default AllProducts