safak · Aymen-Gherdaine · Jun 7, 2024 · Jun 7, 2024 · Jun 8, 2024
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,4 +1,12 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "images.pexels.com",
+      },
+    ],
+  },
+};
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,18 +9,17 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.2.2",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.2"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
     "eslint": "^8",
-    "eslint-config-next": "14.2.2"
+    "eslint-config-next": "14.2.2",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1"
   }
 }
diff --git a/public/logo.jpg b/public/logo.jpg
diff --git a/public/logo.png b/public/logo.png
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+body {
+  background: #fbfbfb;
+}
diff --git a/src/app/layout.js b/src/app/layout.js
@@ -0,0 +1,23 @@
+import { Cinzel } from "next/font/google";
+import "./globals.css";
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+
+const cinzel = Cinzel({ weight: "500", subsets: ["latin"] });
+
+export const metadata = {
+  title: "Paddy E-Commerce ",
+  description: "A complete e-commerce application with Next.js and Wix",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={cinzel.className}>
+        <Navbar />
+        {children}
+        <Footer />
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
diff --git a/src/app/list/[productSlug]/page.js b/src/app/list/[productSlug]/page.js
@@ -0,0 +1,5 @@
+const ProductPage = () => {
+  return <div> Product Page</div>;
+};
+
+export default ProductPage;
diff --git a/src/app/list/page.js b/src/app/list/page.js
@@ -0,0 +1,5 @@
+const ListPage = () => {
+  return <div>List Page</div>;
+};
+
+export default ListPage;
diff --git a/src/app/login/page.js b/src/app/login/page.js
@@ -0,0 +1,5 @@
+const LoginPage = () => {
+  return <div>Login Page</div>;
+};
+
+export default LoginPage;
diff --git a/src/app/page.tsx → src/app/page.js b/src/app/page.tsx → src/app/page.js
diff --git a/src/components/CartModal.js b/src/components/CartModal.js
@@ -0,0 +1,67 @@
+"use client";
+
+import Image from "next/image";
+
+const CartModal = () => {
+  const cartItems = true;
+  return (
+    <div className="w-max absolute p-4 rounded-md shadow-custom bg-[#FBFBFB] top-12 right-0 flex flex-col ">
+      {!cartItems ? (
+        <div className="">Cart is Empty</div>
+      ) : (
+        <>
+          <h2 className="text-2xl mt-4 mb-5 ">Shopping Cart</h2>
+          {/* Cart Items Wrapper */}
+          <div className="flex flex-col gap-8">
+            {/* Cart Item */}
+            <div className="flex gap-4">
+              <Image
+                src="https://images.pexels.com/photos/16070779/pexels-photo-16070779/free-photo-of-mur-equipement-materiel-loisir.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
+                alt="product in cart image"
+                width={72}
+                height={72}
+                className="object-cover rounded-md"
+              />
+              <div className="flex flex-col gap-12">
+                {/* Top */}
+                <div className="">
+                  {/* Title */}
+                  <div className=" flex items-center justify-center gap-8">
+                    <h3 className="font-semibold">Product Name</h3>
+                    <div className="p-1 bg-gray-50 rounded-sm">$50</div>
+                  </div>
+                  {/* Description */}
+                  <div className="text-sm text-gray-500">Available</div>
+                </div>
+                {/* Bottom*/}
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-500">Qty. 2</span>
+                  <span className="text-blue-500">Remove</span>
+                </div>
+              </div>
+            </div>
+            <div className="">
+              <div className="flex items-center justify-between font-semibold">
+                <span className="">Subtotal</span>
+                <span className="">$49</span>
+              </div>
+              <p className="text-gray-500 text-sm mt-2 mb-2">
+                mur-equipement-materiel-loisir
+              </p>
+              <div className="flex justify-between text-sm mt-4">
+                <button className="rounded-md py-3 px-4 ring-1 ring-gray-300">
+                  View Cart
+                </button>
+                <button className="rounded-md py-3 px-4 bg-black text-[#FBFBFB]">
+                  Checkout
+                </button>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default CartModal;
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -0,0 +1,5 @@
+const Footer = () => {
+  return <div>Footer</div>;
+};
+
+export default Footer;
diff --git a/src/components/Menu.js b/src/components/Menu.js
@@ -0,0 +1,34 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+
+const Menu = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="">
+      <Image
+        src="/menu.png"
+        alt="hamburger menu icon"
+        width={28}
+        height={28}
+        className="cursor-pointer"
+        onClick={() => setOpen((prev) => !prev)}
+      />
+      {open && (
+        <div className="absolute bg-black text-white left-0 top-20 w-full h-[calc(100vh-80px)] flex flex-col items-center justify-center gap-8 text-xl z-10">
+          <Link href="/">Home</Link>
+          <Link href="/shop">Shop</Link>
+          <Link href="/deals">Deals</Link>
+          <Link href="/about">About</Link>
+          <Link href="/contact">Contact</Link>
+          <Link href="/logout">Logout</Link>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Menu;
diff --git a/src/components/NavIcons.js b/src/components/NavIcons.js
@@ -0,0 +1,73 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import CartModal from "./CartModal";
+
+const NaveIcons = () => {
+  // State to open and close profile and cart modal
+  const [isProfileOpen, setIsProfileOpen] = useState(false);
+  const [isCartOpen, setIsCartOpen] = useState(false);
+
+  const router = useRouter();
+
+  const isLoggedIn = false;
+
+  // function that handle if the user is loggedin or not
+  const handleProfile = () => {
+    if (!isLoggedIn) {
+      router.push("/login");
+    }
+
+    setIsProfileOpen((prev) => !prev);
+  };
+
+  // function that handle the cart modal
+  const cartHandler = () => {
+    setIsCartOpen((prev) => !prev);
+  };
+
+  return (
+    <div className="flex items-center gap-4 xl:gap-6 relative">
+      <Image
+        src="/profile.png"
+        alt="profile icon"
+        width={22}
+        height={22}
+        className="cursor-pointer"
+        onClick={handleProfile}
+      />
+      {isProfileOpen && (
+        <div className="absolute p-4 rounded-lg top-12 -left-10 text-md shadow-custom z-20">
+          <Link href="/">Profile</Link>
+          <div className="mt-2 cursor-pointer">Logout</div>
+        </div>
+      )}
+      <Image
+        src="/notification.png"
+        alt="notification icon"
+        width={22}
+        height={22}
+        className="cursor-pointer"
+      />
+      <div className="relative">
+        <Image
+          src="/cart.png"
+          alt="cart icon"
+          width={22}
+          height={22}
+          className="cursor-pointer"
+          onClick={cartHandler}
+        />
+        <span className="absolute bg-red-600 text-[#FBFBFB] -top-4 -right-4 w-6 h-6 rounded-full flex justify-center items-center">
+          2
+        </span>
+      </div>
+      {isCartOpen && <CartModal />}
+    </div>
+  );
+};
+
+export default NaveIcons;
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -0,0 +1,48 @@
+import Link from "next/link";
+import Image from "next/image";
+import Menu from "./Menu";
+import SearchBar from "./SearchBar";
+import NaveIcons from "./NavIcons";
+
+const Navbar = () => {
+  return (
+    <div className="h-20 px-4 md:px-4 lg:px-16 xl:32 2xl:px-64 relative">
+      {/* Mobile */}
+      <div className="h-full flex items-center justify-between md:hidden">
+        <Link href="/">
+          <div className="text-2xl tracking-wide">Paddy</div>
+        </Link>
+        <Menu />
+      </div>
+      {/* Bigger screens */}
+      <div className="hidden md:flex items-center justify-between gap-8 h-full">
+        {/* Left side */}
+        <div className="w-1/3 xl:w-1/2 flex items-center gap-16">
+          <Link href="/" className="flex items-center gap-3">
+            <Image
+              src="/logo.jpg"
+              alt="paddy logo icon"
+              width={50}
+              height={50}
+            />
+            <div className="text-2xl tracking-wide">Paddy</div>
+          </Link>
+          <div className="hidden xl:flex gap-4">
+            <Link href="/">Home</Link>
+            <Link href="/shop">Shop</Link>
+            <Link href="/deals">Deals</Link>
+            <Link href="/about">About</Link>
+            <Link href="/contact">Contact</Link>
+          </div>
+        </div>
+        {/* Right side */}
+        <div className="w-2/3 xl:w-1/2 flex items-center justify-between gap-8">
+          <SearchBar />
+          <NaveIcons />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Navbar;