Merge branch 'develop' into 13-searchbar

202306-NEA-DZ-FEW · Oct 21, 2023 · 84afc9a · 84afc9a
2 parents 0beaa3d + 9af2f3b
commit 84afc9a
Show file tree

Hide file tree

Showing 13 changed files with 396 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,8 @@
         "react-icon": "^1.0.0",
         "react-icons": "^4.11.0",
         "react-router-dom": "^6.3.0",
-        "react-test-renderer": "^18.2.0"
+        "react-test-renderer": "^18.2.0",
+        "tailwind-merge": "^1.14.0"
     },
     "devDependencies": {
         "@commitlint/cli": "^17.7.2",

diff --git a/src/components/Buttons/Button.jsx b/src/components/Buttons/Button.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { twMerge } from "tailwind-merge";
+function Button({ children, className, onClick }) {
+    return (
+        <button
+            className={twMerge(
+                "bg-[#FF8A57] border-2 border-[#FF8A57] py-2 px-14 rounded-lg text-white shadow-sm text-md hover:bg-white hover:text-[#FF8A57] hover:border-2 hover:border-[#FF8A57] hover:duration-300 font-bold",
+                className
+            )}
+            onClick={onClick}
+        >
+            {children}
+        </button>
+    );
+}
+
+export default Button;
diff --git a/src/components/Buttons/Buttons.jsx b/src/components/Buttons/Buttons.jsx
diff --git a/src/components/Buttons/__test__/Button.test.js b/src/components/Buttons/__test__/Button.test.js
@@ -0,0 +1,7 @@
+import renderer from "react-test-renderer";
+import Button from "../Button";
+
+it("renders correctly", () => {
+    const tree = renderer.create(<Button />).toJSON();
+    expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/Buttons/__test__/__snapshots__/Button.test.js.snap b/src/components/Buttons/__test__/__snapshots__/Button.test.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<button
+  className="bg-[#FF8A57] border-2 border-[#FF8A57] py-2 px-14 rounded-lg text-white shadow-sm text-md hover:bg-white hover:text-[#FF8A57] hover:border-2 hover:border-[#FF8A57] hover:duration-300 font-bold"
+/>
+`;
diff --git a/src/components/ProductCard/ProductCard.jsx b/src/components/ProductCard/ProductCard.jsx
@@ -1,7 +1,44 @@
+import Image from "next/image";
 import React from "react";
+import { FaShoppingCart } from "react-icons/fa";
 
 function ProductCard() {
-    return <div>ProductCard</div>;
+    return (
+        <div className='card w-[270px]  bg-white shadow-xl'>
+            <div className='relative flex justify-center items-center m-4 mb-0 rounded-lg h-[80%]  '>
+                <figure className='  rounded-lg '>
+                    <Image
+                        className='object-cover  scale-100 rounded-lg transition-transform hover:scale-105 duration-300 ease-in-out overflow-hidden'
+                        src=''
+                        width={200}
+                        height={200}
+                        alt='Picture of the product'
+                    />
+                    <div className='absolute top-0 m-2  left-0 rounded-full '>
+                        <p className='rounded-full bg-[#7874F2] p-1 text-[8px] font-bold uppercase tracking-wide text-white sm:py-1 sm:px-3'>
+                            Sale
+                        </p>
+                    </div>
+                </figure>
+            </div>
+
+            <div className='mt-1 px-5 p-4  mb-2 '>
+                <h2 className='card-title text-slate-900 text-xl max-w-lg tracking-tight font-bold text-center '>
+                    Nike Air MX Super 2500
+                </h2>
+                <div className='mt-3 mb-4 w-full  flex items-center   justify-between   text-slate-600 '>
+                    <p className=' badge badge-outline '>category</p>
+                    <p>location</p>
+                </div>
+                <div className=' flex items-center   justify-between font-semibold text-slate-900 '>
+                    <p className='text-xl '>$449</p>
+                    <button className='text-3xl text-[#FF8A57] hover:text-orange-500'>
+                        <FaShoppingCart />
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
 }
 
 export default ProductCard;
diff --git a/src/components/ProductCard/__test__/ProductCard.test.js b/src/components/ProductCard/__test__/ProductCard.test.js
@@ -0,0 +1,8 @@
+import renderer from "react-test-renderer";
+
+import ProductCard from "../ProductCard";
+
+it("renders correctly", () => {
+    const tree = renderer.create(<ProductCard />).toJSON();
+    expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/ProductCard/__test__/__snapshots__/ProductCard.test.js.snap b/src/components/ProductCard/__test__/__snapshots__/ProductCard.test.js.snap
@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="card w-[270px]  bg-white shadow-xl"
+>
+  <div
+    className="relative flex justify-center items-center m-4 mb-0 rounded-lg h-[80%]  "
+  >
+    <figure
+      className="  rounded-lg "
+    >
+      <img
+        alt="Picture of the product"
+        className="object-cover  scale-100 rounded-lg transition-transform hover:scale-105 duration-300 ease-in-out overflow-hidden"
+        data-nimg="1"
+        decoding="async"
+        height={200}
+        onError={[Function]}
+        onLoad={[Function]}
+        src=""
+        style={
+          Object {
+            "color": "transparent",
+          }
+        }
+        width={200}
+      />
+      <div
+        className="absolute top-0 m-2  left-0 rounded-full "
+      >
+        <p
+          className="rounded-full bg-[#7874F2] p-1 text-[8px] font-bold uppercase tracking-wide text-white sm:py-1 sm:px-3"
+        >
+          Sale
+        </p>
+      </div>
+    </figure>
+  </div>
+  <div
+    className="mt-1 px-5 p-4  mb-2 "
+  >
+    <h2
+      className="card-title text-slate-900 text-xl max-w-lg tracking-tight font-bold text-center "
+    >
+      Nike Air MX Super 2500
+    </h2>
+    <div
+      className="mt-3 mb-4 w-full  flex items-center   justify-between   text-slate-600 "
+    >
+      <p
+        className=" badge badge-outline "
+      >
+        category
+      </p>
+      <p>
+        location
+      </p>
+    </div>
+    <div
+      className=" flex items-center   justify-between font-semibold text-slate-900 "
+    >
+      <p
+        className="text-xl "
+      >
+        $449
+      </p>
+      <button
+        className="text-3xl text-[#FF8A57] hover:text-orange-500"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          strokeWidth="0"
+          style={
+            Object {
+              "color": undefined,
+            }
+          }
+          viewBox="0 0 576 512"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 426.165 424 440.326 424 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/UnderBar/UnderBar.jsx b/src/components/UnderBar/UnderBar.jsx
@@ -1,7 +1,90 @@
 import React from "react";
-
-function UnderBar() {
-    return <div>UnderBar</div>;
+import Link from "next/link";
+import { twMerge } from "tailwind-merge";
+function UnderBar({ className }) {
+    return (
+        <div
+            className={twMerge(
+                "bg-[#585785] font-bold md:font-semibold md:bg-[#585785] lg:bg-[#585785] lg:font-semibold",
+                className
+            )}
+        >
+            <ul className='p-4 md:p-0 md:flex md:justify-around lg:p- lg:flex lg:justify-around lg:w-[75%] lg:mx-auto '>
+                <li>
+                    <Link
+                        href={"#"}
+                        className='capitalize underline hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  '
+                    >
+                        All Categories
+                    </Link>
+                </li>
+                <li>
+                    <Link
+                        href={"#"}
+                        className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  '
+                    >
+                        Electronics
+                    </Link>
+                </li>
+                <li>
+                    <Link
+                        href={"#"}
+                        className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  '
+                    >
+                        Books
+                    </Link>
+                </li>
+                <li>
+                    <Link
+                        href={"#"}
+                        className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  '
+                    >
+                        Gaming
+                    </Link>
+                </li>
+                <li>
+                    <Link
+                        href={"#"}
+                        className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  '
+                    >
+                        Clothes
+                    </Link>
+                </li>
+                <li>
+                    <Link
+                        href={"#"}
+                        className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  '
+                    >
+                        Shoes
+                    </Link>
+                </li>
+                <li>
+                    <Link
+                        href={"#"}
+                        className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  '
+                    >
+                        Food
+                    </Link>
+                </li>
+                <li>
+                    <Link
+                        href={"#"}
+                        className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  '
+                    >
+                        Transportation
+                    </Link>
+                </li>
+                <li>
+                    <Link
+                        href={"#"}
+                        className='capitalize hover:text-[#FFA857] transition-all duration-300 ease-in-out text-white text-lg inline-block ml-4 p-1 md:text-sm md:ml-0 md:py-2 lg:text-md lg:ml-0  '
+                    >
+                        Furniture
+                    </Link>
+                </li>
+            </ul>
+        </div>
+    );
 }
 
 export default UnderBar;
diff --git a/src/components/UnderBar/__test__/UnderBar.test.js b/src/components/UnderBar/__test__/UnderBar.test.js
@@ -0,0 +1,7 @@
+import renderer from "react-test-renderer";
+import UnderBar from "../UnderBar";
+
+it("renders correctly", () => {
+    const tree = renderer.create(<UnderBar />).toJSON();
+    expect(tree).toMatchSnapshot();
+});