From 48a969e84e21144c3ff7aca54b380fbdf97669f4 Mon Sep 17 00:00:00 2001
From: hocine1212 <hocinekaz@gmail.com>
Date: Thu, 28 Sep 2023 12:47:13 +0100
Subject: [PATCH] feat(shoppingcard component): create a reusable card
 component

fix #8
---
 package-lock.json                             | 105 ++++++++++++++++++
 src/components/ShoppingCard/ShoppingCard.jsx  |  37 ++++++
 .../Shopingcart.jsx                           |   0
 src/pages/index.js                            |   9 +-
 src/styles/globals.css                        |   4 +-
 src/util/API.js                               |   0
 6 files changed, 152 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ShoppingCard/ShoppingCard.jsx
 rename src/components/{ShopingCart => ShoppingCart}/Shopingcart.jsx (100%)
 create mode 100644 src/util/API.js

diff --git a/package-lock.json b/package-lock.json
index b7cca59..3386d53 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6996,6 +6996,111 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "13.5.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.2.tgz",
+      "integrity": "sha512-7eAyunAWq6yFwdSQliWMmGhObPpHTesiKxMw4DWVxhm5yLotBj8FCR4PXGkpRP2tf8QhaWuVba+/fyAYggqfQg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "13.5.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.2.tgz",
+      "integrity": "sha512-WxXYWE7zF1ch8rrNh5xbIWzhMVas6Vbw+9BCSyZvu7gZC5EEiyZNJsafsC89qlaSA7BnmsDXVWQmc+s1feSYbQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "13.5.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.2.tgz",
+      "integrity": "sha512-URSwhRYrbj/4MSBjLlefPTK3/tvg95TTm6mRaiZWBB6Za3hpHKi8vSdnCMw5D2aP6k0sQQIEG6Pzcfwm+C5vrg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "13.5.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.2.tgz",
+      "integrity": "sha512-HefiwAdIygFyNmyVsQeiJp+j8vPKpIRYDlmTlF9/tLdcd3qEL/UEBswa1M7cvO8nHcr27ZTKXz5m7dkd56/Esg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "13.5.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.2.tgz",
+      "integrity": "sha512-Em9ApaSFIQnWXRT3K6iFnr9uBXymixLc65Xw4eNt7glgH0eiXpg+QhjmgI2BFyc7k4ZIjglfukt9saNpEyolWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "13.5.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.2.tgz",
+      "integrity": "sha512-TBACBvvNYU+87X0yklSuAseqdpua8m/P79P0SG1fWUvWDDA14jASIg7kr86AuY5qix47nZLEJ5WWS0L20jAUNw==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "13.5.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.2.tgz",
+      "integrity": "sha512-LfTHt+hTL8w7F9hnB3H4nRasCzLD/fP+h4/GUVBTxrkMJOnh/7OZ0XbYDKO/uuWwryJS9kZjhxcruBiYwc5UDw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   }
 }
diff --git a/src/components/ShoppingCard/ShoppingCard.jsx b/src/components/ShoppingCard/ShoppingCard.jsx
new file mode 100644
index 0000000..ce127d5
--- /dev/null
+++ b/src/components/ShoppingCard/ShoppingCard.jsx
@@ -0,0 +1,37 @@
+import Link from "next/link"
+import StarRating from "../Rating/StarRating"
+
+export default function ShoppingCard({ product }) {
+  return (
+    <Link href={`/products/${product.id}`}>
+      <div
+        className="card w-90 bg-white glass border-gold-g "
+        style={{ minHeight: "450px" }}
+        key={product.id}
+      >
+        <figure>
+          <img
+            src={product.image}
+            alt={product.title}
+            style={{ width: "60%", height: "250px", padding: "1rem" }}
+          />
+        </figure>
+        <div className="card-body text-center">
+          <h2 className="card-title text-text-brown mb-2 ">
+            {product.title.length > 25
+              ? `${product.title.slice(0, 25)}...`
+              : product.title}
+          </h2>
+          <StarRating rating={product.rating.rate} />
+
+          <div className="flex flex-wrap items-start gap-16 ">
+            <button className="btn bg-buttongold text-brown-text-brown px-4 py-2 hover:bg-buttongoldhov border border-brown-100 btn-xs sm:btn-sm md:btn-sm lg:btn-sm">
+              add to cart
+            </button>
+            <p className="font-bold text-xl">{product.price}$</p>
+          </div>
+        </div>
+      </div>
+    </Link>
+  )
+}
diff --git a/src/components/ShopingCart/Shopingcart.jsx b/src/components/ShoppingCart/Shopingcart.jsx
similarity index 100%
rename from src/components/ShopingCart/Shopingcart.jsx
rename to src/components/ShoppingCart/Shopingcart.jsx
diff --git a/src/pages/index.js b/src/pages/index.js
index 7daea14..2233d94 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,5 +1,12 @@
+import Filter from "@/components/Filter/Filter"
 import Image from "next/image"
+import AllProducts from "./products"
 
 export default function Home() {
-  return <h1>hi</h1>
+  return (
+    <>
+      {/* <Filter /> */}
+      <AllProducts />
+    </>
+  )
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index fd81e88..2574518 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
+/* :root {
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
@@ -24,4 +24,4 @@ body {
       rgb(var(--background-end-rgb))
     )
     rgb(var(--background-start-rgb));
-}
+} */
diff --git a/src/util/API.js b/src/util/API.js
new file mode 100644
index 0000000..e69de29