From f6b3e8e1b567962e13e694bd20eba7a5d674ec9e Mon Sep 17 00:00:00 2001 From: AlaSlimani99 Date: Mon, 1 Dec 2025 18:30:31 +0100 Subject: [PATCH 1/4] initial ui components --- package.json | 13 ++++++----- pnpm-lock.yaml | 12 ++++++++++ src/app/components/footer.tsx | 40 ++++++++++++++++++++++++++++++++ src/app/components/navbar.tsx | 35 ++++++++++++++++++++++++++++ src/app/components/searchbar.tsx | 13 +++++++++++ src/app/layout.tsx | 8 ++++++- src/app/page.tsx | 8 ++++++- 7 files changed, 121 insertions(+), 8 deletions(-) create mode 100644 src/app/components/footer.tsx create mode 100644 src/app/components/navbar.tsx create mode 100644 src/app/components/searchbar.tsx diff --git a/package.json b/package.json index 6f968124..70405fc9 100644 --- a/package.json +++ b/package.json @@ -9,19 +9,20 @@ "lint": "next lint" }, "dependencies": { + "lucide-react": "^0.555.0", + "next": "15.4.5", "react": "19.1.0", - "react-dom": "19.1.0", - "next": "15.4.5" + "react-dom": "19.1.0" }, "devDependencies": { - "typescript": "^5", + "@eslint/eslintrc": "^3", + "@tailwindcss/postcss": "^4", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", - "@tailwindcss/postcss": "^4", - "tailwindcss": "^4", "eslint": "^9", "eslint-config-next": "15.4.5", - "@eslint/eslintrc": "^3" + "tailwindcss": "^4", + "typescript": "^5" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fbeef25e..ec94b522 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + lucide-react: + specifier: ^0.555.0 + version: 0.555.0(react@19.1.0) next: specifier: 15.4.5 version: 15.4.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0) @@ -1347,6 +1350,11 @@ packages: resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} hasBin: true + lucide-react@0.555.0: + resolution: {integrity: sha512-D8FvHUGbxWBRQM90NZeIyhAvkFfsh3u9ekrMvJ30Z6gnpBHS6HC6ldLg7tL45hwiIz/u66eKDtdA23gwwGsAHA==} + peerDependencies: + react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0 + magic-string@0.30.17: resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==} @@ -3200,6 +3208,10 @@ snapshots: dependencies: js-tokens: 4.0.0 + lucide-react@0.555.0(react@19.1.0): + dependencies: + react: 19.1.0 + magic-string@0.30.17: dependencies: '@jridgewell/sourcemap-codec': 1.5.4 diff --git a/src/app/components/footer.tsx b/src/app/components/footer.tsx new file mode 100644 index 00000000..a1efeea6 --- /dev/null +++ b/src/app/components/footer.tsx @@ -0,0 +1,40 @@ +import Link from "next/link" +import Image from "next/image" + +const Footer = () => { + return ( +
+
+ + TrendLama +

TrendLama

+ +

2025 Trend Lama

+

All rights are reserved

+
+
+

Links

+ Home + About + Terms of Service + Privacy Policy +
+
+

Links

+ Products + Categories + Brands + Contact +
+
+

Links

+ Help + Support + FAQ + Contact +
+
+ ) +} + +export default Footer \ No newline at end of file diff --git a/src/app/components/navbar.tsx b/src/app/components/navbar.tsx new file mode 100644 index 00000000..7ea37a4a --- /dev/null +++ b/src/app/components/navbar.tsx @@ -0,0 +1,35 @@ +import Link from "next/link" +import Image from "next/image" +import logo from "@/public/logo.png" +import Searchbar from "./searchbar" +import { Bell, ShoppingCart, Home } from "lucide-react" +const Navbar = () => { + return ( + + ) +} + +export default Navbar \ No newline at end of file diff --git a/src/app/components/searchbar.tsx b/src/app/components/searchbar.tsx new file mode 100644 index 00000000..272eea61 --- /dev/null +++ b/src/app/components/searchbar.tsx @@ -0,0 +1,13 @@ +import {Search} from "lucide-react" +const Searchbar = () => { + return ( + +
+ + +
+ + ) +} + +export default Searchbar \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f7fa87eb..32125de7 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,8 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; +import Navbar from "./components/navbar"; +import Footer from "./components/footer"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -27,7 +29,11 @@ export default function RootLayout({ - {children} +
+ + {children} +
+
); diff --git a/src/app/page.tsx b/src/app/page.tsx index 3d365a49..256c1f31 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,6 +1,12 @@ +import Image from "next/image" + const Homepage = () => { return ( -
Homepage
+
+
+ featured Product +
+
) } From f37c8ebb30b63c33406505fb03ec42aefedd1192 Mon Sep 17 00:00:00 2001 From: AlaSlimani99 Date: Fri, 5 Dec 2025 17:10:29 +0100 Subject: [PATCH 2/4] ss --- src/app/components/Categories.tsx | 72 ++++++++++++++++++++ src/app/components/ProductCard.tsx | 40 +++++++++++ src/app/components/ProductList.tsx | 103 +++++++++++++++++++++++++++++ src/app/page.tsx | 6 +- src/app/types.ts | 11 +++ 5 files changed, 230 insertions(+), 2 deletions(-) create mode 100644 src/app/components/Categories.tsx create mode 100644 src/app/components/ProductCard.tsx create mode 100644 src/app/components/ProductList.tsx create mode 100644 src/app/types.ts diff --git a/src/app/components/Categories.tsx b/src/app/components/Categories.tsx new file mode 100644 index 00000000..b56874d5 --- /dev/null +++ b/src/app/components/Categories.tsx @@ -0,0 +1,72 @@ +"use client" + +import { useSearchParams,useRouter,usePathname } from "next/navigation" +import {Glasses ,Shirt ,Briefcase ,ShoppingBasket ,Hand ,Venus} from "lucide-react" +const categories = [ + { + name: "All", + icon: , + slug: "all" + }, + + { + name: "T-shirts", + icon: , + slug: "shirts" + }, + + { + name: "Shoes", + icon: , + slug: "shoes" + }, + { + name: "Glasses", + icon: , + slug: "glasses" + }, + + { + name: "Handbags", + icon: , + slug: "handbags" + }, + { + name: "Jewelry", + icon: , + slug: "jewelry" + }, + + + + + +] + +const Categories = () => { + const searchParams = useSearchParams() + const router = useRouter() + const pathname = usePathname() + const selectedCategory = searchParams.get("category") + const handleChange = (value: string |null) => { + const params = new URLSearchParams(searchParams) + router.push(`${pathname}?${params.toString()}`,{scroll:false}) + } + return ( +
+ {categories.map(category=>( +
handleChange(category.slug)} + > + {category.icon} + {category.name} +
))} +
+ ) +} + +export default Categories \ No newline at end of file diff --git a/src/app/components/ProductCard.tsx b/src/app/components/ProductCard.tsx new file mode 100644 index 00000000..2babe772 --- /dev/null +++ b/src/app/components/ProductCard.tsx @@ -0,0 +1,40 @@ +"use client" +import Link from "next/link" +import { ProductType } from "../types" +import Image from "next/image" +import ProductList from "./ProductList" +const ProductCard = ({product}: {product: ProductType}) => { + return ( +
+ + {/* Product Image */} +
+ {product.name} +
+ + {/* Product Details */} +
+

{product.name}

+

{product.shortDescription}

+
+ {/* Product Types */} +
+ {/* Sizes */} +
+ Size + +
+
+ {/* Colors */} +
+ +
+
+ ) +} + +export default ProductCard \ No newline at end of file diff --git a/src/app/components/ProductList.tsx b/src/app/components/ProductList.tsx new file mode 100644 index 00000000..646733fe --- /dev/null +++ b/src/app/components/ProductList.tsx @@ -0,0 +1,103 @@ +import { ProductsType } from "../types" +import Categories from "./Categories" +import ProductCard from "./ProductCard" + +//Temporary Data + const products: ProductsType = [ + { + id: 1, + name: "Addidas Core fit T-shirt", + shortDescription: "A comfortable and stylish t-shirt for everyday wear", + Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.", + price: 100, + sizes: "S, M, L, XL, XXL", + color: "Red, Blue, Green, Yellow", + + images: [ "/products/1g.png", "/products/1gr.png", "/products/1p.png" ], + }, + + { + id: 2, + name: "Nike Air Max 270", + shortDescription: "A comfortable and stylish t-shirt for everyday wear", + Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.", + price: 200, + sizes: "S, M, L, XL, XXL", + color: "Red, Blue, Green, Yellow", + images: [ "/products/2g.png", "/products/2gr.png" ], + }, + { + id: 3, + name: "Puma RS-X 2.0", + shortDescription: "A comfortable and stylish t-shirt for everyday wear", + Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.", + price: 300, + sizes: "S, M, L, XL, XXL", + color: "Red, Blue, Green, Yellow", + images: [ "/products/3b.png", "/products/3bl.png", "/products/3gr.png" ], + + }, + + { + id: 4, + name: "Product 4", + price: 400, shortDescription: "A comfortable and stylish t-shirt for everyday wear", + Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.", + sizes: "S, M, L, XL, XXL", + color: "Red, Blue, Green, Yellow", + images: [ "/products/4p.png", "/products/4w.png" ], + + }, + + { + id: 5, + name: "Product 5", + price: 500, shortDescription: "A comfortable and stylish t-shirt for everyday wear", + Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.", + sizes: "S, M, L, XL, XXL", + color: "Red, Blue, Green, Yellow", + images: [ "/products/5bl.png", "/products/5o.png", "/products/5r.png" ], + }, + + { + id: 6, + name: "Product 6", + price: 600, shortDescription: "A comfortable and stylish t-shirt for everyday wear", + Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.", + sizes: "S, M, L, XL, XXL", + color: "Red, Blue, Green, Yellow", + images: [ "/products/6g.png", "/products/6w.png" ], + + }, + + + { + id: 7, + name: "Product 7", + price: 700, + shortDescription: "A comfortable and stylish t-shirt for everyday wear", + Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.", + sizes: "S, M, L, XL, XXL", + color: "Red, Blue, Green, Yellow", + images: [ "/products/7g.png", "/products/7p.png" ], + + + }, + + +] + +const ProductList = () => { + return ( +
+ +
+ {products.map((product) => ( + + ))} +
+
+ ) +} + +export default ProductList \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 256c1f31..2e00996d 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,12 +1,14 @@ import Image from "next/image" +import ProductList from "./components/ProductList" const Homepage = () => { return (
- featured Product + featured Product
-
+ + ) } diff --git a/src/app/types.ts b/src/app/types.ts new file mode 100644 index 00000000..df228863 --- /dev/null +++ b/src/app/types.ts @@ -0,0 +1,11 @@ +export type ProductType = { + id: number; + name: string; + shortDescription: string; + Description: string; + price: number; + sizes: string; + color: string; + images: string[]; +} +export type ProductsType = ProductType[] \ No newline at end of file From 28fcbc3773473f9b8048322b877ed70c9398dbb2 Mon Sep 17 00:00:00 2001 From: AlaSlimani99 Date: Fri, 5 Dec 2025 18:36:57 +0100 Subject: [PATCH 3/4] 5-12-25 --- src/app/components/Categories.tsx | 15 ++-- src/app/components/ProductCard.tsx | 111 +++++++++++++++++++++-------- src/app/components/ProductList.tsx | 5 +- 3 files changed, 97 insertions(+), 34 deletions(-) diff --git a/src/app/components/Categories.tsx b/src/app/components/Categories.tsx index b56874d5..359d6aaf 100644 --- a/src/app/components/Categories.tsx +++ b/src/app/components/Categories.tsx @@ -48,16 +48,23 @@ const Categories = () => { const router = useRouter() const pathname = usePathname() const selectedCategory = searchParams.get("category") - const handleChange = (value: string |null) => { + const handleChange = (value: string) => { const params = new URLSearchParams(searchParams) - router.push(`${pathname}?${params.toString()}`,{scroll:false}) + if (value === "all") { + params.delete("category") + } else { + params.set("category", value) + } + router.push(`${pathname}?${params.toString()}`, { scroll: false }) } return (
{categories.map(category=>(
handleChange(category.slug)} diff --git a/src/app/components/ProductCard.tsx b/src/app/components/ProductCard.tsx index 2babe772..56150b75 100644 --- a/src/app/components/ProductCard.tsx +++ b/src/app/components/ProductCard.tsx @@ -2,39 +2,94 @@ import Link from "next/link" import { ProductType } from "../types" import Image from "next/image" -import ProductList from "./ProductList" -const ProductCard = ({product}: {product: ProductType}) => { +import { ShoppingCart } from "lucide-react" +import { useState } from "react" +const ProductCard = ({ product }: { product: ProductType }) => { + const [producTypes, setProductTypes] = useState({ + size: product.sizes.split(",")[0].trim(), + color: product.color.split(",")[0].trim(), + }) + const handleProductType = ({type,value}: {type: "size" | "color",value: string}) => { + setProductTypes({...producTypes,[type]: value}) + } + + // Find the index of the selected color to get the corresponding image + const colors = product.color.split(",").map(c => c.trim()); + const selectedColorIndex = colors.indexOf(producTypes.color); + const imageIndex = selectedColorIndex >= 0 && selectedColorIndex < product.images.length + ? selectedColorIndex + : 0; + return (
- - {/* Product Image */} -
- {product.name} -
- - {/* Product Details */} -
-

{product.name}

-

{product.shortDescription}

+ + {/* Product Image */} +
+ {product.name} +
+ + + {/* Product Details */} +
+

{product.name}

+

{product.shortDescription}

- {/* Product Types */} -
- {/* Sizes */} -
- Size - + + {/* Product Types */} +
+ {/* Sizes and Colors Row */} +
+ {/* Sizes */} +
+ Size + +
+ + {/* Colors */} +
+ Color +
+ {product.color.split(",").slice(0, Math.min(product.images.length, 4)).map((color)=>( +
handleProductType({type: "color", value: color.trim()})} + className={`cursor-pointer rounded-full transition-all duration-200 ${ + producTypes.color === color.trim() ? "ring-1 ring-gray-800 ring-offset-1" : "" + }`} + > +
+
+ ))} +
+
+
+ + {/* Price and Add to Cart Button Row */} +
+

${product.price.toFixed(2)}

+ +
-
- {/* Colors */} -
-
-
) } -export default ProductCard \ No newline at end of file +export default ProductCard diff --git a/src/app/components/ProductList.tsx b/src/app/components/ProductList.tsx index 646733fe..df777042 100644 --- a/src/app/components/ProductList.tsx +++ b/src/app/components/ProductList.tsx @@ -11,7 +11,7 @@ import ProductCard from "./ProductCard" Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.", price: 100, sizes: "S, M, L, XL, XXL", - color: "Red, Blue, Green, Yellow", + color: "gray,orange, Green", images: [ "/products/1g.png", "/products/1gr.png", "/products/1p.png" ], }, @@ -23,7 +23,7 @@ import ProductCard from "./ProductCard" Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.", price: 200, sizes: "S, M, L, XL, XXL", - color: "Red, Blue, Green, Yellow", + color: "Green,Gray", images: [ "/products/2g.png", "/products/2gr.png" ], }, { @@ -96,6 +96,7 @@ const ProductList = () => { ))}
+
) } From 48973b3fc6747738d702f1ca2aaee7c66ae1a20a Mon Sep 17 00:00:00 2001 From: AlaSlimani99 Date: Tue, 16 Dec 2025 17:44:13 +0100 Subject: [PATCH 4/4] i came back --- package.json | 3 +- pnpm-lock.yaml | 13 ++ src/app/cart/page.tsx | 177 ++++++++++++++++++++++++ src/app/components/PaymentForm.tsx | 8 ++ src/app/components/ProductList.tsx | 39 ++++-- src/app/components/ShippingForm.tsx | 8 ++ src/app/components/ShoppingCartIcon.tsx | 12 ++ src/app/components/filter.tsx | 25 ++++ src/app/components/navbar.tsx | 3 +- src/app/layout.tsx | 2 +- src/app/page.tsx | 5 +- src/app/products/page.tsx | 13 ++ src/app/types.ts | 19 ++- 13 files changed, 312 insertions(+), 15 deletions(-) create mode 100644 src/app/cart/page.tsx create mode 100644 src/app/components/PaymentForm.tsx create mode 100644 src/app/components/ShippingForm.tsx create mode 100644 src/app/components/ShoppingCartIcon.tsx create mode 100644 src/app/components/filter.tsx create mode 100644 src/app/products/page.tsx diff --git a/package.json b/package.json index 70405fc9..d8b89a30 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "lucide-react": "^0.555.0", "next": "15.4.5", "react": "19.1.0", - "react-dom": "19.1.0" + "react-dom": "19.1.0", + "react-hook-form": "^7.68.0" }, "devDependencies": { "@eslint/eslintrc": "^3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ec94b522..02cc5f3f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ importers: react-dom: specifier: 19.1.0 version: 19.1.0(react@19.1.0) + react-hook-form: + specifier: ^7.68.0 + version: 7.68.0(react@19.1.0) devDependencies: '@eslint/eslintrc': specifier: ^3 @@ -1535,6 +1538,12 @@ packages: peerDependencies: react: ^19.1.0 + react-hook-form@7.68.0: + resolution: {integrity: sha512-oNN3fjrZ/Xo40SWlHf1yCjlMK417JxoSJVUXQjGdvdRCU07NTFei1i1f8ApUAts+IVh14e4EdakeLEA+BEAs/Q==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^16.8.0 || ^17 || ^18 || ^19 + react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} @@ -3386,6 +3395,10 @@ snapshots: react: 19.1.0 scheduler: 0.26.0 + react-hook-form@7.68.0(react@19.1.0): + dependencies: + react: 19.1.0 + react-is@16.13.1: {} react@19.1.0: {} diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx new file mode 100644 index 00000000..e1694007 --- /dev/null +++ b/src/app/cart/page.tsx @@ -0,0 +1,177 @@ +"use client" +import { CreditCard, MapPin, ShoppingCart, Trash } from "lucide-react" +import { CartItemType, CartType } from "../types"; +import { useSearchParams, useRouter } from "next/navigation" +import { ArrowRight } from "lucide-react" +import { useState } from "react" +import ShippingForm from "../components/ShippingForm"; +import PaymentForm from "../components/PaymentForm"; +import ProductCard from "../components/ProductCard"; +import Image from "next/image" +const steps = [ + { + id: 1, + title: "Cart", + icon: + }, + { + id: 2, + title: "Shipping Address", + icon: + }, + { + id: 3, + title: "Payment Method", + icon: + }]; +// Temporary Data +const CartItems: CartType=[ + { + id: 1, + name: "Addidas Core fit T-shirt", + shortDescription: "A comfortable and stylish t-shirt for everyday wear", + Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.", + price: 100, + sizes: "S, M, L, XL, XXL", + color: "gray,orange, Green", + quantity: 1, + selectedSize: "S", + selectedColor: "gray", + images: [ "/products/1g.png", "/products/1gr.png", "/products/1p.png" ], + }, + + { + id: 2, + name: "Nike Air Max 270", + shortDescription: "A comfortable and stylish t-shirt for everyday wear", + Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.", + price: 200, + sizes: "S, M, L, XL, XXL", + color: "Green,Gray", + quantity: 1, + selectedSize: "S", + selectedColor: "gray", + images: [ "/products/2g.png", "/products/2gr.png" ], + }, + { + id: 3, + name: "Puma RS-X 2.0", + shortDescription: "A comfortable and stylish t-shirt for everyday wear", + Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.", + price: 300, + sizes: "S, M, L, XL, XXL", + color: "Red, Blue, Green, Yellow", + quantity: 1, + selectedSize: "S", + selectedColor: "gray", + images: [ "/products/3b.png", "/products/3bl.png", "/products/3gr.png" ], + }, +]; +const CartPage = () => { + const SearchParams = useSearchParams() + const router = useRouter() + const activeStep = parseInt(SearchParams.get("step") || "1") + const [shippingForm, setShippingForm] = useState(null) + + return ( +
+

Your Shopping Cart

+ {/* Steps */} +
+ {steps.map((step)=>( +
+
{step.id}
+

{step.title}

+
+ ))} +
+ {/* Steps And Detatails */} +
+ {/* Steps*/} +
+ {activeStep === 1 ? ( +
+ {CartItems.map((item: CartItemType) => { + // Calculate image index based on selected color for each item + const colors = item.color.split(",").map(c => c.trim()); + const selectedColorIndex = colors.indexOf(item.selectedColor); + const imageIndex = selectedColorIndex >= 0 && selectedColorIndex < item.images.length + ? selectedColorIndex + : 0; + + return ( +
+ {/* Image and details */} +
+
+ {/* Image */} + {item.name} +
+ {/* Details */} +
+

{item.name}

+
+

Quantity:

+

{" "}{item.quantity}

+
+
+

Color:

+

{" "}{item.selectedColor}

+
+
+

Price:

+

{" "}${" "}{item.price.toFixed(2)}

+
+
+
+ {/* delete button */} + +
+ ); + })} +
+ ) : activeStep === 2 ? ( + + ) : activeStep === 3 ? ( + + ) : null} +
+ {/* Details*/} +
+

Cart Details

+
+

Subtotal

+

${CartItems.reduce((acc: number, item: { price: number; quantity: number; }) => acc + item.price * item.quantity, 0).toFixed(2)}

+
+
+

Discount(Code: 10% OFF)

+

-$10.00

+
+
+

Shipping Fee

+

$10.00

+
+
+
+

Total:

+

${CartItems.reduce((acc: number, item: { price: number; quantity: number; }) => acc + item.price * item.quantity, 0).toFixed(2)}

+
+ {activeStep === 1 && ( + + )} +
+
+
+ ); +}; +export default CartPage; \ No newline at end of file diff --git a/src/app/components/PaymentForm.tsx b/src/app/components/PaymentForm.tsx new file mode 100644 index 00000000..5d77e036 --- /dev/null +++ b/src/app/components/PaymentForm.tsx @@ -0,0 +1,8 @@ +const PaymentForm = () => { + return ( +
+

Payment Form

+
+ ) +} +export default PaymentForm \ No newline at end of file diff --git a/src/app/components/ProductList.tsx b/src/app/components/ProductList.tsx index df777042..c341c944 100644 --- a/src/app/components/ProductList.tsx +++ b/src/app/components/ProductList.tsx @@ -1,8 +1,9 @@ import { ProductsType } from "../types" import Categories from "./Categories" import ProductCard from "./ProductCard" - -//Temporary Data +import Link from "next/link" +import Filter from "./filter" +//Temporary Data const products: ProductsType = [ { id: 1, @@ -12,8 +13,10 @@ import ProductCard from "./ProductCard" price: 100, sizes: "S, M, L, XL, XXL", color: "gray,orange, Green", - - images: [ "/products/1g.png", "/products/1gr.png", "/products/1p.png" ], + quantity: 1, + selectedSize: "S", + selectedColor: "gray", + images: [ "/products/1g.png", "/products/1gr.png", "/products/1p.png" ], }, { @@ -24,6 +27,9 @@ import ProductCard from "./ProductCard" price: 200, sizes: "S, M, L, XL, XXL", color: "Green,Gray", + quantity: 1, + selectedSize: "S", + selectedColor: "gray", images: [ "/products/2g.png", "/products/2gr.png" ], }, { @@ -34,8 +40,10 @@ import ProductCard from "./ProductCard" price: 300, sizes: "S, M, L, XL, XXL", color: "Red, Blue, Green, Yellow", + quantity: 1, + selectedSize: "S", + selectedColor: "gray", images: [ "/products/3b.png", "/products/3bl.png", "/products/3gr.png" ], - }, { @@ -45,6 +53,9 @@ import ProductCard from "./ProductCard" Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.", sizes: "S, M, L, XL, XXL", color: "Red, Blue, Green, Yellow", + quantity: 1, + selectedSize: "S", + selectedColor: "gray", images: [ "/products/4p.png", "/products/4w.png" ], }, @@ -56,6 +67,9 @@ import ProductCard from "./ProductCard" Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.", sizes: "S, M, L, XL, XXL", color: "Red, Blue, Green, Yellow", + quantity: 1, + selectedSize: "S", + selectedColor: "gray", images: [ "/products/5bl.png", "/products/5o.png", "/products/5r.png" ], }, @@ -66,6 +80,9 @@ import ProductCard from "./ProductCard" Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.", sizes: "S, M, L, XL, XXL", color: "Red, Blue, Green, Yellow", + quantity: 1, + selectedSize: "S", + selectedColor: "gray", images: [ "/products/6g.png", "/products/6w.png" ], }, @@ -79,7 +96,10 @@ import ProductCard from "./ProductCard" Description: "This is a comfortable and stylish t-shirt for everyday wear. It is made of 100% cotton and is very soft and comfortable to wear. It is a great t-shirt for everyday wear.", sizes: "S, M, L, XL, XXL", color: "Red, Blue, Green, Yellow", - images: [ "/products/7g.png", "/products/7p.png" ], + quantity: 1, + selectedSize: "S", + selectedColor: "gray", + images: [ "/products/7g.png", "/products/7p.png" ], }, @@ -87,17 +107,18 @@ import ProductCard from "./ProductCard" ] -const ProductList = () => { +const ProductList = ({category,params}: {category?: string | null , params?: string}) => { return (
+ {params === "productsPage"&& }
{products.map((product) => ( ))}
- -
+ View All Products +
) } diff --git a/src/app/components/ShippingForm.tsx b/src/app/components/ShippingForm.tsx new file mode 100644 index 00000000..4a87a6ea --- /dev/null +++ b/src/app/components/ShippingForm.tsx @@ -0,0 +1,8 @@ +const ShippingForm = () => { + return ( +
+

Shipping Form

+
+ ) +} +export default ShippingForm \ No newline at end of file diff --git a/src/app/components/ShoppingCartIcon.tsx b/src/app/components/ShoppingCartIcon.tsx new file mode 100644 index 00000000..d1176647 --- /dev/null +++ b/src/app/components/ShoppingCartIcon.tsx @@ -0,0 +1,12 @@ +"use client" +import Link from "next/link" +import { ShoppingCart } from "lucide-react" +const ShoppingCartIcon = () => { + return ( + + + 0 + + ) +} +export default ShoppingCartIcon \ No newline at end of file diff --git a/src/app/components/filter.tsx b/src/app/components/filter.tsx new file mode 100644 index 00000000..8d8c0b68 --- /dev/null +++ b/src/app/components/filter.tsx @@ -0,0 +1,25 @@ +"use client" +import { usePathname, useRouter, useSearchParams } from "next/navigation" +const Filter = () => { + const searchParams = useSearchParams() + const router = useRouter() + const pathname = usePathname() + {/* we have to create a new search params , and set a new key and push the url to the nextjs router */} + const handleFilter = (value: string) => { + const params =new URLSearchParams(searchParams) + params.set("category", value ); + router.push(`${pathname}?${params.toString()}`, { scroll: false }) + } + return ( +
+ Sorted by: + +
+ ) +} +export default Filter \ No newline at end of file diff --git a/src/app/components/navbar.tsx b/src/app/components/navbar.tsx index 7ea37a4a..53cfd11f 100644 --- a/src/app/components/navbar.tsx +++ b/src/app/components/navbar.tsx @@ -3,6 +3,7 @@ import Image from "next/image" import logo from "@/public/logo.png" import Searchbar from "./searchbar" import { Bell, ShoppingCart, Home } from "lucide-react" +import ShoppingCartIcon from "./ShoppingCartIcon" const Navbar = () => { return (