diff options
Diffstat (limited to 'frontend/src/components/header.tsx')
| -rw-r--r-- | frontend/src/components/header.tsx | 287 |
1 files changed, 287 insertions, 0 deletions
diff --git a/frontend/src/components/header.tsx b/frontend/src/components/header.tsx new file mode 100644 index 0000000..d64061a --- /dev/null +++ b/frontend/src/components/header.tsx @@ -0,0 +1,287 @@ +"use client"; + +import { useState } from "react"; +import Link from "next/link"; +import Image from "next/image"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Badge } from "@/components/ui/badge"; +import { + NavigationMenu, + NavigationMenuContent, + NavigationMenuItem, + NavigationMenuLink, + NavigationMenuList, + NavigationMenuTrigger, +} from "@/components/ui/navigation-menu"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"; +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { + Search, + ShoppingBag, + Heart, + User, + Menu, + Phone, + Mail, + Truck, + RefreshCw, + Shield, + Globe, +} from "lucide-react"; + +export function Header() { + const [cartItems] = useState(3); + const [wishlistItems] = useState(5); + + const categories = [ + { + title: "Women", + items: [ + { name: "Dresses", href: "/women/dresses" }, + { name: "Tops & Blouses", href: "/women/tops" }, + { name: "Pants & Jeans", href: "/women/pants" }, + { name: "Outerwear", href: "/women/outerwear" }, + { name: "Accessories", href: "/women/accessories" }, + ], + }, + { + title: "Men", + items: [ + { name: "T-Shirts", href: "/men/tshirts" }, + { name: "Shirts", href: "/men/shirts" }, + { name: "Pants & Jeans", href: "/men/pants" }, + { name: "Jackets", href: "/men/jackets" }, + { name: "Accessories", href: "/men/accessories" }, + ], + }, + { + title: "Kids", + items: [ + { name: "Boys", href: "/kids/boys" }, + { name: "Girls", href: "/kids/girls" }, + { name: "Baby", href: "/kids/baby" }, + { name: "Shoes", href: "/kids/shoes" }, + ], + }, + ]; + + return ( + <header className="sticky top-0 z-50 w-full bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"> + {/* Top banner */} + <div className="bg-black text-white text-center py-2 px-4"> + <p className="text-sm font-medium"> + FREE SHIPPING ON ORDERS OVER $100 β’ NEW ARRIVALS EVERY WEEK + </p> + </div> + + {/* Announcement bar */} + <div className="bg-neutral-100 text-center py-2 px-4"> + <p className="text-sm"> + π₯ <span className="font-semibold">WINTER SALE</span> - Up to 50% off on selected items + </p> + </div> + + {/* Main header */} + <div className="border-b"> + <div className="container mx-auto px-4"> + <div className="flex h-16 items-center justify-between"> + {/* Mobile menu */} + <Sheet> + <SheetTrigger asChild> + <Button variant="ghost" size="icon" className="md:hidden"> + <Menu className="h-5 w-5" /> + </Button> + </SheetTrigger> + <SheetContent side="left" className="w-[300px] sm:w-[400px]"> + <SheetHeader> + <SheetTitle>Menu</SheetTitle> + </SheetHeader> + <nav className="mt-6 space-y-4"> + {categories.map((category) => ( + <div key={category.title} className="space-y-2"> + <h3 className="font-semibold">{category.title}</h3> + <div className="ml-4 space-y-1"> + {category.items.map((item) => ( + <Link + key={item.name} + href={item.href} + className="block py-1 text-sm text-muted-foreground hover:text-foreground" + > + {item.name} + </Link> + ))} + </div> + </div> + ))} + </nav> + </SheetContent> + </Sheet> + + {/* Logo */} + <div className="flex items-center"> + <Link href="/" className="flex items-center space-x-2"> + <Image + src="/black-logo.png" + alt="blcklst" + width={120} + height={40} + className="h-8 w-auto" + priority + /> + </Link> + </div> + + {/* Desktop Navigation */} + <NavigationMenu className="hidden md:flex"> + <NavigationMenuList> + {categories.map((category) => ( + <NavigationMenuItem key={category.title}> + <NavigationMenuTrigger className="font-medium"> + {category.title} + </NavigationMenuTrigger> + <NavigationMenuContent> + <div className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]"> + {category.items.map((item) => ( + <NavigationMenuLink key={item.name} asChild> + <Link + href={item.href} + className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" + > + <div className="text-sm font-medium leading-none">{item.name}</div> + </Link> + </NavigationMenuLink> + ))} + </div> + </NavigationMenuContent> + </NavigationMenuItem> + ))} + <NavigationMenuItem> + <NavigationMenuLink asChild> + <Link href="/sale" className="font-medium text-red-600 hover:text-red-700"> + Sale + </Link> + </NavigationMenuLink> + </NavigationMenuItem> + </NavigationMenuList> + </NavigationMenu> + + {/* Search Bar */} + <div className="hidden lg:flex flex-1 max-w-sm mx-8"> + <div className="relative w-full"> + <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" /> + <Input + placeholder="Search products..." + className="pl-10 pr-4" + /> + </div> + </div> + + {/* Action buttons */} + <div className="flex items-center space-x-2"> + {/* Search icon for mobile */} + <Button variant="ghost" size="icon" className="lg:hidden"> + <Search className="h-5 w-5" /> + </Button> + + {/* User menu */} + <DropdownMenu> + <DropdownMenuTrigger asChild> + <Button variant="ghost" size="icon"> + <User className="h-5 w-5" /> + </Button> + </DropdownMenuTrigger> + <DropdownMenuContent align="end" className="w-56"> + <DropdownMenuItem> + <User className="mr-2 h-4 w-4" /> + My Account + </DropdownMenuItem> + <DropdownMenuItem> + <Truck className="mr-2 h-4 w-4" /> + Orders + </DropdownMenuItem> + <DropdownMenuItem> + <Heart className="mr-2 h-4 w-4" /> + Wishlist + </DropdownMenuItem> + <DropdownMenuSeparator /> + <DropdownMenuItem> + Sign In + </DropdownMenuItem> + <DropdownMenuItem> + Create Account + </DropdownMenuItem> + </DropdownMenuContent> + </DropdownMenu> + + {/* Wishlist */} + <Button variant="ghost" size="icon" className="relative"> + <Heart className="h-5 w-5" /> + {wishlistItems > 0 && ( + <Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 text-xs"> + {wishlistItems} + </Badge> + )} + </Button> + + {/* Cart */} + <Button variant="ghost" size="icon" className="relative"> + <ShoppingBag className="h-5 w-5" /> + {cartItems > 0 && ( + <Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 text-xs"> + {cartItems} + </Badge> + )} + </Button> + + {/* Language/Currency */} + <DropdownMenu> + <DropdownMenuTrigger asChild> + <Button variant="ghost" size="icon"> + <Globe className="h-5 w-5" /> + </Button> + </DropdownMenuTrigger> + <DropdownMenuContent align="end"> + <DropdownMenuItem>πΊπΈ USD</DropdownMenuItem> + <DropdownMenuItem>πͺπΊ EUR</DropdownMenuItem> + <DropdownMenuItem>π¬π§ GBP</DropdownMenuItem> + </DropdownMenuContent> + </DropdownMenu> + </div> + </div> + </div> + </div> + + {/* Service features */} + <div className="hidden md:block border-b bg-neutral-50"> + <div className="container mx-auto px-4"> + <div className="grid grid-cols-4 gap-4 py-2 text-xs text-muted-foreground"> + <div className="flex items-center justify-center space-x-1"> + <Truck className="h-3 w-3" /> + <span>Free Shipping</span> + </div> + <div className="flex items-center justify-center space-x-1"> + <RefreshCw className="h-3 w-3" /> + <span>30-Day Returns</span> + </div> + <div className="flex items-center justify-center space-x-1"> + <Shield className="h-3 w-3" /> + <span>Secure Payment</span> + </div> + <div className="flex items-center justify-center space-x-1"> + <Phone className="h-3 w-3" /> + <span>24/7 Support</span> + </div> + </div> + </div> + </div> + </header> + ); +}
\ No newline at end of file |