diff options
Diffstat (limited to 'frontend/src')
25 files changed, 2640 insertions, 0 deletions
diff --git a/frontend/src/app/favicon.ico b/frontend/src/app/favicon.ico Binary files differnew file mode 100644 index 0000000..718d6fe --- /dev/null +++ b/frontend/src/app/favicon.ico diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css new file mode 100644 index 0000000..92fb855 --- /dev/null +++ b/frontend/src/app/globals.css @@ -0,0 +1,122 @@ +@import "tailwindcss"; +@import "tw-animate-css"; + +@custom-variant dark (&:is(.dark *)); + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; + --font-mono: ui-monospace, "SFMono-Regular", "Consolas", monospace; + --color-sidebar-ring: var(--sidebar-ring); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar: var(--sidebar); + --color-chart-5: var(--chart-5); + --color-chart-4: var(--chart-4); + --color-chart-3: var(--chart-3); + --color-chart-2: var(--chart-2); + --color-chart-1: var(--chart-1); + --color-ring: var(--ring); + --color-input: var(--input); + --color-border: var(--border); + --color-destructive: var(--destructive); + --color-accent-foreground: var(--accent-foreground); + --color-accent: var(--accent); + --color-muted-foreground: var(--muted-foreground); + --color-muted: var(--muted); + --color-secondary-foreground: var(--secondary-foreground); + --color-secondary: var(--secondary); + --color-primary-foreground: var(--primary-foreground); + --color-primary: var(--primary); + --color-popover-foreground: var(--popover-foreground); + --color-popover: var(--popover); + --color-card-foreground: var(--card-foreground); + --color-card: var(--card); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); +} + +:root { + --radius: 0.625rem; + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); +} + +.dark { + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.205 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.205 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.922 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.556 0 0); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.556 0 0); +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx new file mode 100644 index 0000000..50bb899 --- /dev/null +++ b/frontend/src/app/layout.tsx @@ -0,0 +1,29 @@ +import type { Metadata } from "next"; +import "./globals.css"; +import { Toaster } from "@/components/ui/sonner"; + +export const metadata: Metadata = { + title: "blcklst - Modern Fashion Brand", + description: "not everyone gets blcklsted - discover carefully curated fashion pieces that define modern elegance.", +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + <html lang="en"> + <head> + <link + href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" + rel="stylesheet" + /> + </head> + <body className="font-sans antialiased"> + {children} + <Toaster /> + </body> + </html> + ); +} diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx new file mode 100644 index 0000000..7a9bea6 --- /dev/null +++ b/frontend/src/app/page.tsx @@ -0,0 +1,154 @@ +import { Header } from "@/components/header"; +import { HeroSection } from "@/components/hero-section"; +import { ProductCard } from "@/components/product-card"; +import { Footer } from "@/components/footer"; + +export default function Home() { + // Sample product data for demonstration + const featuredProducts = [ + { + id: "1", + name: "Premium Cotton T-Shirt", + price: 29.99, + originalPrice: 39.99, + image: "/api/placeholder/400/500", + rating: 4.8, + reviewCount: 124, + isNew: true, + isSale: true, + category: "Men's Clothing", + colors: ["#000000", "#FFFFFF", "#808080", "#000080"], + sizes: ["S", "M", "L", "XL"], + }, + { + id: "2", + name: "Elegant Summer Dress", + price: 89.99, + originalPrice: 119.99, + image: "/api/placeholder/400/500", + rating: 4.9, + reviewCount: 89, + isSale: true, + category: "Women's Clothing", + colors: ["#FF69B4", "#000000", "#800080"], + sizes: ["XS", "S", "M", "L"], + }, + { + id: "3", + name: "Classic Denim Jacket", + price: 79.99, + image: "/api/placeholder/400/500", + rating: 4.7, + reviewCount: 156, + isNew: true, + category: "Outerwear", + colors: ["#4169E1", "#000000", "#708090"], + sizes: ["S", "M", "L", "XL", "XXL"], + }, + { + id: "4", + name: "Comfortable Sneakers", + price: 99.99, + originalPrice: 129.99, + image: "/api/placeholder/400/500", + rating: 4.6, + reviewCount: 203, + isSale: true, + category: "Footwear", + colors: ["#FFFFFF", "#000000", "#FF0000"], + sizes: ["7", "8", "9", "10", "11", "12"], + }, + { + id: "5", + name: "Cozy Winter Sweater", + price: 69.99, + image: "/api/placeholder/400/500", + rating: 4.8, + reviewCount: 78, + isNew: true, + category: "Knitwear", + colors: ["#8B4513", "#000000", "#008000", "#800080"], + sizes: ["S", "M", "L", "XL"], + }, + { + id: "6", + name: "Stylish Crossbody Bag", + price: 45.99, + originalPrice: 59.99, + image: "/api/placeholder/400/500", + rating: 4.5, + reviewCount: 92, + isSale: true, + category: "Accessories", + colors: ["#000000", "#8B4513", "#800080"], + sizes: ["One Size"], + }, + ]; + + return ( + <div className="min-h-screen bg-background"> + <Header /> + + <main> + <HeroSection /> + + {/* Featured Products Section */} + <section className="py-16 bg-white"> + <div className="container mx-auto px-4"> + <div className="text-center mb-12"> + <h2 className="text-3xl font-bold mb-4">Featured Products</h2> + <p className="text-muted-foreground max-w-2xl mx-auto"> + Discover our handpicked selection of trending items that our customers love most. + </p> + </div> + + <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> + {featuredProducts.map((product) => ( + <ProductCard key={product.id} {...product} /> + ))} + </div> + + <div className="text-center mt-12"> + <button className="bg-primary text-primary-foreground px-8 py-3 rounded-lg font-medium hover:bg-primary/90 transition-colors"> + View All Products + </button> + </div> + </div> + </section> + + {/* Categories Section */} + <section className="py-16 bg-neutral-50"> + <div className="container mx-auto px-4"> + <div className="text-center mb-12"> + <h2 className="text-3xl font-bold mb-4">Shop by Category</h2> + <p className="text-muted-foreground"> + Explore our diverse range of fashion categories + </p> + </div> + + <div className="grid grid-cols-1 md:grid-cols-3 gap-6"> + {[ + { name: "Women", image: "/api/placeholder/600/400", count: "2,345+ items" }, + { name: "Men", image: "/api/placeholder/600/400", count: "1,892+ items" }, + { name: "Kids", image: "/api/placeholder/600/400", count: "756+ items" }, + ].map((category) => ( + <div + key={category.name} + className="relative group cursor-pointer overflow-hidden rounded-lg bg-gradient-to-br from-neutral-200 to-neutral-300 aspect-[4/3]" + > + <div className="absolute inset-0 bg-black/20 group-hover:bg-black/30 transition-colors" /> + <div className="absolute inset-0 flex flex-col justify-end p-6 text-white"> + <h3 className="text-2xl font-bold mb-1">{category.name}</h3> + <p className="text-sm opacity-90">{category.count}</p> + </div> + </div> + ))} + </div> + </div> + </section> + </main> + + <Footer /> + </div> + ); +} diff --git a/frontend/src/components/footer.tsx b/frontend/src/components/footer.tsx new file mode 100644 index 0000000..d7c8ae7 --- /dev/null +++ b/frontend/src/components/footer.tsx @@ -0,0 +1,267 @@ +import Link from "next/link"; +import Image from "next/image"; +import { Input } from "@/components/ui/input"; +import { Button } from "@/components/ui/button"; +import { Separator } from "@/components/ui/separator"; +import { + Facebook, + Instagram, + Twitter, + Youtube, + Mail, + Phone, + MapPin, + CreditCard, + Shield, + Truck, + RefreshCw, +} from "lucide-react"; + +export function Footer() { + const currentYear = new Date().getFullYear(); + + const footerLinks = { + shop: [ + { name: "Women", href: "/women" }, + { name: "Men", href: "/men" }, + { name: "Kids", href: "/kids" }, + { name: "Sale", href: "/sale" }, + { name: "New Arrivals", href: "/new-arrivals" }, + { name: "Best Sellers", href: "/best-sellers" }, + ], + company: [ + { name: "About Us", href: "/about" }, + { name: "Careers", href: "/careers" }, + { name: "Press", href: "/press" }, + { name: "Sustainability", href: "/sustainability" }, + { name: "Store Locator", href: "/stores" }, + ], + help: [ + { name: "Customer Service", href: "/customer-service" }, + { name: "Size Guide", href: "/size-guide" }, + { name: "Shipping & Returns", href: "/shipping-returns" }, + { name: "Track Your Order", href: "/track-order" }, + { name: "FAQ", href: "/faq" }, + { name: "Contact Us", href: "/contact" }, + ], + legal: [ + { name: "Privacy Policy", href: "/privacy" }, + { name: "Terms of Service", href: "/terms" }, + { name: "Cookie Policy", href: "/cookies" }, + { name: "Accessibility", href: "/accessibility" }, + ], + }; + + return ( + <footer className="bg-neutral-50 border-t"> + {/* Newsletter Section */} + <div className="bg-black text-white"> + <div className="container mx-auto px-4 py-12"> + <div className="max-w-2xl mx-auto text-center"> + <h2 className="text-2xl font-bold mb-4">Stay in the loop</h2> + <p className="text-neutral-300 mb-6"> + Subscribe to our newsletter and be the first to know about new arrivals, sales, and exclusive offers. + </p> + <div className="flex max-w-md mx-auto gap-3"> + <Input + placeholder="Enter your email" + className="bg-white text-black placeholder:text-gray-500" + /> + <Button variant="secondary" className="px-8"> + Subscribe + </Button> + </div> + <p className="text-xs text-neutral-400 mt-3"> + By subscribing, you agree to our Privacy Policy and Terms of Service. + </p> + </div> + </div> + </div> + + {/* Main Footer Content */} + <div className="container mx-auto px-4 py-12"> + <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8"> + {/* Brand Info */} + <div className="lg:col-span-2"> + <Link href="/" className="flex items-center space-x-2 mb-4"> + <Image + src="/black-logo.png" + alt="blcklst" + width={140} + height={45} + className="h-8 w-auto" + /> + </Link> + <p className="text-muted-foreground mb-6 max-w-md"> + not everyone gets blcklsted - discover carefully curated fashion pieces that define modern elegance and exclusivity. + </p> + + {/* Contact Info */} + <div className="space-y-3 mb-6"> + <div className="flex items-center space-x-3 text-sm"> + <Phone className="h-4 w-4 text-muted-foreground" /> + <span>+1 (555) 123-4567</span> + </div> + <div className="flex items-center space-x-3 text-sm"> + <Mail className="h-4 w-4 text-muted-foreground" /> + <span>[email protected]</span> + </div> + <div className="flex items-center space-x-3 text-sm"> + <MapPin className="h-4 w-4 text-muted-foreground" /> + <span>123 Fashion St, New York, NY 10001</span> + </div> + </div> + + {/* Social Media */} + <div className="flex space-x-4"> + <Link href="#" className="text-muted-foreground hover:text-foreground"> + <Facebook className="h-5 w-5" /> + </Link> + <Link href="#" className="text-muted-foreground hover:text-foreground"> + <Instagram className="h-5 w-5" /> + </Link> + <Link href="#" className="text-muted-foreground hover:text-foreground"> + <Twitter className="h-5 w-5" /> + </Link> + <Link href="#" className="text-muted-foreground hover:text-foreground"> + <Youtube className="h-5 w-5" /> + </Link> + </div> + </div> + + {/* Shop Links */} + <div> + <h3 className="font-semibold mb-4">Shop</h3> + <ul className="space-y-3"> + {footerLinks.shop.map((link) => ( + <li key={link.name}> + <Link + href={link.href} + className="text-sm text-muted-foreground hover:text-foreground transition-colors" + > + {link.name} + </Link> + </li> + ))} + </ul> + </div> + + {/* Company Links */} + <div> + <h3 className="font-semibold mb-4">Company</h3> + <ul className="space-y-3"> + {footerLinks.company.map((link) => ( + <li key={link.name}> + <Link + href={link.href} + className="text-sm text-muted-foreground hover:text-foreground transition-colors" + > + {link.name} + </Link> + </li> + ))} + </ul> + </div> + + {/* Help Links */} + <div> + <h3 className="font-semibold mb-4">Help</h3> + <ul className="space-y-3"> + {footerLinks.help.map((link) => ( + <li key={link.name}> + <Link + href={link.href} + className="text-sm text-muted-foreground hover:text-foreground transition-colors" + > + {link.name} + </Link> + </li> + ))} + </ul> + </div> + </div> + + {/* Features Section */} + <div className="mt-12 pt-8 border-t"> + <div className="grid grid-cols-1 md:grid-cols-4 gap-6"> + <div className="flex items-center space-x-3"> + <div className="bg-primary/10 p-2 rounded-full"> + <Truck className="h-5 w-5 text-primary" /> + </div> + <div> + <h4 className="font-medium text-sm">Free Shipping</h4> + <p className="text-xs text-muted-foreground">On orders over $100</p> + </div> + </div> + <div className="flex items-center space-x-3"> + <div className="bg-primary/10 p-2 rounded-full"> + <RefreshCw className="h-5 w-5 text-primary" /> + </div> + <div> + <h4 className="font-medium text-sm">Easy Returns</h4> + <p className="text-xs text-muted-foreground">30-day return policy</p> + </div> + </div> + <div className="flex items-center space-x-3"> + <div className="bg-primary/10 p-2 rounded-full"> + <Shield className="h-5 w-5 text-primary" /> + </div> + <div> + <h4 className="font-medium text-sm">Secure Payment</h4> + <p className="text-xs text-muted-foreground">SSL encrypted checkout</p> + </div> + </div> + <div className="flex items-center space-x-3"> + <div className="bg-primary/10 p-2 rounded-full"> + <CreditCard className="h-5 w-5 text-primary" /> + </div> + <div> + <h4 className="font-medium text-sm">Multiple Payment</h4> + <p className="text-xs text-muted-foreground">Cards, PayPal & more</p> + </div> + </div> + </div> + </div> + </div> + + {/* Bottom Footer */} + <div className="border-t bg-neutral-100"> + <div className="container mx-auto px-4 py-6"> + <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0"> + <div className="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-6"> + <p className="text-sm text-muted-foreground"> + © {currentYear} blcklst. All rights reserved. + </p> + <div className="flex space-x-4"> + {footerLinks.legal.map((link) => ( + <Link + key={link.name} + href={link.href} + className="text-xs text-muted-foreground hover:text-foreground" + > + {link.name} + </Link> + ))} + </div> + </div> + + {/* Payment Methods */} + <div className="flex items-center space-x-2"> + <span className="text-xs text-muted-foreground mr-2">We accept:</span> + <div className="flex space-x-1"> + {["Visa", "Mastercard", "AmEx", "PayPal", "Apple Pay"].map((method) => ( + <div + key={method} + className="bg-white border rounded px-2 py-1 text-xs font-medium" + > + {method} + </div> + ))} + </div> + </div> + </div> + </div> + </div> + </footer> + ); +}
\ No newline at end of file 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 diff --git a/frontend/src/components/hero-section.tsx b/frontend/src/components/hero-section.tsx new file mode 100644 index 0000000..2450365 --- /dev/null +++ b/frontend/src/components/hero-section.tsx @@ -0,0 +1,163 @@ +"use client"; + +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import { ArrowRight, Star, Sparkles } from "lucide-react"; +import Link from "next/link"; + +export function HeroSection() { + return ( + <section className="relative overflow-hidden bg-gradient-to-br from-neutral-50 via-white to-neutral-100"> + {/* Background decoration */} + <div className="absolute inset-0 bg-grid-pattern opacity-5"></div> + <div className="absolute top-20 right-20 w-72 h-72 bg-primary/5 rounded-full blur-3xl"></div> + <div className="absolute bottom-20 left-20 w-96 h-96 bg-secondary/5 rounded-full blur-3xl"></div> + + <div className="container mx-auto px-4 py-20 lg:py-32"> + <div className="grid lg:grid-cols-2 gap-12 items-center"> + {/* Left side - Content */} + <div className="space-y-8"> + {/* Badge */} + <div className="flex items-center space-x-2"> + <Badge variant="secondary" className="px-3 py-1 text-sm font-medium"> + <Sparkles className="w-3 h-3 mr-1" /> + New Winter Collection + </Badge> + <Badge variant="outline" className="px-3 py-1 text-sm"> + Limited Time + </Badge> + </div> + + {/* Main heading */} + <div className="space-y-4"> + <h1 className="text-4xl lg:text-6xl font-bold leading-tight"> + Curated + <span className="block text-primary">Exclusives</span> + </h1> + <p className="text-lg lg:text-xl text-muted-foreground max-w-lg"> + not everyone gets blcklsted. Discover carefully curated fashion pieces that define modern elegance and exclusivity. + </p> + </div> + + {/* Features */} + <div className="flex flex-wrap gap-6 text-sm"> + <div className="flex items-center space-x-2"> + <div className="w-2 h-2 bg-green-500 rounded-full"></div> + <span>Free shipping worldwide</span> + </div> + <div className="flex items-center space-x-2"> + <div className="w-2 h-2 bg-blue-500 rounded-full"></div> + <span>30-day easy returns</span> + </div> + <div className="flex items-center space-x-2"> + <div className="w-2 h-2 bg-purple-500 rounded-full"></div> + <span>Sustainable materials</span> + </div> + </div> + + {/* CTA Buttons */} + <div className="flex flex-col sm:flex-row gap-4"> + <Button asChild size="lg" className="text-base px-8"> + <Link href="/shop"> + Shop Now + <ArrowRight className="ml-2 h-4 w-4" /> + </Link> + </Button> + <Button variant="outline" size="lg" className="text-base px-8" asChild> + <Link href="/collections"> + View Collections + </Link> + </Button> + </div> + + {/* Social proof */} + <div className="flex items-center space-x-6 pt-4"> + <div className="flex items-center space-x-1"> + <div className="flex"> + {[1, 2, 3, 4, 5].map((star) => ( + <Star key={star} className="w-4 h-4 fill-yellow-400 text-yellow-400" /> + ))} + </div> + <span className="text-sm font-medium">4.9/5</span> + </div> + <div className="text-sm text-muted-foreground"> + Trusted by <span className="font-semibold text-foreground">50,000+</span> customers + </div> + </div> + </div> + + {/* Right side - Product showcase */} + <div className="relative"> + {/* Main product image */} + <div className="relative bg-gradient-to-br from-neutral-100 to-neutral-200 rounded-2xl p-8 lg:p-12"> + <div className="aspect-[3/4] bg-gradient-to-br from-neutral-300 to-neutral-400 rounded-xl flex items-center justify-center"> + <div className="text-center text-neutral-600"> + <div className="w-16 h-16 bg-neutral-500 rounded-full mx-auto mb-4 flex items-center justify-center"> + <Sparkles className="w-8 h-8 text-white" /> + </div> + <p className="font-medium">Featured Product</p> + <p className="text-sm">Premium Winter Coat</p> + </div> + </div> + + {/* Price tag */} + <div className="absolute -top-4 -right-4 bg-red-500 text-white px-4 py-2 rounded-full shadow-lg"> + <span className="text-sm font-bold">50% OFF</span> + </div> + </div> + + {/* Floating product cards */} + <div className="absolute -left-6 top-1/4 bg-white rounded-lg shadow-lg p-4 max-w-[200px] border"> + <div className="flex items-center space-x-3"> + <div className="w-12 h-12 bg-gradient-to-br from-pink-100 to-pink-200 rounded-lg"></div> + <div> + <p className="font-medium text-sm">Summer Dress</p> + <p className="text-xs text-muted-foreground">$89.99</p> + <div className="flex items-center space-x-1 mt-1"> + <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" /> + <span className="text-xs">4.8</span> + </div> + </div> + </div> + </div> + + <div className="absolute -right-8 bottom-1/4 bg-white rounded-lg shadow-lg p-4 max-w-[200px] border"> + <div className="flex items-center space-x-3"> + <div className="w-12 h-12 bg-gradient-to-br from-blue-100 to-blue-200 rounded-lg"></div> + <div> + <p className="font-medium text-sm">Casual Sneakers</p> + <p className="text-xs text-muted-foreground">$129.99</p> + <div className="flex items-center space-x-1 mt-1"> + <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" /> + <span className="text-xs">4.9</span> + </div> + </div> + </div> + </div> + + {/* Stats bubble */} + <div className="absolute top-8 -left-4 bg-primary text-primary-foreground rounded-3xl px-6 py-3 shadow-lg"> + <div className="text-center"> + <p className="text-xs font-medium">This Week</p> + <p className="text-lg font-bold">2.5K+</p> + <p className="text-xs">Orders</p> + </div> + </div> + </div> + </div> + </div> + + {/* Bottom wave */} + <div className="absolute bottom-0 left-0 right-0"> + <svg + className="w-full h-12 fill-white" + viewBox="0 0 1200 120" + preserveAspectRatio="none" + > + <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" + /> + </svg> + </div> + </section> + ); +}
\ No newline at end of file diff --git a/frontend/src/components/product-card.tsx b/frontend/src/components/product-card.tsx new file mode 100644 index 0000000..f790c98 --- /dev/null +++ b/frontend/src/components/product-card.tsx @@ -0,0 +1,251 @@ +"use client"; + +import { useState } from "react"; +import Link from "next/link"; +import { Card, CardContent } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import { Heart, Eye, ShoppingBag, Star } from "lucide-react"; + +interface ProductCardProps { + id: string; + name: string; + price: number; + originalPrice?: number; + image: string; + images?: string[]; + rating: number; + reviewCount: number; + isNew?: boolean; + isSale?: boolean; + isWishlisted?: boolean; + category: string; + colors?: string[]; + sizes?: string[]; +} + +export function ProductCard({ + id, + name, + price, + originalPrice, + image, + images = [], + rating, + reviewCount, + isNew = false, + isSale = false, + isWishlisted = false, + category, + colors = [], + sizes = [], +}: ProductCardProps) { + const [currentImage, setCurrentImage] = useState(0); + const [isHovered, setIsHovered] = useState(false); + const [wishlisted, setWishlisted] = useState(isWishlisted); + + const allImages = [image, ...images]; + const discountPercentage = originalPrice + ? Math.round(((originalPrice - price) / originalPrice) * 100) + : 0; + + const handleWishlistToggle = (e: React.MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + setWishlisted(!wishlisted); + }; + + const handleQuickView = (e: React.MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + // TODO: Implement quick view modal + console.log("Quick view for product:", id); + }; + + const handleAddToCart = (e: React.MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + // TODO: Implement add to cart + console.log("Add to cart:", id); + }; + + return ( + <Card + className="group relative overflow-hidden border-0 shadow-sm hover:shadow-xl transition-all duration-300 cursor-pointer" + onMouseEnter={() => setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > + <Link href={`/product/${id}`}> + <div className="relative overflow-hidden"> + {/* Product Image */} + <div className="aspect-[3/4] bg-neutral-100 relative overflow-hidden"> + <div + className="w-full h-full bg-gradient-to-br from-neutral-200 to-neutral-300 flex items-center justify-center transition-transform duration-300 group-hover:scale-105" + style={{ + backgroundImage: `url(${allImages[currentImage]})`, + backgroundSize: 'cover', + backgroundPosition: 'center', + }} + > + {/* Placeholder for actual images */} + <div className="text-center text-neutral-500"> + <div className="w-16 h-16 bg-neutral-400 rounded-full mx-auto mb-2 flex items-center justify-center"> + <ShoppingBag className="w-8 h-8 text-white" /> + </div> + <p className="text-sm font-medium">{name}</p> + </div> + </div> + + {/* Badges */} + <div className="absolute top-3 left-3 flex flex-col gap-2"> + {isNew && ( + <Badge className="bg-blue-500 hover:bg-blue-600 text-white"> + New + </Badge> + )} + {isSale && ( + <Badge className="bg-red-500 hover:bg-red-600 text-white"> + -{discountPercentage}% + </Badge> + )} + </div> + + {/* Wishlist Button */} + <Button + variant="ghost" + size="icon" + className="absolute top-3 right-3 bg-white/80 hover:bg-white text-gray-600 hover:text-red-500 transition-colors" + onClick={handleWishlistToggle} + > + <Heart + className={`h-4 w-4 ${wishlisted ? 'fill-red-500 text-red-500' : ''}`} + /> + </Button> + + {/* Image dots for multiple images */} + {allImages.length > 1 && ( + <div className="absolute bottom-3 left-1/2 transform -translate-x-1/2 flex gap-1"> + {allImages.map((_, index) => ( + <button + key={index} + className={`w-2 h-2 rounded-full transition-colors ${ + index === currentImage ? 'bg-white' : 'bg-white/50' + }`} + onClick={(e) => { + e.preventDefault(); + e.stopPropagation(); + setCurrentImage(index); + }} + /> + ))} + </div> + )} + + {/* Hover overlay with actions */} + <div className={`absolute inset-0 bg-black/20 flex items-center justify-center transition-opacity duration-300 ${ + isHovered ? 'opacity-100' : 'opacity-0' + }`}> + <div className="flex gap-3"> + <Button + variant="secondary" + size="sm" + onClick={handleQuickView} + className="bg-white/90 hover:bg-white text-gray-900" + > + <Eye className="h-4 w-4 mr-2" /> + Quick View + </Button> + <Button + size="sm" + onClick={handleAddToCart} + className="bg-primary hover:bg-primary/90" + > + <ShoppingBag className="h-4 w-4 mr-2" /> + Add to Cart + </Button> + </div> + </div> + </div> + + {/* Product Info */} + <CardContent className="p-4 space-y-3"> + {/* Category */} + <p className="text-xs text-muted-foreground uppercase tracking-wide"> + {category} + </p> + + {/* Product Name */} + <h3 className="font-semibold text-sm leading-tight line-clamp-2 group-hover:text-primary transition-colors"> + {name} + </h3> + + {/* Rating */} + <div className="flex items-center gap-2"> + <div className="flex items-center"> + {[1, 2, 3, 4, 5].map((star) => ( + <Star + key={star} + className={`h-3 w-3 ${ + star <= rating + ? 'fill-yellow-400 text-yellow-400' + : 'text-gray-300' + }`} + /> + ))} + </div> + <span className="text-xs text-muted-foreground"> + ({reviewCount}) + </span> + </div> + + {/* Colors */} + {colors.length > 0 && ( + <div className="flex items-center gap-1"> + {colors.slice(0, 4).map((color, index) => ( + <div + key={index} + className="w-4 h-4 rounded-full border border-gray-300" + style={{ backgroundColor: color }} + /> + ))} + {colors.length > 4 && ( + <span className="text-xs text-muted-foreground ml-1"> + +{colors.length - 4} + </span> + )} + </div> + )} + + {/* Price */} + <div className="flex items-center gap-2"> + <span className="font-bold text-lg"> + ${price.toFixed(2)} + </span> + {originalPrice && ( + <span className="text-sm text-muted-foreground line-through"> + ${originalPrice.toFixed(2)} + </span> + )} + </div> + + {/* Sizes */} + {sizes.length > 0 && ( + <div className="flex flex-wrap gap-1"> + {sizes.slice(0, 4).map((size) => ( + <Badge key={size} variant="outline" className="text-xs px-2 py-1"> + {size} + </Badge> + ))} + {sizes.length > 4 && ( + <Badge variant="outline" className="text-xs px-2 py-1"> + +{sizes.length - 4} + </Badge> + )} + </div> + )} + </CardContent> + </div> + </Link> + </Card> + ); +}
\ No newline at end of file diff --git a/frontend/src/components/ui/avatar.tsx b/frontend/src/components/ui/avatar.tsx new file mode 100644 index 0000000..71e428b --- /dev/null +++ b/frontend/src/components/ui/avatar.tsx @@ -0,0 +1,53 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +function Avatar({ + className, + ...props +}: React.ComponentProps<typeof AvatarPrimitive.Root>) { + return ( + <AvatarPrimitive.Root + data-slot="avatar" + className={cn( + "relative flex size-8 shrink-0 overflow-hidden rounded-full", + className + )} + {...props} + /> + ) +} + +function AvatarImage({ + className, + ...props +}: React.ComponentProps<typeof AvatarPrimitive.Image>) { + return ( + <AvatarPrimitive.Image + data-slot="avatar-image" + className={cn("aspect-square size-full", className)} + {...props} + /> + ) +} + +function AvatarFallback({ + className, + ...props +}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) { + return ( + <AvatarPrimitive.Fallback + data-slot="avatar-fallback" + className={cn( + "bg-muted flex size-full items-center justify-center rounded-full", + className + )} + {...props} + /> + ) +} + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/frontend/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx new file mode 100644 index 0000000..0205413 --- /dev/null +++ b/frontend/src/components/ui/badge.tsx @@ -0,0 +1,46 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90", + secondary: + "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", + destructive: + "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", + outline: + "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +function Badge({ + className, + variant, + asChild = false, + ...props +}: React.ComponentProps<"span"> & + VariantProps<typeof badgeVariants> & { asChild?: boolean }) { + const Comp = asChild ? Slot : "span" + + return ( + <Comp + data-slot="badge" + className={cn(badgeVariants({ variant }), className)} + {...props} + /> + ) +} + +export { Badge, badgeVariants } diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx new file mode 100644 index 0000000..a2df8dc --- /dev/null +++ b/frontend/src/components/ui/button.tsx @@ -0,0 +1,59 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const buttonVariants = cva( + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", + { + variants: { + variant: { + default: + "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", + destructive: + "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", + outline: + "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", + secondary: + "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", + ghost: + "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", + link: "text-primary underline-offset-4 hover:underline", + }, + size: { + default: "h-9 px-4 py-2 has-[>svg]:px-3", + sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", + lg: "h-10 rounded-md px-6 has-[>svg]:px-4", + icon: "size-9", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + } +) + +function Button({ + className, + variant, + size, + asChild = false, + ...props +}: React.ComponentProps<"button"> & + VariantProps<typeof buttonVariants> & { + asChild?: boolean + }) { + const Comp = asChild ? Slot : "button" + + return ( + <Comp + data-slot="button" + className={cn(buttonVariants({ variant, size, className }))} + {...props} + /> + ) +} + +export { Button, buttonVariants } diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx new file mode 100644 index 0000000..d05bbc6 --- /dev/null +++ b/frontend/src/components/ui/card.tsx @@ -0,0 +1,92 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +function Card({ className, ...props }: React.ComponentProps<"div">) { + return ( + <div + data-slot="card" + className={cn( + "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", + className + )} + {...props} + /> + ) +} + +function CardHeader({ className, ...props }: React.ComponentProps<"div">) { + return ( + <div + data-slot="card-header" + className={cn( + "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", + className + )} + {...props} + /> + ) +} + +function CardTitle({ className, ...props }: React.ComponentProps<"div">) { + return ( + <div + data-slot="card-title" + className={cn("leading-none font-semibold", className)} + {...props} + /> + ) +} + +function CardDescription({ className, ...props }: React.ComponentProps<"div">) { + return ( + <div + data-slot="card-description" + className={cn("text-muted-foreground text-sm", className)} + {...props} + /> + ) +} + +function CardAction({ className, ...props }: React.ComponentProps<"div">) { + return ( + <div + data-slot="card-action" + className={cn( + "col-start-2 row-span-2 row-start-1 self-start justify-self-end", + className + )} + {...props} + /> + ) +} + +function CardContent({ className, ...props }: React.ComponentProps<"div">) { + return ( + <div + data-slot="card-content" + className={cn("px-6", className)} + {...props} + /> + ) +} + +function CardFooter({ className, ...props }: React.ComponentProps<"div">) { + return ( + <div + data-slot="card-footer" + className={cn("flex items-center px-6 [.border-t]:pt-6", className)} + {...props} + /> + ) +} + +export { + Card, + CardHeader, + CardFooter, + CardTitle, + CardAction, + CardDescription, + CardContent, +} diff --git a/frontend/src/components/ui/checkbox.tsx b/frontend/src/components/ui/checkbox.tsx new file mode 100644 index 0000000..fa0e4b5 --- /dev/null +++ b/frontend/src/components/ui/checkbox.tsx @@ -0,0 +1,32 @@ +"use client" + +import * as React from "react" +import * as CheckboxPrimitive from "@radix-ui/react-checkbox" +import { CheckIcon } from "lucide-react" + +import { cn } from "@/lib/utils" + +function Checkbox({ + className, + ...props +}: React.ComponentProps<typeof CheckboxPrimitive.Root>) { + return ( + <CheckboxPrimitive.Root + data-slot="checkbox" + className={cn( + "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", + className + )} + {...props} + > + <CheckboxPrimitive.Indicator + data-slot="checkbox-indicator" + className="flex items-center justify-center text-current transition-none" + > + <CheckIcon className="size-3.5" /> + </CheckboxPrimitive.Indicator> + </CheckboxPrimitive.Root> + ) +} + +export { Checkbox } diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx new file mode 100644 index 0000000..7d7a9d3 --- /dev/null +++ b/frontend/src/components/ui/dialog.tsx @@ -0,0 +1,135 @@ +"use client" + +import * as React from "react" +import * as DialogPrimitive from "@radix-ui/react-dialog" +import { XIcon } from "lucide-react" + +import { cn } from "@/lib/utils" + +function Dialog({ + ...props +}: React.ComponentProps<typeof DialogPrimitive.Root>) { + return <DialogPrimitive.Root data-slot="dialog" {...props} /> +} + +function DialogTrigger({ + ...props +}: React.ComponentProps<typeof DialogPrimitive.Trigger>) { + return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} /> +} + +function DialogPortal({ + ...props +}: React.ComponentProps<typeof DialogPrimitive.Portal>) { + return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} /> +} + +function DialogClose({ + ...props +}: React.ComponentProps<typeof DialogPrimitive.Close>) { + return <DialogPrimitive.Close data-slot="dialog-close" {...props} /> +} + +function DialogOverlay({ + className, + ...props +}: React.ComponentProps<typeof DialogPrimitive.Overlay>) { + return ( + <DialogPrimitive.Overlay + data-slot="dialog-overlay" + className={cn( + "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", + className + )} + {...props} + /> + ) +} + +function DialogContent({ + className, + children, + ...props +}: React.ComponentProps<typeof DialogPrimitive.Content>) { + return ( + <DialogPortal data-slot="dialog-portal"> + <DialogOverlay /> + <DialogPrimitive.Content + data-slot="dialog-content" + className={cn( + "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", + className + )} + {...props} + > + {children} + <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"> + <XIcon /> + <span className="sr-only">Close</span> + </DialogPrimitive.Close> + </DialogPrimitive.Content> + </DialogPortal> + ) +} + +function DialogHeader({ className, ...props }: React.ComponentProps<"div">) { + return ( + <div + data-slot="dialog-header" + className={cn("flex flex-col gap-2 text-center sm:text-left", className)} + {...props} + /> + ) +} + +function DialogFooter({ className, ...props }: React.ComponentProps<"div">) { + return ( + <div + data-slot="dialog-footer" + className={cn( + "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", + className + )} + {...props} + /> + ) +} + +function DialogTitle({ + className, + ...props +}: React.ComponentProps<typeof DialogPrimitive.Title>) { + return ( + <DialogPrimitive.Title + data-slot="dialog-title" + className={cn("text-lg leading-none font-semibold", className)} + {...props} + /> + ) +} + +function DialogDescription({ + className, + ...props +}: React.ComponentProps<typeof DialogPrimitive.Description>) { + return ( + <DialogPrimitive.Description + data-slot="dialog-description" + className={cn("text-muted-foreground text-sm", className)} + {...props} + /> + ) +} + +export { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogOverlay, + DialogPortal, + DialogTitle, + DialogTrigger, +} diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx new file mode 100644 index 0000000..ec51e9c --- /dev/null +++ b/frontend/src/components/ui/dropdown-menu.tsx @@ -0,0 +1,257 @@ +"use client" + +import * as React from "react" +import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" +import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react" + +import { cn } from "@/lib/utils" + +function DropdownMenu({ + ...props +}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) { + return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} /> +} + +function DropdownMenuPortal({ + ...props +}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) { + return ( + <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} /> + ) +} + +function DropdownMenuTrigger({ + ...props +}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) { + return ( + <DropdownMenuPrimitive.Trigger + data-slot="dropdown-menu-trigger" + {...props} + /> + ) +} + +function DropdownMenuContent({ + className, + sideOffset = 4, + ...props +}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) { + return ( + <DropdownMenuPrimitive.Portal> + <DropdownMenuPrimitive.Content + data-slot="dropdown-menu-content" + sideOffset={sideOffset} + className={cn( + "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md", + className + )} + {...props} + /> + </DropdownMenuPrimitive.Portal> + ) +} + +function DropdownMenuGroup({ + ...props +}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) { + return ( + <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} /> + ) +} + +function DropdownMenuItem({ + className, + inset, + variant = "default", + ...props +}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & { + inset?: boolean + variant?: "default" | "destructive" +}) { + return ( + <DropdownMenuPrimitive.Item + data-slot="dropdown-menu-item" + data-inset={inset} + data-variant={variant} + className={cn( + "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + className + )} + {...props} + /> + ) +} + +function DropdownMenuCheckboxItem({ + className, + children, + checked, + ...props +}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) { + return ( + <DropdownMenuPrimitive.CheckboxItem + data-slot="dropdown-menu-checkbox-item" + className={cn( + "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + className + )} + checked={checked} + {...props} + > + <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"> + <DropdownMenuPrimitive.ItemIndicator> + <CheckIcon className="size-4" /> + </DropdownMenuPrimitive.ItemIndicator> + </span> + {children} + </DropdownMenuPrimitive.CheckboxItem> + ) +} + +function DropdownMenuRadioGroup({ + ...props +}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) { + return ( + <DropdownMenuPrimitive.RadioGroup + data-slot="dropdown-menu-radio-group" + {...props} + /> + ) +} + +function DropdownMenuRadioItem({ + className, + children, + ...props +}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) { + return ( + <DropdownMenuPrimitive.RadioItem + data-slot="dropdown-menu-radio-item" + className={cn( + "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + className + )} + {...props} + > + <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"> + <DropdownMenuPrimitive.ItemIndicator> + <CircleIcon className="size-2 fill-current" /> + </DropdownMenuPrimitive.ItemIndicator> + </span> + {children} + </DropdownMenuPrimitive.RadioItem> + ) +} + +function DropdownMenuLabel({ + className, + inset, + ...props +}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & { + inset?: boolean +}) { + return ( + <DropdownMenuPrimitive.Label + data-slot="dropdown-menu-label" + data-inset={inset} + className={cn( + "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", + className + )} + {...props} + /> + ) +} + +function DropdownMenuSeparator({ + className, + ...props +}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) { + return ( + <DropdownMenuPrimitive.Separator + data-slot="dropdown-menu-separator" + className={cn("bg-border -mx-1 my-1 h-px", className)} + {...props} + /> + ) +} + +function DropdownMenuShortcut({ + className, + ...props +}: React.ComponentProps<"span">) { + return ( + <span + data-slot="dropdown-menu-shortcut" + className={cn( + "text-muted-foreground ml-auto text-xs tracking-widest", + className + )} + {...props} + /> + ) +} + +function DropdownMenuSub({ + ...props +}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) { + return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} /> +} + +function DropdownMenuSubTrigger({ + className, + inset, + children, + ...props +}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & { + inset?: boolean +}) { + return ( + <DropdownMenuPrimitive.SubTrigger + data-slot="dropdown-menu-sub-trigger" + data-inset={inset} + className={cn( + "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8", + className + )} + {...props} + > + {children} + <ChevronRightIcon className="ml-auto size-4" /> + </DropdownMenuPrimitive.SubTrigger> + ) +} + +function DropdownMenuSubContent({ + className, + ...props +}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) { + return ( + <DropdownMenuPrimitive.SubContent + data-slot="dropdown-menu-sub-content" + className={cn( + "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg", + className + )} + {...props} + /> + ) +} + +export { + DropdownMenu, + DropdownMenuPortal, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuLabel, + DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuSub, + DropdownMenuSubTrigger, + DropdownMenuSubContent, +} diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx new file mode 100644 index 0000000..03295ca --- /dev/null +++ b/frontend/src/components/ui/input.tsx @@ -0,0 +1,21 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +function Input({ className, type, ...props }: React.ComponentProps<"input">) { + return ( + <input + type={type} + data-slot="input" + className={cn( + "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", + "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", + "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", + className + )} + {...props} + /> + ) +} + +export { Input } diff --git a/frontend/src/components/ui/navigation-menu.tsx b/frontend/src/components/ui/navigation-menu.tsx new file mode 100644 index 0000000..1199945 --- /dev/null +++ b/frontend/src/components/ui/navigation-menu.tsx @@ -0,0 +1,168 @@ +import * as React from "react" +import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu" +import { cva } from "class-variance-authority" +import { ChevronDownIcon } from "lucide-react" + +import { cn } from "@/lib/utils" + +function NavigationMenu({ + className, + children, + viewport = true, + ...props +}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & { + viewport?: boolean +}) { + return ( + <NavigationMenuPrimitive.Root + data-slot="navigation-menu" + data-viewport={viewport} + className={cn( + "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", + className + )} + {...props} + > + {children} + {viewport && <NavigationMenuViewport />} + </NavigationMenuPrimitive.Root> + ) +} + +function NavigationMenuList({ + className, + ...props +}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) { + return ( + <NavigationMenuPrimitive.List + data-slot="navigation-menu-list" + className={cn( + "group flex flex-1 list-none items-center justify-center gap-1", + className + )} + {...props} + /> + ) +} + +function NavigationMenuItem({ + className, + ...props +}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) { + return ( + <NavigationMenuPrimitive.Item + data-slot="navigation-menu-item" + className={cn("relative", className)} + {...props} + /> + ) +} + +const navigationMenuTriggerStyle = cva( + "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1" +) + +function NavigationMenuTrigger({ + className, + children, + ...props +}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) { + return ( + <NavigationMenuPrimitive.Trigger + data-slot="navigation-menu-trigger" + className={cn(navigationMenuTriggerStyle(), "group", className)} + {...props} + > + {children}{" "} + <ChevronDownIcon + className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180" + aria-hidden="true" + /> + </NavigationMenuPrimitive.Trigger> + ) +} + +function NavigationMenuContent({ + className, + ...props +}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) { + return ( + <NavigationMenuPrimitive.Content + data-slot="navigation-menu-content" + className={cn( + "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto", + "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none", + className + )} + {...props} + /> + ) +} + +function NavigationMenuViewport({ + className, + ...props +}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) { + return ( + <div + className={cn( + "absolute top-full left-0 isolate z-50 flex justify-center" + )} + > + <NavigationMenuPrimitive.Viewport + data-slot="navigation-menu-viewport" + className={cn( + "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]", + className + )} + {...props} + /> + </div> + ) +} + +function NavigationMenuLink({ + className, + ...props +}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) { + return ( + <NavigationMenuPrimitive.Link + data-slot="navigation-menu-link" + className={cn( + "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4", + className + )} + {...props} + /> + ) +} + +function NavigationMenuIndicator({ + className, + ...props +}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) { + return ( + <NavigationMenuPrimitive.Indicator + data-slot="navigation-menu-indicator" + className={cn( + "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden", + className + )} + {...props} + > + <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" /> + </NavigationMenuPrimitive.Indicator> + ) +} + +export { + NavigationMenu, + NavigationMenuList, + NavigationMenuItem, + NavigationMenuContent, + NavigationMenuTrigger, + NavigationMenuLink, + NavigationMenuIndicator, + NavigationMenuViewport, + navigationMenuTriggerStyle, +} diff --git a/frontend/src/components/ui/radio-group.tsx b/frontend/src/components/ui/radio-group.tsx new file mode 100644 index 0000000..5e6778c --- /dev/null +++ b/frontend/src/components/ui/radio-group.tsx @@ -0,0 +1,45 @@ +"use client" + +import * as React from "react" +import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" +import { CircleIcon } from "lucide-react" + +import { cn } from "@/lib/utils" + +function RadioGroup({ + className, + ...props +}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) { + return ( + <RadioGroupPrimitive.Root + data-slot="radio-group" + className={cn("grid gap-3", className)} + {...props} + /> + ) +} + +function RadioGroupItem({ + className, + ...props +}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) { + return ( + <RadioGroupPrimitive.Item + data-slot="radio-group-item" + className={cn( + "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", + className + )} + {...props} + > + <RadioGroupPrimitive.Indicator + data-slot="radio-group-indicator" + className="relative flex items-center justify-center" + > + <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" /> + </RadioGroupPrimitive.Indicator> + </RadioGroupPrimitive.Item> + ) +} + +export { RadioGroup, RadioGroupItem } diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx new file mode 100644 index 0000000..dcbbc0c --- /dev/null +++ b/frontend/src/components/ui/select.tsx @@ -0,0 +1,185 @@ +"use client" + +import * as React from "react" +import * as SelectPrimitive from "@radix-ui/react-select" +import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react" + +import { cn } from "@/lib/utils" + +function Select({ + ...props +}: React.ComponentProps<typeof SelectPrimitive.Root>) { + return <SelectPrimitive.Root data-slot="select" {...props} /> +} + +function SelectGroup({ + ...props +}: React.ComponentProps<typeof SelectPrimitive.Group>) { + return <SelectPrimitive.Group data-slot="select-group" {...props} /> +} + +function SelectValue({ + ...props +}: React.ComponentProps<typeof SelectPrimitive.Value>) { + return <SelectPrimitive.Value data-slot="select-value" {...props} /> +} + +function SelectTrigger({ + className, + size = "default", + children, + ...props +}: React.ComponentProps<typeof SelectPrimitive.Trigger> & { + size?: "sm" | "default" +}) { + return ( + <SelectPrimitive.Trigger + data-slot="select-trigger" + data-size={size} + className={cn( + "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + className + )} + {...props} + > + {children} + <SelectPrimitive.Icon asChild> + <ChevronDownIcon className="size-4 opacity-50" /> + </SelectPrimitive.Icon> + </SelectPrimitive.Trigger> + ) +} + +function SelectContent({ + className, + children, + position = "popper", + ...props +}: React.ComponentProps<typeof SelectPrimitive.Content>) { + return ( + <SelectPrimitive.Portal> + <SelectPrimitive.Content + data-slot="select-content" + className={cn( + "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", + position === "popper" && + "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", + className + )} + position={position} + {...props} + > + <SelectScrollUpButton /> + <SelectPrimitive.Viewport + className={cn( + "p-1", + position === "popper" && + "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1" + )} + > + {children} + </SelectPrimitive.Viewport> + <SelectScrollDownButton /> + </SelectPrimitive.Content> + </SelectPrimitive.Portal> + ) +} + +function SelectLabel({ + className, + ...props +}: React.ComponentProps<typeof SelectPrimitive.Label>) { + return ( + <SelectPrimitive.Label + data-slot="select-label" + className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)} + {...props} + /> + ) +} + +function SelectItem({ + className, + children, + ...props +}: React.ComponentProps<typeof SelectPrimitive.Item>) { + return ( + <SelectPrimitive.Item + data-slot="select-item" + className={cn( + "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", + className + )} + {...props} + > + <span className="absolute right-2 flex size-3.5 items-center justify-center"> + <SelectPrimitive.ItemIndicator> + <CheckIcon className="size-4" /> + </SelectPrimitive.ItemIndicator> + </span> + <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText> + </SelectPrimitive.Item> + ) +} + +function SelectSeparator({ + className, + ...props +}: React.ComponentProps<typeof SelectPrimitive.Separator>) { + return ( + <SelectPrimitive.Separator + data-slot="select-separator" + className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)} + {...props} + /> + ) +} + +function SelectScrollUpButton({ + className, + ...props +}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) { + return ( + <SelectPrimitive.ScrollUpButton + data-slot="select-scroll-up-button" + className={cn( + "flex cursor-default items-center justify-center py-1", + className + )} + {...props} + > + <ChevronUpIcon className="size-4" /> + </SelectPrimitive.ScrollUpButton> + ) +} + +function SelectScrollDownButton({ + className, + ...props +}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) { + return ( + <SelectPrimitive.ScrollDownButton + data-slot="select-scroll-down-button" + className={cn( + "flex cursor-default items-center justify-center py-1", + className + )} + {...props} + > + <ChevronDownIcon className="size-4" /> + </SelectPrimitive.ScrollDownButton> + ) +} + +export { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectScrollDownButton, + SelectScrollUpButton, + SelectSeparator, + SelectTrigger, + SelectValue, +} diff --git a/frontend/src/components/ui/separator.tsx b/frontend/src/components/ui/separator.tsx new file mode 100644 index 0000000..67c73e5 --- /dev/null +++ b/frontend/src/components/ui/separator.tsx @@ -0,0 +1,28 @@ +"use client" + +import * as React from "react" +import * as SeparatorPrimitive from "@radix-ui/react-separator" + +import { cn } from "@/lib/utils" + +function Separator({ + className, + orientation = "horizontal", + decorative = true, + ...props +}: React.ComponentProps<typeof SeparatorPrimitive.Root>) { + return ( + <SeparatorPrimitive.Root + data-slot="separator-root" + decorative={decorative} + orientation={orientation} + className={cn( + "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", + className + )} + {...props} + /> + ) +} + +export { Separator } diff --git a/frontend/src/components/ui/sheet.tsx b/frontend/src/components/ui/sheet.tsx new file mode 100644 index 0000000..84649ad --- /dev/null +++ b/frontend/src/components/ui/sheet.tsx @@ -0,0 +1,139 @@ +"use client" + +import * as React from "react" +import * as SheetPrimitive from "@radix-ui/react-dialog" +import { XIcon } from "lucide-react" + +import { cn } from "@/lib/utils" + +function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) { + return <SheetPrimitive.Root data-slot="sheet" {...props} /> +} + +function SheetTrigger({ + ...props +}: React.ComponentProps<typeof SheetPrimitive.Trigger>) { + return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} /> +} + +function SheetClose({ + ...props +}: React.ComponentProps<typeof SheetPrimitive.Close>) { + return <SheetPrimitive.Close data-slot="sheet-close" {...props} /> +} + +function SheetPortal({ + ...props +}: React.ComponentProps<typeof SheetPrimitive.Portal>) { + return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} /> +} + +function SheetOverlay({ + className, + ...props +}: React.ComponentProps<typeof SheetPrimitive.Overlay>) { + return ( + <SheetPrimitive.Overlay + data-slot="sheet-overlay" + className={cn( + "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", + className + )} + {...props} + /> + ) +} + +function SheetContent({ + className, + children, + side = "right", + ...props +}: React.ComponentProps<typeof SheetPrimitive.Content> & { + side?: "top" | "right" | "bottom" | "left" +}) { + return ( + <SheetPortal> + <SheetOverlay /> + <SheetPrimitive.Content + data-slot="sheet-content" + className={cn( + "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", + side === "right" && + "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm", + side === "left" && + "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm", + side === "top" && + "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b", + side === "bottom" && + "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t", + className + )} + {...props} + > + {children} + <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"> + <XIcon className="size-4" /> + <span className="sr-only">Close</span> + </SheetPrimitive.Close> + </SheetPrimitive.Content> + </SheetPortal> + ) +} + +function SheetHeader({ className, ...props }: React.ComponentProps<"div">) { + return ( + <div + data-slot="sheet-header" + className={cn("flex flex-col gap-1.5 p-4", className)} + {...props} + /> + ) +} + +function SheetFooter({ className, ...props }: React.ComponentProps<"div">) { + return ( + <div + data-slot="sheet-footer" + className={cn("mt-auto flex flex-col gap-2 p-4", className)} + {...props} + /> + ) +} + +function SheetTitle({ + className, + ...props +}: React.ComponentProps<typeof SheetPrimitive.Title>) { + return ( + <SheetPrimitive.Title + data-slot="sheet-title" + className={cn("text-foreground font-semibold", className)} + {...props} + /> + ) +} + +function SheetDescription({ + className, + ...props +}: React.ComponentProps<typeof SheetPrimitive.Description>) { + return ( + <SheetPrimitive.Description + data-slot="sheet-description" + className={cn("text-muted-foreground text-sm", className)} + {...props} + /> + ) +} + +export { + Sheet, + SheetTrigger, + SheetClose, + SheetContent, + SheetHeader, + SheetFooter, + SheetTitle, + SheetDescription, +} diff --git a/frontend/src/components/ui/skeleton.tsx b/frontend/src/components/ui/skeleton.tsx new file mode 100644 index 0000000..32ea0ef --- /dev/null +++ b/frontend/src/components/ui/skeleton.tsx @@ -0,0 +1,13 @@ +import { cn } from "@/lib/utils" + +function Skeleton({ className, ...props }: React.ComponentProps<"div">) { + return ( + <div + data-slot="skeleton" + className={cn("bg-accent animate-pulse rounded-md", className)} + {...props} + /> + ) +} + +export { Skeleton } diff --git a/frontend/src/components/ui/slider.tsx b/frontend/src/components/ui/slider.tsx new file mode 100644 index 0000000..09391e8 --- /dev/null +++ b/frontend/src/components/ui/slider.tsx @@ -0,0 +1,63 @@ +"use client" + +import * as React from "react" +import * as SliderPrimitive from "@radix-ui/react-slider" + +import { cn } from "@/lib/utils" + +function Slider({ + className, + defaultValue, + value, + min = 0, + max = 100, + ...props +}: React.ComponentProps<typeof SliderPrimitive.Root>) { + const _values = React.useMemo( + () => + Array.isArray(value) + ? value + : Array.isArray(defaultValue) + ? defaultValue + : [min, max], + [value, defaultValue, min, max] + ) + + return ( + <SliderPrimitive.Root + data-slot="slider" + defaultValue={defaultValue} + value={value} + min={min} + max={max} + className={cn( + "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", + className + )} + {...props} + > + <SliderPrimitive.Track + data-slot="slider-track" + className={cn( + "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5" + )} + > + <SliderPrimitive.Range + data-slot="slider-range" + className={cn( + "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" + )} + /> + </SliderPrimitive.Track> + {Array.from({ length: _values.length }, (_, index) => ( + <SliderPrimitive.Thumb + data-slot="slider-thumb" + key={index} + className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" + /> + ))} + </SliderPrimitive.Root> + ) +} + +export { Slider } diff --git a/frontend/src/components/ui/sonner.tsx b/frontend/src/components/ui/sonner.tsx new file mode 100644 index 0000000..957524e --- /dev/null +++ b/frontend/src/components/ui/sonner.tsx @@ -0,0 +1,25 @@ +"use client" + +import { useTheme } from "next-themes" +import { Toaster as Sonner, ToasterProps } from "sonner" + +const Toaster = ({ ...props }: ToasterProps) => { + const { theme = "system" } = useTheme() + + return ( + <Sonner + theme={theme as ToasterProps["theme"]} + className="toaster group" + style={ + { + "--normal-bg": "var(--popover)", + "--normal-text": "var(--popover-foreground)", + "--normal-border": "var(--border)", + } as React.CSSProperties + } + {...props} + /> + ) +} + +export { Toaster } diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts new file mode 100644 index 0000000..bd0c391 --- /dev/null +++ b/frontend/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} |