[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # Epic kitchen web app *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/masalohehes-projects/v0-epic-kitchen-web-app) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/ySGsw5QJbtE) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/masalohehes-projects/v0-epic-kitchen-web-app](https://vercel.com/masalohehes-projects/v0-epic-kitchen-web-app)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/ySGsw5QJbtE](https://v0.dev/chat/projects/ySGsw5QJbtE)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/cart/page.tsx" "use client" import Image from "next/image" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { Minus, Plus, Trash2, ShoppingBag } from "lucide-react" import { useCart } from "@/components/cart-provider" export default function CartPage() { const { items, total, updateQuantity, removeItem } = useCart() const shippingCost = total >= 200000 ? 0 : 15000 const finalTotal = total + shippingCost if (items.length === 0) { return (

Keranjang Belanja Kosong

Belum ada produk yang ditambahkan ke keranjang

) } return (

Keranjang Belanja

{/* Cart Items */}

{items.map((item) => (

{item.name}

Rp {item.price.toLocaleString("id-ID")}

{item.quantity}

))}

{/* Order Summary */}

Ringkasan Pesanan

Subtotal ({items.reduce((sum, item) => sum + item.quantity, 0)} item) Rp {total.toLocaleString("id-ID")}

Ongkos Kirim {shippingCost === 0 ? "GRATIS" : `Rp ${shippingCost.toLocaleString("id-ID")}`}

{total < 200000 && (

Belanja Rp {(200000 - total).toLocaleString("id-ID")} lagi untuk gratis ongkir!

)}

Total Rp {finalTotal.toLocaleString("id-ID")}

) } [V0_FILE]typescriptreact:file="app/category/[slug]/page.tsx" "use client" import { useState } from "react" import Image from "next/image" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Star, Grid, List } from "lucide-react" // Mock data untuk produk berdasarkan kategori const getCategoryProducts = (slug: string) => { const categoryProducts = { "wadah-tisu": [ { id: 6, name: "Wadah Tisu Elegant", price: 45000, originalPrice: 60000, image: "/placeholder.svg?height=300&width=300&text=Wadah+Tisu+Elegant", rating: 4.5, reviews: 78, }, { id: 16, name: "Wadah Tisu Kayu Premium", price: 89000, originalPrice: 120000, image: "/placeholder.svg?height=300&width=300&text=Wadah+Tisu+Kayu", rating: 4.7, reviews: 45, }, { id: 26, name: "Wadah Tisu Minimalis", price: 35000, originalPrice: 45000, image: "/placeholder.svg?height=300&width=300&text=Wadah+Tisu+Minimalis", rating: 4.3, reviews: 67, }, ], mangkok: [ { id: 3, name: "Mangkok Kristal Set", price: 234000, originalPrice: 300000, image: "/placeholder.svg?height=300&width=300&text=Mangkok+Kristal", rating: 4.7, reviews: 156, }, { id: 13, name: "Mangkok Keramik Premium", price: 156000, originalPrice: 200000, image: "/placeholder.svg?height=300&width=300&text=Mangkok+Keramik", rating: 4.8, reviews: 89, }, { id: 23, name: "Mangkok Stainless Steel", price: 89000, originalPrice: 120000, image: "/placeholder.svg?height=300&width=300&text=Mangkok+Steel", rating: 4.6, reviews: 134, }, ], panci: [ { id: 7, name: "Panci Anti Lengket Premium", price: 299000, originalPrice: 399000, image: "/placeholder.svg?height=300&width=300&text=Panci+Premium", rating: 4.9, reviews: 145, }, { id: 17, name: "Panci Set Stainless Steel", price: 456000, originalPrice: 600000, image: "/placeholder.svg?height=300&width=300&text=Panci+Set", rating: 4.8, reviews: 78, }, { id: 27, name: "Panci Presto Multi Fungsi", price: 234000, originalPrice: 300000, image: "/placeholder.svg?height=300&width=300&text=Panci+Presto", rating: 4.7, reviews: 92, }, ], } return categoryProducts[slug as keyof typeof categoryProducts] || [] } const getCategoryName = (slug: string) => { const categoryNames = { "wadah-tisu": "Wadah Tisu", mangkok: "Mangkok", panci: "Panci", "tutup-makanan": "Tutup Makanan", miniatur: "Miniatur", cangkir: "Cangkir", "sendok-&-garpu": "Sendok & Garpu", "ring-adonan": "Ring Adonan", telenan: "Telenan", toples: "Toples", "rolling-pin": "Rolling Pin", } return categoryNames[slug as keyof typeof categoryNames] || "Kategori" } export default function CategoryPage({ params }: { params: { slug: string } }) { const [viewMode, setViewMode] = useState<"grid" | "list">("grid") const [sortBy, setSortBy] = useState("name") const products = getCategoryProducts(params.slug) const categoryName = getCategoryName(params.slug) return (

{/* Breadcrumb */} {/* Header */}

{categoryName}

{products.length} produk tersedia

{/* Products */} {products.length > 0 ? (

{products.map((product) => (

-{Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100)}%

{product.name}

{[...Array(5)].map((_, i) => ( ))}

({product.reviews})

Rp {product.price.toLocaleString("id-ID")} Rp {product.originalPrice.toLocaleString("id-ID")}

))}

) : (

Belum Ada Produk

Produk untuk kategori ini sedang dalam persiapan

)}

) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/login/page.tsx" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { ChefHat, Eye, EyeOff } from "lucide-react" import { useRouter } from "next/navigation" import { useToast } from "@/hooks/use-toast" export default function LoginPage() { const [showPassword, setShowPassword] = useState(false) const [formData, setFormData] = useState({ email: "", password: "", rememberMe: false, }) const router = useRouter() const { toast } = useToast() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() // Simulate login process toast({ title: "Login berhasil!", description: "Selamat datang kembali di Prada Epic Kitchen.", }) // Redirect to home or previous page router.push("/") } return (

Prada Epic Kitchen

Masuk ke Akun Anda

Belum punya akun?{" "} Daftar sekarang

Masuk

Email setFormData((prev) => ({ ...prev, email: e.target.value }))} placeholder="nama@email.com" required />

Password

setFormData((prev) => ({ ...prev, password: e.target.value }))} placeholder="Masukkan password" required />

setFormData((prev) => ({ ...prev, rememberMe: checked as boolean }))} /> Ingat saya

Lupa password?

Atau masuk dengan

) } [V0_FILE]typescriptreact:file="app/orders/page.tsx" "use client" import { useState } from "react" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Package, Truck, CheckCircle, Clock, Eye } from "lucide-react" export default function OrdersPage() { // Mock orders data - in real app this would come from API const [orders] = useState([ { id: "PEK-ABC123456", date: "2024-01-15", status: "delivered", total: 445000, items: [ { id: 1, name: "Kotak Makanan Premium", price: 89000, quantity: 2, image: "/placeholder.svg?height=100&width=100&text=Kotak+Makanan", }, { id: 3, name: "Mangkok Kristal Set", price: 234000, quantity: 1, image: "/placeholder.svg?height=100&width=100&text=Mangkok+Kristal", }, ], shipping: { method: "Regular", cost: 0, address: "Jl. Sudirman No. 123, Jakarta Pusat", }, }, { id: "PEK-DEF789012", date: "2024-01-20", status: "shipped", total: 324000, items: [ { id: 7, name: "Panci Anti Lengket Premium", price: 299000, quantity: 1, image: "/placeholder.svg?height=100&width=100&text=Panci+Premium", }, ], shipping: { method: "Express", cost: 25000, address: "Jl. Thamrin No. 456, Jakarta Selatan", }, }, { id: "PEK-GHI345678", date: "2024-01-25", status: "processing", total: 223000, items: [ { id: 2, name: "Lunch Set Elegant", price: 156000, quantity: 1, image: "/placeholder.svg?height=100&width=100&text=Lunch+Set", }, { id: 4, name: "Eco Botol Ramah Lingkungan", price: 67000, quantity: 1, image: "/placeholder.svg?height=100&width=100&text=Eco+Botol", }, ], shipping: { method: "Regular", cost: 0, address: "Jl. Gatot Subroto No. 789, Jakarta Barat", }, }, ]) const getStatusBadge = (status: string) => { const statusConfig = { processing: { label: "Diproses", color: "bg-yellow-500", icon: Clock }, shipped: { label: "Dikirim", color: "bg-blue-500", icon: Truck }, delivered: { label: "Diterima", color: "bg-green-500", icon: CheckCircle }, } const config = statusConfig[status as keyof typeof statusConfig] const Icon = config.icon return ( {config.label} ) } const filterOrdersByStatus = (status: string) => { if (status === "all") return orders return orders.filter((order) => order.status === status) } return (

Pesanan Saya

Semua ({orders.length}) Diproses ({filterOrdersByStatus("processing").length}) Dikirim ({filterOrdersByStatus("shipped").length}) Diterima ({filterOrdersByStatus("delivered").length})

) } function OrdersList({ orders, getStatusBadge }: { orders: any[]; getStatusBadge: (status: string) => JSX.Element }) { if (orders.length === 0) { return (

Belum Ada Pesanan

Anda belum memiliki pesanan dengan status ini

) } return (

{orders.map((order) => (

Pesanan #{order.id}

Dipesan pada{" "} {new Date(order.date).toLocaleDateString("id-ID", { year: "numeric", month: "long", day: "numeric", })}

{getStatusBadge(order.status)}

{/* Order Items */}

{order.items.map((item: any) => (

{item.name}

{item.quantity}x - Rp {item.price.toLocaleString("id-ID")}

Rp {(item.price * item.quantity).toLocaleString("id-ID")}

))}

{/* Order Summary */}

Alamat Pengiriman:

{order.shipping.address}

Pengiriman: {order.shipping.method} {order.shipping.cost > 0 && ` - Rp ${order.shipping.cost.toLocaleString("id-ID")}`}

Total Pesanan

Rp {order.total.toLocaleString("id-ID")}

))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" import Image from "next/image" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Star, ShoppingCart, Truck, Shield, Headphones } from "lucide-react" export default function HomePage() { const featuredProducts = [ { id: 1, name: "Kotak Makanan Premium", price: 89000, originalPrice: 120000, image: "/placeholder.svg?height=300&width=300&text=Kotak+Makanan", rating: 4.8, reviews: 124, }, { id: 2, name: "Lunch Set Elegant", price: 156000, originalPrice: 200000, image: "/placeholder.svg?height=300&width=300&text=Lunch+Set", rating: 4.9, reviews: 89, }, { id: 3, name: "Mangkok Kristal Set", price: 234000, originalPrice: 300000, image: "/placeholder.svg?height=300&width=300&text=Mangkok+Kristal", rating: 4.7, reviews: 156, }, { id: 4, name: "Eco Botol Ramah Lingkungan", price: 67000, originalPrice: 85000, image: "/placeholder.svg?height=300&width=300&text=Eco+Botol", rating: 4.6, reviews: 203, }, { id: 5, name: "Cannister Storage Set", price: 178000, originalPrice: 220000, image: "/placeholder.svg?height=300&width=300&text=Cannister+Set", rating: 4.8, reviews: 97, }, ] const categories = [ { name: "Wadah Tisu", image: "/placeholder.svg?height=200&width=200&text=Wadah+Tisu", count: 24 }, { name: "Mangkok", image: "/placeholder.svg?height=200&width=200&text=Mangkok", count: 45 }, { name: "Panci", image: "/placeholder.svg?height=200&width=200&text=Panci", count: 32 }, { name: "Tutup Makanan", image: "/placeholder.svg?height=200&width=200&text=Tutup+Makanan", count: 18 }, { name: "Miniatur", image: "/placeholder.svg?height=200&width=200&text=Miniatur", count: 67 }, { name: "Cangkir", image: "/placeholder.svg?height=200&width=200&text=Cangkir", count: 38 }, { name: "Sendok & Garpu", image: "/placeholder.svg?height=200&width=200&text=Sendok+Garpu", count: 29 }, { name: "Ring Adonan", image: "/placeholder.svg?height=200&width=200&text=Ring+Adonan", count: 15 }, ] return (

{/* Hero Section */}

🔥 Promo Spesial Hari Ini

Prada Epic Kitchen

Koleksi peralatan dapur premium untuk menciptakan pengalaman memasak yang luar biasa. Kualitas terbaik dengan harga terjangkau.

{/* Features Section */}

Gratis Ongkir

Pengiriman gratis untuk pembelian di atas Rp 200.000

Garansi Kualitas

Jaminan kualitas produk dengan garansi resmi

Customer Service 24/7

Layanan pelanggan siap membantu kapan saja

{/* Categories Section */}

Kategori Produk

Temukan berbagai kategori peralatan dapur berkualitas tinggi untuk kebutuhan memasak Anda

{categories.map((category, index) => (

{category.name}

{category.count} produk

))}

{/* Featured Products */}

Produk Unggulan

Koleksi produk terpilih dengan kualitas terbaik dan harga spesial

{featuredProducts.map((product) => (

-{Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100)}%

{product.name}

{[...Array(5)].map((_, i) => ( ))}

({product.reviews})

Rp {product.price.toLocaleString("id-ID")} Rp {product.originalPrice.toLocaleString("id-ID")}

))}

{/* Newsletter Section */}

Dapatkan Penawaran Terbaik

Berlangganan newsletter kami untuk mendapatkan info promo, produk terbaru, dan tips memasak

) } [V0_FILE]typescriptreact:file="app/product/[id]/page.tsx" "use client" import { useState } from "react" import Image from "next/image" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Star, Heart, Share2, Minus, Plus, ShoppingCart, Truck, Shield, RotateCcw } from "lucide-react" import { useCart } from "@/components/cart-provider" import { useToast } from "@/hooks/use-toast" // Mock data - in real app this would come from API const getProduct = (id: string) => { const products = { "1": { id: 1, name: "Kotak Makanan Premium", price: 89000, originalPrice: 120000, images: [ "/placeholder.svg?height=500&width=500&text=Kotak+Makanan+1", "/placeholder.svg?height=500&width=500&text=Kotak+Makanan+2", "/placeholder.svg?height=500&width=500&text=Kotak+Makanan+3", "/placeholder.svg?height=500&width=500&text=Kotak+Makanan+4", ], rating: 4.8, reviews: 124, description: "Kotak makanan premium dengan bahan berkualitas tinggi, tahan lama dan aman untuk makanan. Dilengkapi dengan penutup kedap udara untuk menjaga kesegaran makanan lebih lama.", features: [ "Bahan BPA-free dan food grade", "Penutup kedap udara", "Tahan microwave dan dishwasher", "Kapasitas 1.2 liter", "Desain ergonomis dan mudah dibawa", ], specifications: { Material: "Polypropylene Premium", Kapasitas: "1.2 Liter", Dimensi: "20 x 15 x 8 cm", Berat: "350 gram", Warna: "Transparan dengan tutup biru", }, stock: 45, category: "Kotak Makanan", }, } return products[id as keyof typeof products] || products["1"] } export default function ProductDetailPage({ params }: { params: { id: string } }) { const [selectedImage, setSelectedImage] = useState(0) const [quantity, setQuantity] = useState(1) const { addItem } = useCart() const { toast } = useToast() const product = getProduct(params.id) const handleAddToCart = () => { for (let i = 0; i < quantity; i++) { addItem({ id: product.id, name: product.name, price: product.price, image: product.images[0], }) } toast({ title: "Produk ditambahkan ke keranjang!", description: `${quantity}x ${product.name} berhasil ditambahkan.`, }) } const discount = Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100) return (

{/* Product Images */}

{discount > 0 && ( -{discount}% )}

{product.images.map((image, index) => ( ))}

{/* Product Info */}

{product.name}

{[...Array(5)].map((_, i) => ( ))} ({product.reviews} ulasan)

Rp {product.price.toLocaleString("id-ID")} {product.originalPrice > product.price && ( Rp {product.originalPrice.toLocaleString("id-ID")} )}

{product.description}

{/* Quantity Selector */}

Jumlah:

{quantity}

Stok: {product.stock}

{/* Action Buttons */}

{/* Features */}

Gratis Ongkir

Min. Rp 200k

Garansi Resmi

1 Tahun

Easy Return

7 Hari

{/* Product Details Tabs */}

Deskripsi Spesifikasi Ulasan ({product.reviews})

Deskripsi Produk

{product.description}

Fitur Unggulan:

• {feature}

Spesifikasi Produk

{Object.entries(product.specifications).map(([key, value]) => (

{key} {value}

))}

Ulasan Pelanggan

{/* Sample reviews */}

{[...Array(5)].map((_, i) => ( ))}

Sari Dewi 2 hari yang lalu

Produk sangat bagus! Kualitas premium dan tahan lama. Penutupnya benar-benar kedap udara, makanan tetap segar lebih lama. Recommended!

{[...Array(4)].map((_, i) => ( ))}

Budi Santoso 1 minggu yang lalu

Bagus sih, tapi agak susah dibuka tutupnya kalau sudah lama. Overall masih oke lah.

) } [V0_FILE]typescriptreact:file="app/products/loading.tsx" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/products/page.tsx" "use client" import { useState } from "react" import Image from "next/image" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" import { Star, Search, Grid, List } from "lucide-react" export default function ProductsPage() { const [viewMode, setViewMode] = useState<"grid" | "list">("grid") const [searchQuery, setSearchQuery] = useState("") const [sortBy, setSortBy] = useState("name") // Mock products data const allProducts = [ { id: 1, name: "Kotak Makanan Premium", price: 89000, originalPrice: 120000, image: "/placeholder.svg?height=300&width=300&text=Kotak+Makanan", rating: 4.8, reviews: 124, category: "Kotak Makanan", }, { id: 2, name: "Lunch Set Elegant", price: 156000, originalPrice: 200000, image: "/placeholder.svg?height=300&width=300&text=Lunch+Set", rating: 4.9, reviews: 89, category: "Lunch Set", }, { id: 3, name: "Mangkok Kristal Set", price: 234000, originalPrice: 300000, image: "/placeholder.svg?height=300&width=300&text=Mangkok+Kristal", rating: 4.7, reviews: 156, category: "Mangkok", }, { id: 4, name: "Eco Botol Ramah Lingkungan", price: 67000, originalPrice: 85000, image: "/placeholder.svg?height=300&width=300&text=Eco+Botol", rating: 4.6, reviews: 203, category: "Botol", }, { id: 5, name: "Cannister Storage Set", price: 178000, originalPrice: 220000, image: "/placeholder.svg?height=300&width=300&text=Cannister+Set", rating: 4.8, reviews: 97, category: "Toples", }, { id: 6, name: "Wadah Tisu Elegant", price: 45000, originalPrice: 60000, image: "/placeholder.svg?height=300&width=300&text=Wadah+Tisu", rating: 4.5, reviews: 78, category: "Wadah Tisu", }, { id: 7, name: "Panci Anti Lengket Premium", price: 299000, originalPrice: 399000, image: "/placeholder.svg?height=300&width=300&text=Panci+Premium", rating: 4.9, reviews: 145, category: "Panci", }, { id: 8, name: "Set Sendok Garpu Stainless", price: 89000, originalPrice: 120000, image: "/placeholder.svg?height=300&width=300&text=Sendok+Garpu", rating: 4.7, reviews: 92, category: "Sendok & Garpu", }, ] const categories = [ "Semua Kategori", "Kotak Makanan", "Mangkok", "Panci", "Wadah Tisu", "Sendok & Garpu", "Toples", "Botol", ] const priceRanges = [ { label: "Semua Harga", min: 0, max: Number.POSITIVE_INFINITY }, { label: "< Rp 50.000", min: 0, max: 50000 }, { label: "Rp 50.000 - Rp 100.000", min: 50000, max: 100000 }, { label: "Rp 100.000 - Rp 200.000", min: 100000, max: 200000 }, { label: "> Rp 200.000", min: 200000, max: Number.POSITIVE_INFINITY }, ] return (

{/* Sidebar Filters */}

Cari Produk

setSearchQuery(e.target.value)} />

Kategori

{categories.map((category) => (

{category}

))}

Rentang Harga

{priceRanges.map((range) => (

{range.label}

))}

Rating

{[5, 4, 3, 2, 1].map((rating) => (

{[...Array(rating)].map((_, i) => ( ))}

& ke atas

))}

{/* Main Content */}

{/* Header */}

Semua Produk

{allProducts.length} produk ditemukan

{/* Products Grid */}

{allProducts.map((product) => (

-{Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100)}%

{product.name}

{[...Array(5)].map((_, i) => ( ))}

({product.reviews})

Rp {product.price.toLocaleString("id-ID")} Rp {product.originalPrice.toLocaleString("id-ID")}

))}

{/* Pagination */}

) } [V0_FILE]typescriptreact:file="app/profile/page.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { User, MapPin, CreditCard, Bell, Shield, Edit } from "lucide-react" import { useToast } from "@/hooks/use-toast" export default function ProfilePage() { const { toast } = useToast() const [profile, setProfile] = useState({ name: "John Doe", email: "john.doe@example.com", phone: "+62 812 3456 7890", avatar: "/placeholder.svg?height=100&width=100&text=JD", joinDate: "2023-06-15", }) const [addresses] = useState([ { id: 1, label: "Rumah", name: "John Doe", phone: "+62 812 3456 7890", address: "Jl. Sudirman No. 123, RT 01/RW 02", city: "Jakarta Pusat", province: "DKI Jakarta", postalCode: "10110", isDefault: true, }, { id: 2, label: "Kantor", name: "John Doe", phone: "+62 812 3456 7890", address: "Jl. Thamrin No. 456, Lantai 15", city: "Jakarta Pusat", province: "DKI Jakarta", postalCode: "10230", isDefault: false, }, ]) const handleProfileUpdate = (e: React.FormEvent) => { e.preventDefault() toast({ title: "Profil berhasil diperbarui!", description: "Informasi profil Anda telah disimpan.", }) } return (

Profil Saya

Profil Alamat Pembayaran Pengaturan {/* Profile Tab */} Informasi Profil

{profile.name .split(" ") .map((n) => n[0]) .join("")}

Bergabung sejak{" "} {new Date(profile.joinDate).toLocaleDateString("id-ID", { year: "numeric", month: "long", day: "numeric", })}

Nama Lengkap setProfile((prev) => ({ ...prev, name: e.target.value }))} />

Email setProfile((prev) => ({ ...prev, email: e.target.value }))} />

Nomor Telepon setProfile((prev) => ({ ...prev, phone: e.target.value }))} />

{/* Addresses Tab */}

Alamat Saya

{addresses.map((address) => (

{address.label} {address.isDefault && ( Alamat Utama )}

{address.name}

{address.phone}

{address.address}
{address.city}, {address.province} {address.postalCode}

{!address.isDefault && ( )}

))}

{/* Payment Tab */}

Metode Pembayaran

Belum Ada Kartu Tersimpan

Tambahkan kartu kredit atau debit untuk pembayaran yang lebih mudah

{/* Settings Tab */}

Notifikasi

Email Promosi

Terima email tentang penawaran dan promo terbaru

Update Pesanan

Notifikasi tentang status pesanan Anda

Keamanan

Ubah Password

Terakhir diubah 3 bulan yang lalu

Verifikasi 2 Langkah

Tambahkan keamanan ekstra untuk akun Anda

) } [V0_FILE]typescriptreact:file="app/register/page.tsx" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { ChefHat, Eye, EyeOff } from "lucide-react" import { useRouter } from "next/navigation" import { useToast } from "@/hooks/use-toast" export default function RegisterPage() { const [showPassword, setShowPassword] = useState(false) const [showConfirmPassword, setShowConfirmPassword] = useState(false) const [formData, setFormData] = useState({ firstName: "", lastName: "", email: "", phone: "", password: "", confirmPassword: "", agreeToTerms: false, subscribeNewsletter: false, }) const router = useRouter() const { toast } = useToast() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (formData.password !== formData.confirmPassword) { toast({ title: "Password tidak cocok", description: "Pastikan password dan konfirmasi password sama.", variant: "destructive", }) return } if (!formData.agreeToTerms) { toast({ title: "Syarat dan ketentuan", description: "Anda harus menyetujui syarat dan ketentuan untuk mendaftar.", variant: "destructive", }) return } // Simulate registration process toast({ title: "Pendaftaran berhasil!", description: "Akun Anda telah dibuat. Selamat datang di Prada Epic Kitchen!", }) // Redirect to login or home router.push("/login") } return (

Prada Epic Kitchen

Buat Akun Baru

Sudah punya akun?{" "} Masuk di sini

Daftar

Nama Depan setFormData((prev) => ({ ...prev, firstName: e.target.value }))} placeholder="John" required />

Nama Belakang setFormData((prev) => ({ ...prev, lastName: e.target.value }))} placeholder="Doe" required />

Email setFormData((prev) => ({ ...prev, email: e.target.value }))} placeholder="nama@email.com" required />

Nomor Telepon setFormData((prev) => ({ ...prev, phone: e.target.value }))} placeholder="+62 812 3456 7890" required />

Password

setFormData((prev) => ({ ...prev, password: e.target.value }))} placeholder="Minimal 8 karakter" required />

Konfirmasi Password

setFormData((prev) => ({ ...prev, confirmPassword: e.target.value }))} placeholder="Ulangi password" required />

setFormData((prev) => ({ ...prev, agreeToTerms: checked as boolean })) } className="mt-1" /> Saya menyetujui{" "} Syarat dan Ketentuan {" "} serta{" "} Kebijakan Privasi

setFormData((prev) => ({ ...prev, subscribeNewsletter: checked as boolean })) } className="mt-1" /> Saya ingin menerima email tentang penawaran dan promo terbaru

Atau daftar dengan

) } [V0_FILE]typescriptreact:file="app/wishlist/page.tsx" "use client" import { useState } from "react" import Image from "next/image" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Heart, ShoppingCart, Trash2 } from "lucide-react" import { useCart } from "@/components/cart-provider" import { useToast } from "@/hooks/use-toast" export default function WishlistPage() { const { addItem } = useCart() const { toast } = useToast() // Mock wishlist data - in real app this would come from user's wishlist const [wishlistItems, setWishlistItems] = useState([ { id: 2, name: "Lunch Set Elegant", price: 156000, originalPrice: 200000, image: "/placeholder.svg?height=300&width=300&text=Lunch+Set", rating: 4.9, reviews: 89, }, { id: 4, name: "Eco Botol Ramah Lingkungan", price: 67000, originalPrice: 85000, image: "/placeholder.svg?height=300&width=300&text=Eco+Botol", rating: 4.6, reviews: 203, }, { id: 7, name: "Panci Anti Lengket Premium", price: 299000, originalPrice: 399000, image: "/placeholder.svg?height=300&width=300&text=Panci+Premium", rating: 4.9, reviews: 145, }, ]) const removeFromWishlist = (id: number) => { setWishlistItems((items) => items.filter((item) => item.id !== id)) toast({ title: "Produk dihapus dari wishlist", description: "Produk berhasil dihapus dari daftar favorit Anda.", }) } const addToCart = (product: any) => { addItem({ id: product.id, name: product.name, price: product.price, image: product.image, }) toast({ title: "Produk ditambahkan ke keranjang!", description: `${product.name} berhasil ditambahkan ke keranjang.`, }) } if (wishlistItems.length === 0) { return (

Wishlist Kosong

Belum ada produk yang ditambahkan ke wishlist

) } return (

Wishlist Saya

{wishlistItems.length} produk favorit

{wishlistItems.map((product) => (

-{Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100)}%

{product.name}

Rp {product.price.toLocaleString("id-ID")} Rp {product.originalPrice.toLocaleString("id-ID")}

))}

) } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/cart-provider.tsx" "use client" import { createContext, useContext, useReducer, type ReactNode } from "react" export interface CartItem { id: number name: string price: number image: string quantity: number variant?: string } interface CartState { items: CartItem[] total: number } type CartAction = | { type: "ADD_ITEM"; payload: Omit } | { type: "REMOVE_ITEM"; payload: number } | { type: "UPDATE_QUANTITY"; payload: { id: number; quantity: number } } | { type: "CLEAR_CART" } const CartContext = createContext<{ items: CartItem[] total: number addItem: (item: Omit) => void removeItem: (id: number) => void updateQuantity: (id: number, quantity: number) => void clearCart: () => void } | null>(null) function cartReducer(state: CartState, action: CartAction): CartState { switch (action.type) { case "ADD_ITEM": { const existingItem = state.items.find((item) => item.id === action.payload.id) if (existingItem) { const updatedItems = state.items.map((item) => item.id === action.payload.id ? { ...item, quantity: item.quantity + 1 } : item, ) return { items: updatedItems, total: updatedItems.reduce((sum, item) => sum + item.price * item.quantity, 0), } } else { const newItems = [...state.items, { ...action.payload, quantity: 1 }] return { items: newItems, total: newItems.reduce((sum, item) => sum + item.price * item.quantity, 0), } } } case "REMOVE_ITEM": { const newItems = state.items.filter((item) => item.id !== action.payload) return { items: newItems, total: newItems.reduce((sum, item) => sum + item.price * item.quantity, 0), } } case "UPDATE_QUANTITY": { const updatedItems = state.items .map((item) => item.id === action.payload.id ? { ...item, quantity: Math.max(0, action.payload.quantity) } : item, ) .filter((item) => item.quantity > 0) return { items: updatedItems, total: updatedItems.reduce((sum, item) => sum + item.price * item.quantity, 0), } } case "CLEAR_CART": return { items: [], total: 0 } default: return state } } export function CartProvider({ children }: { children: ReactNode }) { const [state, dispatch] = useReducer(cartReducer, { items: [], total: 0 }) const addItem = (item: Omit) => { dispatch({ type: "ADD_ITEM", payload: item }) } const removeItem = (id: number) => { dispatch({ type: "REMOVE_ITEM", payload: id }) } const updateQuantity = (id: number, quantity: number) => { dispatch({ type: "UPDATE_QUANTITY", payload: { id, quantity } }) } const clearCart = () => { dispatch({ type: "CLEAR_CART" }) } return ( {children} ) } export function useCart() { const context = useContext(CartContext) if (!context) { throw new Error("useCart must be used within a CartProvider") } return context } [V0_FILE]typescriptreact:file="components/header.tsx" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" import { Search, ShoppingCart, User, Menu, Heart, ChefHat } from "lucide-react" import { useCart } from "@/components/cart-provider" export function Header() { const [isSearchOpen, setIsSearchOpen] = useState(false) const { items } = useCart() const totalItems = items.reduce((sum, item) => sum + item.quantity, 0) const categories = [ "Wadah Tisu", "Mangkok", "Panci", "Tutup Makanan", "Miniatur", "Cangkir", "Sendok & Garpu", "Ring Adonan", "Telenan", "Toples", "Rolling Pin", ] return (

{/* Top Bar */}

🎉 Gratis Ongkir untuk pembelian di atas Rp 200.000! 🎉

{/* Main Header */}

{/* Logo */} Prada Epic Kitchen {/* Desktop Navigation */} {/* Search Bar */}

{/* Right Actions */}

{/* Mobile Search */} {/* Wishlist */} {/* Cart */} {/* User Account */} Masuk Daftar Profil Saya Pesanan Saya {/* Mobile Menu */}

Beranda

Kategori

{categories.map((category) => ( {category} ))}

Semua Produk Tentang Kami Kontak

{/* Mobile Search Bar */} {isSearchOpen && (

)}

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/accordion.tsx" "use client" import * as React from "react" import * as AccordionPrimitive from "@radix-ui/react-accordion" import { ChevronDown } from "lucide-react" import { cn } from "@/lib/utils" const Accordion = AccordionPrimitive.Root const AccordionItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AccordionItem.displayName = "AccordionItem" const AccordionTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( svg]:rotate-180", className )} {...props} > {children} )) AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName const AccordionContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => (

{children}

)) AccordionContent.displayName = AccordionPrimitive.Content.displayName export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } [V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" "use client" import * as React from "react" import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" import { cn } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" const AlertDialog = AlertDialogPrimitive.Root const AlertDialogTrigger = AlertDialogPrimitive.Trigger const AlertDialogPortal = AlertDialogPrimitive.Portal const AlertDialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName const AlertDialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) AlertDialogHeader.displayName = "AlertDialogHeader" const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) AlertDialogFooter.displayName = "AlertDialogFooter" const AlertDialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName const AlertDialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName const AlertDialogAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName const AlertDialogCancel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const alertVariants = cva( "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", { variants: { variant: { default: "bg-background text-foreground", destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", }, }, defaultVariants: { variant: "default", }, } ) const Alert = React.forwardRef< HTMLDivElement, React.HTMLAttributes & VariantProps >(({ className, variant, ...props }, ref) => (

)) Alert.displayName = "Alert" const AlertTitle = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) AlertTitle.displayName = "AlertTitle" const AlertDescription = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) AlertDescription.displayName = "AlertDescription" export { Alert, AlertTitle, AlertDescription } [V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx" "use client" import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" const AspectRatio = AspectRatioPrimitive.Root export { AspectRatio } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" "use client" import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, } ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return (
) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { ChevronRight, MoreHorizontal } from "lucide-react" import { cn } from "@/lib/utils" const Breadcrumb = React.forwardRef< HTMLElement, React.ComponentPropsWithoutRef<"nav"> & { separator?: React.ReactNode } >(({ ...props }, ref) =>
) Breadcrumb.displayName = "Breadcrumb" const BreadcrumbList = React.forwardRef< HTMLOListElement, React.ComponentPropsWithoutRef<"ol"> >(({ className, ...props }, ref) => (
)) BreadcrumbList.displayName = "BreadcrumbList" const BreadcrumbItem = React.forwardRef< HTMLLIElement, React.ComponentPropsWithoutRef<"li"> >(({ className, ...props }, ref) => (
)) BreadcrumbItem.displayName = "BreadcrumbItem" const BreadcrumbLink = React.forwardRef< HTMLAnchorElement, React.ComponentPropsWithoutRef<"a"> & { asChild?: boolean } >(({ asChild, className, ...props }, ref) => { const Comp = asChild ? Slot : "a" return ( ) }) BreadcrumbLink.displayName = "BreadcrumbLink" const BreadcrumbPage = React.forwardRef< HTMLSpanElement, React.ComponentPropsWithoutRef<"span"> >(({ className, ...props }, ref) => ( )) BreadcrumbPage.displayName = "BreadcrumbPage" const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
) BreadcrumbSeparator.displayName = "BreadcrumbSeparator" const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => ( ) BreadcrumbEllipsis.displayName = "BreadcrumbElipssis" export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, } [V0_FILE]typescriptreact:file="components/ui/button.tsx" 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 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return ( ) } ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/calendar.tsx" "use client" import * as React from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import { DayPicker } from "react-day-picker" import { cn } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" export type CalendarProps = React.ComponentProps function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) { return ( , IconRight: ({ ...props }) => , }} {...props} /> ) } Calendar.displayName = "Calendar" export { Calendar } [V0_FILE]typescriptreact:file="components/ui/card.tsx" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) Card.displayName = "Card" const CardHeader = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/carousel.tsx" "use client" import * as React from "react" import useEmblaCarousel, { type UseEmblaCarouselType, } from "embla-carousel-react" import { ArrowLeft, ArrowRight } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" type CarouselApi = UseEmblaCarouselType[1] type UseCarouselParameters = Parameters type CarouselOptions = UseCarouselParameters[0] type CarouselPlugin = UseCarouselParameters[1] type CarouselProps = { opts?: CarouselOptions plugins?: CarouselPlugin orientation?: "horizontal" | "vertical" setApi?: (api: CarouselApi) => void } type CarouselContextProps = { carouselRef: ReturnType[0] api: ReturnType[1] scrollPrev: () => void scrollNext: () => void canScrollPrev: boolean canScrollNext: boolean } & CarouselProps const CarouselContext = React.createContext(null) function useCarousel() { const context = React.useContext(CarouselContext) if (!context) { throw new Error("useCarousel must be used within a ") } return context } const Carousel = React.forwardRef< HTMLDivElement, React.HTMLAttributes & CarouselProps >( ( { orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref ) => { const [carouselRef, api] = useEmblaCarousel( { ...opts, axis: orientation === "horizontal" ? "x" : "y", }, plugins ) const [canScrollPrev, setCanScrollPrev] = React.useState(false) const [canScrollNext, setCanScrollNext] = React.useState(false) const onSelect = React.useCallback((api: CarouselApi) => { if (!api) { return } setCanScrollPrev(api.canScrollPrev()) setCanScrollNext(api.canScrollNext()) }, []) const scrollPrev = React.useCallback(() => { api?.scrollPrev() }, [api]) const scrollNext = React.useCallback(() => { api?.scrollNext() }, [api]) const handleKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if (event.key === "ArrowLeft") { event.preventDefault() scrollPrev() } else if (event.key === "ArrowRight") { event.preventDefault() scrollNext() } }, [scrollPrev, scrollNext] ) React.useEffect(() => { if (!api || !setApi) { return } setApi(api) }, [api, setApi]) React.useEffect(() => { if (!api) { return } onSelect(api) api.on("reInit", onSelect) api.on("select", onSelect) return () => { api?.off("select", onSelect) } }, [api, onSelect]) return (
{children}
) } ) Carousel.displayName = "Carousel" const CarouselContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { const { carouselRef, orientation } = useCarousel() return (

) }) CarouselContent.displayName = "CarouselContent" const CarouselItem = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { const { orientation } = useCarousel() return (
) }) CarouselItem.displayName = "CarouselItem" const CarouselPrevious = React.forwardRef< HTMLButtonElement, React.ComponentProps >(({ className, variant = "outline", size = "icon", ...props }, ref) => { const { orientation, scrollPrev, canScrollPrev } = useCarousel() return ( ) }) CarouselPrevious.displayName = "CarouselPrevious" const CarouselNext = React.forwardRef< HTMLButtonElement, React.ComponentProps >(({ className, variant = "outline", size = "icon", ...props }, ref) => { const { orientation, scrollNext, canScrollNext } = useCarousel() return ( ) }) CarouselNext.displayName = "CarouselNext" export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" "use client" import * as React from "react" import * as RechartsPrimitive from "recharts" import { cn } from "@/lib/utils" // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: "", dark: ".dark" } as const export type ChartConfig = { [k in string]: { label?: React.ReactNode icon?: React.ComponentType } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } ) } type ChartContextProps = { config: ChartConfig } const ChartContext = React.createContext(null) function useChart() { const context = React.useContext(ChartContext) if (!context) { throw new Error("useChart must be used within a ") } return context } const ChartContainer = React.forwardRef< HTMLDivElement, React.ComponentProps<"div"> & { config: ChartConfig children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >["children"] } >(({ id, className, children, config, ...props }, ref) => { const uniqueId = React.useId() const chartId = `chart-${id || uniqueId.replace(/:/g, "")}` return (
{children}
) }) ChartContainer.displayName = "Chart" const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter( ([_, config]) => config.theme || config.color ) if (!colorConfig.length) { return null } return (