[V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { Providers } from "./providers" import { Toaster } from "@/components/ui/toaster" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "ModernStore - Premium E-commerce Experience", description: "Discover premium products with our modern, responsive e-commerce platform", keywords: "ecommerce, shopping, products, online store", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/providers.tsx" "use client" import type React from "react" import { createContext, useContext, useReducer, useEffect, type ReactNode } from "react" import { ThemeProvider } from "@/components/theme-provider" // Types export interface Product { id: string name: string description: string price: number originalPrice?: number images: string[] category: string tags: string[] variants: { size?: string[] color?: string[] } stock: number rating: number reviewCount: number featured: boolean onSale: boolean saleEndDate?: string } export interface CartItem { id: string productId: string name: string price: number image: string quantity: number variant?: { size?: string color?: string } } export interface User { id: string email: string name: string role: "customer" | "admin" wishlist: string[] recentlyViewed: string[] } export interface Review { id: string productId: string userId: string userName: string rating: number comment: string date: string } export interface Order { id: string userId: string items: CartItem[] total: number status: "pending" | "confirmed" | "shipped" | "delivered" date: string shippingAddress: { name: string address: string city: string zipCode: string country: string } } interface AppState { products: Product[] cart: CartItem[] user: User | null reviews: Review[] orders: Order[] searchQuery: string filters: { category: string priceRange: [number, number] tags: string[] } } type AppAction = | { type: "SET_PRODUCTS"; payload: Product[] } | { type: "ADD_PRODUCT"; payload: Product } | { type: "UPDATE_PRODUCT"; payload: Product } | { type: "DELETE_PRODUCT"; payload: string } | { type: "ADD_TO_CART"; payload: CartItem } | { type: "UPDATE_CART_ITEM"; payload: { id: string; quantity: number } } | { type: "REMOVE_FROM_CART"; payload: string } | { type: "CLEAR_CART" } | { type: "SET_USER"; payload: User | null } | { type: "ADD_TO_WISHLIST"; payload: string } | { type: "REMOVE_FROM_WISHLIST"; payload: string } | { type: "ADD_TO_RECENTLY_VIEWED"; payload: string } | { type: "SET_SEARCH_QUERY"; payload: string } | { type: "SET_FILTERS"; payload: Partial } | { type: "ADD_REVIEW"; payload: Review } | { type: "ADD_ORDER"; payload: Order } const initialState: AppState = { products: [], cart: [], user: null, reviews: [], orders: [], searchQuery: "", filters: { category: "", priceRange: [0, 1000], tags: [], }, } function appReducer(state: AppState, action: AppAction): AppState { switch (action.type) { case "SET_PRODUCTS": return { ...state, products: action.payload } case "ADD_PRODUCT": return { ...state, products: [...state.products, action.payload] } case "UPDATE_PRODUCT": return { ...state, products: state.products.map((p) => (p.id === action.payload.id ? action.payload : p)), } case "DELETE_PRODUCT": return { ...state, products: state.products.filter((p) => p.id !== action.payload), } case "ADD_TO_CART": const existingItem = state.cart.find( (item) => item.productId === action.payload.productId && JSON.stringify(item.variant) === JSON.stringify(action.payload.variant), ) if (existingItem) { return { ...state, cart: state.cart.map((item) => item.id === existingItem.id ? { ...item, quantity: item.quantity + action.payload.quantity } : item, ), } } return { ...state, cart: [...state.cart, action.payload] } case "UPDATE_CART_ITEM": return { ...state, cart: state.cart.map((item) => item.id === action.payload.id ? { ...item, quantity: action.payload.quantity } : item, ), } case "REMOVE_FROM_CART": return { ...state, cart: state.cart.filter((item) => item.id !== action.payload), } case "CLEAR_CART": return { ...state, cart: [] } case "SET_USER": return { ...state, user: action.payload } case "ADD_TO_WISHLIST": if (!state.user) return state return { ...state, user: { ...state.user, wishlist: [...state.user.wishlist, action.payload], }, } case "REMOVE_FROM_WISHLIST": if (!state.user) return state return { ...state, user: { ...state.user, wishlist: state.user.wishlist.filter((id) => id !== action.payload), }, } case "ADD_TO_RECENTLY_VIEWED": if (!state.user) return state const recentlyViewed = [action.payload, ...state.user.recentlyViewed.filter((id) => id !== action.payload)].slice( 0, 10, ) return { ...state, user: { ...state.user, recentlyViewed, }, } case "SET_SEARCH_QUERY": return { ...state, searchQuery: action.payload } case "SET_FILTERS": return { ...state, filters: { ...state.filters, ...action.payload } } case "ADD_REVIEW": return { ...state, reviews: [...state.reviews, action.payload] } case "ADD_ORDER": return { ...state, orders: [...state.orders, action.payload] } default: return state } } const AppContext = createContext<{ state: AppState dispatch: React.Dispatch } | null>(null) export function useApp() { const context = useContext(AppContext) if (!context) { throw new Error("useApp must be used within AppProvider") } return context } export function Providers({ children }: { children: ReactNode }) { const [state, dispatch] = useReducer(appReducer, initialState) // Load data from localStorage on mount useEffect(() => { const loadData = () => { try { const products = JSON.parse(localStorage.getItem("products") || "[]") const cart = JSON.parse(localStorage.getItem("cart") || "[]") const user = JSON.parse(localStorage.getItem("user") || "null") const reviews = JSON.parse(localStorage.getItem("reviews") || "[]") const orders = JSON.parse(localStorage.getItem("orders") || "[]") if (products.length === 0) { // Initialize with sample data const sampleProducts: Product[] = [ { id: "1", name: "Premium Wireless Headphones", description: "High-quality wireless headphones with noise cancellation and premium sound quality.", price: 299, originalPrice: 399, images: ["/placeholder.svg?height=400&width=400", "/placeholder.svg?height=400&width=400"], category: "Electronics", tags: ["wireless", "audio", "premium"], variants: { color: ["Black", "White", "Silver"] }, stock: 50, rating: 4.8, reviewCount: 124, featured: true, onSale: true, saleEndDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(), }, { id: "2", name: "Organic Cotton T-Shirt", description: "Comfortable and sustainable organic cotton t-shirt in various colors and sizes.", price: 29, images: ["/placeholder.svg?height=400&width=400"], category: "Clothing", tags: ["organic", "cotton", "sustainable"], variants: { size: ["XS", "S", "M", "L", "XL"], color: ["White", "Black", "Navy", "Gray"] }, stock: 100, rating: 4.5, reviewCount: 89, featured: false, onSale: false, }, { id: "3", name: "Smart Fitness Watch", description: "Advanced fitness tracking with heart rate monitoring, GPS, and smartphone integration.", price: 199, images: ["/placeholder.svg?height=400&width=400"], category: "Electronics", tags: ["fitness", "smart", "health"], variants: { color: ["Black", "Silver", "Rose Gold"] }, stock: 30, rating: 4.6, reviewCount: 67, featured: true, onSale: false, }, ] dispatch({ type: "SET_PRODUCTS", payload: sampleProducts }) localStorage.setItem("products", JSON.stringify(sampleProducts)) } else { dispatch({ type: "SET_PRODUCTS", payload: products }) } if (cart.length > 0) { cart.forEach((item: CartItem) => dispatch({ type: "ADD_TO_CART", payload: item })) } if (user) { dispatch({ type: "SET_USER", payload: user }) } if (reviews.length > 0) { reviews.forEach((review: Review) => dispatch({ type: "ADD_REVIEW", payload: review })) } if (orders.length > 0) { orders.forEach((order: Order) => dispatch({ type: "ADD_ORDER", payload: order })) } } catch (error) { console.error("Error loading data from localStorage:", error) } } loadData() }, []) // Save data to localStorage when state changes useEffect(() => { localStorage.setItem("products", JSON.stringify(state.products)) }, [state.products]) useEffect(() => { localStorage.setItem("cart", JSON.stringify(state.cart)) }, [state.cart]) useEffect(() => { if (state.user) { localStorage.setItem("user", JSON.stringify(state.user)) } else { localStorage.removeItem("user") } }, [state.user]) useEffect(() => { localStorage.setItem("reviews", JSON.stringify(state.reviews)) }, [state.reviews]) useEffect(() => { localStorage.setItem("orders", JSON.stringify(state.orders)) }, [state.orders]) return ( {children} ) } [V0_FILE]typescriptreact:file="components/layout/header.tsx" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { Search, ShoppingCart, Heart, User, Menu, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { useApp } from "@/app/providers" import { ThemeToggle } from "@/components/theme-toggle" export function Header() { const { state, dispatch } = useApp() const router = useRouter() const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const [searchQuery, setSearchQuery] = useState("") const handleSearch = (e: React.FormEvent) => { e.preventDefault() if (searchQuery.trim()) { dispatch({ type: "SET_SEARCH_QUERY", payload: searchQuery }) router.push("/products") } } const handleLogout = () => { dispatch({ type: "SET_USER", payload: null }) dispatch({ type: "CLEAR_CART" }) router.push("/") } const cartItemCount = state.cart.reduce((sum, item) => sum + item.quantity, 0) const wishlistCount = state.user?.wishlist.length || 0 return (

{/* Logo */}

ModernStore {/* Desktop Navigation */} {/* Search Bar */} {/* Actions */}

{/* Wishlist */} {state.user && ( )} {/* Cart */} {/* User Menu */} {state.user ? ( <> Profile Orders {state.user.role === "admin" && ( <> Admin Dashboard )} Logout ) : ( <> Login Register )} {/* Mobile Menu Toggle */}

{/* Mobile Menu */} {mobileMenuOpen && (

)}

) } [V0_FILE]typescriptreact:file="components/layout/footer.tsx" import Link from "next/link" import { Facebook, Twitter, Instagram, Mail } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/product/product-card.tsx" "use client" import type React from "react" import { useState } from "react" import Image from "next/image" import Link from "next/link" import { Heart, ShoppingCart, Star, Clock } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { useApp, type Product } from "@/app/providers" import { useToast } from "@/hooks/use-toast" interface ProductCardProps { product: Product } export function ProductCard({ product }: ProductCardProps) { const { state, dispatch } = useApp() const { toast } = useToast() const [imageLoading, setImageLoading] = useState(true) const isInWishlist = state.user?.wishlist.includes(product.id) || false const handleAddToCart = (e: React.MouseEvent) => { e.preventDefault() e.stopPropagation() if (product.stock === 0) { toast({ title: "Out of Stock", description: "This product is currently out of stock.", variant: "destructive", }) return } const cartItem = { id: `${product.id}-${Date.now()}`, productId: product.id, name: product.name, price: product.price, image: product.images[0], quantity: 1, } dispatch({ type: "ADD_TO_CART", payload: cartItem }) toast({ title: "Added to Cart", description: `${product.name} has been added to your cart.`, }) } const handleToggleWishlist = (e: React.MouseEvent) => { e.preventDefault() e.stopPropagation() if (!state.user) { toast({ title: "Login Required", description: "Please login to add items to your wishlist.", variant: "destructive", }) return } if (isInWishlist) { dispatch({ type: "REMOVE_FROM_WISHLIST", payload: product.id }) toast({ title: "Removed from Wishlist", description: `${product.name} has been removed from your wishlist.`, }) } else { dispatch({ type: "ADD_TO_WISHLIST", payload: product.id }) toast({ title: "Added to Wishlist", description: `${product.name} has been added to your wishlist.`, }) } } const formatTimeLeft = (endDate: string) => { const now = new Date().getTime() const end = new Date(endDate).getTime() const timeLeft = end - now if (timeLeft <= 0) return null const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)) const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)) if (days > 0) return `${days}d ${hours}h` if (hours > 0) return `${hours}h ${minutes}m` return `${minutes}m` } const timeLeft = product.saleEndDate ? formatTimeLeft(product.saleEndDate) : null return (

setImageLoading(false)} /> {/* Badges */}

{product.featured && ( Featured )} {product.onSale && ( Sale )} {product.stock === 0 && ( Out of Stock )}

{/* Sale Countdown */} {product.onSale && timeLeft && (

{timeLeft}

)} {/* Wishlist Button */} {/* Quick Add to Cart */}

{product.name}

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

({product.reviewCount})

${product.price.toFixed(2)} {product.originalPrice && product.originalPrice > product.price && ( ${product.originalPrice.toFixed(2)} )}

{product.stock > 0 && product.stock <= 10 && ( Only {product.stock} left )}

) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useEffect, useState } from "react" import Link from "next/link" import { ArrowRight, Truck, Shield, Headphones } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Header } from "@/components/layout/header" import { Footer } from "@/components/layout/footer" import { ProductCard } from "@/components/product/product-card" import { useApp } from "./providers" export default function HomePage() { const { state } = useApp() const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) if (!mounted) { return null } const featuredProducts = state.products.filter((product) => product.featured).slice(0, 4) const saleProducts = state.products.filter((product) => product.onSale).slice(0, 4) const categories = [...new Set(state.products.map((product) => product.category))] return (

{/* Hero Section */}

Discover Premium Products

Shop the latest trends with our curated collection of high-quality products

{/* Features */}

Free Shipping

Free shipping on orders over $50

Secure Payment

Your payment information is safe with us

24/7 Support

Get help whenever you need it

{/* Categories */}

Shop by Category

Explore our wide range of product categories

{categories.map((category) => (

{category === "Electronics" ? "📱" : category === "Clothing" ? "👕" : category === "Home" ? "🏠" : "🛍️"}

{category}

{state.products.filter((p) => p.category === category).length} products

))}

{/* Featured Products */}

Featured Products

Hand-picked products just for you

{featuredProducts.map((product) => ( ))}

{/* Sale Products */} {saleProducts.length > 0 && (

Limited Time Offers

Sale

Don't miss out on these amazing deals

{saleProducts.map((product) => ( ))}

)} {/* Newsletter */}

Stay in the Loop

Subscribe to our newsletter and be the first to know about new products, exclusive deals, and special offers.

) } [V0_FILE]typescriptreact:file="app/products/page.tsx" isFixed="true" "use client" import { useState, useEffect, useMemo } from "react" import { Filter, Grid, List, SortAsc } from "lucide-react" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { Slider } from "@/components/ui/slider" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet" import { Header } from "@/components/layout/header" import { Footer } from "@/components/layout/footer" import { ProductCard } from "@/components/product/product-card" import { useApp } from "@/app/providers" export default function ProductsPage() { const { state, dispatch } = useApp() const [mounted, setMounted] = useState(false) const [viewMode, setViewMode] = useState<"grid" | "list">("grid") const [sortBy, setSortBy] = useState("name") const [localFilters, setLocalFilters] = useState({ category: "", priceRange: [0, 1000] as [number, number], tags: [] as string[], inStock: false, }) useEffect(() => { setMounted(true) }, []) const categories = useMemo(() => [...new Set(state.products.map((product) => product.category))], [state.products]) const allTags = useMemo(() => [...new Set(state.products.flatMap((product) => product.tags))], [state.products]) const filteredAndSortedProducts = useMemo(() => { const filtered = state.products.filter((product) => { // Search query filter if ( state.searchQuery && !product.name.toLowerCase().includes(state.searchQuery.toLowerCase()) && !product.description.toLowerCase().includes(state.searchQuery.toLowerCase()) ) { return false } // Category filter if (localFilters.category && product.category !== localFilters.category) { return false } // Price range filter if (product.price < localFilters.priceRange[0] || product.price > localFilters.priceRange[1]) { return false } // Tags filter if (localFilters.tags.length > 0 && !localFilters.tags.some((tag) => product.tags.includes(tag))) { return false } // Stock filter if (localFilters.inStock && product.stock === 0) { return false } return true }) // Sort products filtered.sort((a, b) => { switch (sortBy) { case "price-low": return a.price - b.price case "price-high": return b.price - a.price case "rating": return b.rating - a.rating case "newest": return b.id.localeCompare(a.id) case "name": default: return a.name.localeCompare(b.name) } }) return filtered }, [state.products, state.searchQuery, localFilters, sortBy]) const handleTagToggle = (tag: string) => { setLocalFilters((prev) => ({ ...prev, tags: prev.tags.includes(tag) ? prev.tags.filter((t) => t !== tag) : [...prev.tags, tag], })) } const clearFilters = () => { setLocalFilters({ category: "", priceRange: [0, 1000], tags: [], inStock: false, }) dispatch({ type: "SET_SEARCH_QUERY", payload: "" }) } if (!mounted) { return null } const FilterContent = () => (

{/* Category Filter */}

Products

{filteredAndSortedProducts.length} products found {state.searchQuery && ` for "${state.searchQuery}"`}

{/* Mobile Filter */} Filters Filter products by your preferences

{/* Sort */} {/* View Mode */}

{/* Products Grid */} {filteredAndSortedProducts.length === 0 ? (

No products found matching your criteria.

) : (

{filteredAndSortedProducts.map((product) => ( ))}

)}

) } [V0_FILE]typescriptreact:file="app/products/[id]/page.tsx" "use client" import { useState, useEffect } from "react" import { useParams, useRouter } from "next/navigation" import Image from "next/image" import { Heart, ShoppingCart, Star, Minus, Plus, Share2, Truck, Shield, RotateCcw } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Header } from "@/components/layout/header" import { Footer } from "@/components/layout/footer" import { ProductCard } from "@/components/product/product-card" import { useApp, type Review } from "@/app/providers" import { useToast } from "@/hooks/use-toast" export default function ProductDetailPage() { const params = useParams() const router = useRouter() const { state, dispatch } = useApp() const { toast } = useToast() const [mounted, setMounted] = useState(false) const [selectedImage, setSelectedImage] = useState(0) const [quantity, setQuantity] = useState(1) const [selectedVariants, setSelectedVariants] = useState<{ size?: string color?: string }>({}) const [reviewText, setReviewText] = useState("") const [reviewRating, setReviewRating] = useState(5) useEffect(() => { setMounted(true) }, []) const product = state.products.find((p) => p.id === params.id) const productReviews = state.reviews.filter((r) => r.productId === params.id) const relatedProducts = state.products .filter((p) => p.id !== params.id && p.category === product?.category) .slice(0, 4) useEffect(() => { if (product && state.user) { dispatch({ type: "ADD_TO_RECENTLY_VIEWED", payload: product.id }) } }, [product, state.user, dispatch]) if (!mounted) { return null } if (!product) { return (

Product Not Found

) } const isInWishlist = state.user?.wishlist.includes(product.id) || false const handleAddToCart = () => { if (product.stock === 0) { toast({ title: "Out of Stock", description: "This product is currently out of stock.", variant: "destructive", }) return } const cartItem = { id: `${product.id}-${Date.now()}`, productId: product.id, name: product.name, price: product.price, image: product.images[0], quantity, variant: selectedVariants, } dispatch({ type: "ADD_TO_CART", payload: cartItem }) toast({ title: "Added to Cart", description: `${quantity} ${product.name}(s) added to your cart.`, }) } const handleToggleWishlist = () => { if (!state.user) { toast({ title: "Login Required", description: "Please login to add items to your wishlist.", variant: "destructive", }) return } if (isInWishlist) { dispatch({ type: "REMOVE_FROM_WISHLIST", payload: product.id }) toast({ title: "Removed from Wishlist", description: `${product.name} has been removed from your wishlist.`, }) } else { dispatch({ type: "ADD_TO_WISHLIST", payload: product.id }) toast({ title: "Added to Wishlist", description: `${product.name} has been added to your wishlist.`, }) } } const handleSubmitReview = () => { if (!state.user) { toast({ title: "Login Required", description: "Please login to submit a review.", variant: "destructive", }) return } if (!reviewText.trim()) { toast({ title: "Review Required", description: "Please write a review before submitting.", variant: "destructive", }) return } const review: Review = { id: Date.now().toString(), productId: product.id, userId: state.user.id, userName: state.user.name, rating: reviewRating, comment: reviewText, date: new Date().toISOString(), } dispatch({ type: "ADD_REVIEW", payload: review }) setReviewText("") setReviewRating(5) toast({ title: "Review Submitted", description: "Thank you for your review!", }) } const averageRating = productReviews.length > 0 ? productReviews.reduce((sum, review) => sum + review.rating, 0) / productReviews.length : product.rating return (

{/* Product Images */}

{product.onSale && ( Sale )}

{product.images.length > 1 && (

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

)}

{/* Product Info */}

{product.name}

{[...Array(5)].map((_, i) => ( ))} ({productReviews.length || product.reviewCount} reviews)

{product.category}

${product.price.toFixed(2)} {product.originalPrice && product.originalPrice > product.price && ( ${product.originalPrice.toFixed(2)} )}

{product.stock > 0 && product.stock <= 10 && ( Only {product.stock} left! )}

{product.description}

{/* Variants */} {(product.variants.color || product.variants.size) && (

{product.variants.color && (

Color setSelectedVariants((prev) => ({ ...prev, color: value }))} className="flex flex-wrap gap-2 mt-2" > {product.variants.color.map((color) => (

{color}

))}

)} {product.variants.size && (

Size setSelectedVariants((prev) => ({ ...prev, size: value }))} className="flex flex-wrap gap-2 mt-2" > {product.variants.size.map((size) => (

{size}

))}

)}

)} {/* Quantity */}

Quantity

{quantity}

{/* Actions */}

{/* Features */}

Free Shipping

Secure Payment

Easy Returns

{/* Product Details Tabs */} Description Reviews ({productReviews.length || product.reviewCount}) Shipping & Returns

Product Description

{product.description}

Features:

{tag}

{/* Review Summary */}

{averageRating.toFixed(1)}

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

{productReviews.length || product.reviewCount} reviews

{[5, 4, 3, 2, 1].map((rating) => { const count = productReviews.filter((r) => r.rating === rating).length const percentage = productReviews.length > 0 ? (count / productReviews.length) * 100 : 0 return (

{rating}

{count}

) })}

{/* Write Review */} {state.user && (

Write a Review

Rating

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

Your Review

setReviewText(e.target.value)}
                          className="mt-2"
                        />
                      </div>
                      <Button onClick={handleSubmitReview}>Submit Review</Button>
                    </div>
                  </CardContent>
                </Card>
              )}

{/* Reviews List */}
              <div className="space-y-4">
                {productReviews.map((review) => (
                  <Card key={review.id}>
                    <CardContent className="p-6">
                      <div className="flex items-start justify-between mb-2">
                        <div>
                          <div className="font-semibold">{review.userName}</div>
                          <div className="flex items-center gap-1 mt-1">
                            {[...Array(5)].map((_, i) => (
                              <Star
                                key={i}
                                className={`h-3 w-3 ${
                                  i < review.rating ? "fill-yellow-400 text-yellow-400" : "text-muted-foreground"
                                }`}
                              />
                            ))}
                          </div>
                        </div>
                        <div className="text-sm text-muted-foreground">
                          {new Date(review.date).toLocaleDateString()}
                        </div>
                      </div>
                      <p className="text-muted-foreground">{review.comment}</p>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          </TabsContent>

<TabsContent value="shipping" className="mt-6">
            <Card>
              <CardContent className="p-6">
                <div className="space-y-6">
                  <div>
                    <h3 className="font-semibold mb-2">Shipping Information</h3>
                    <ul className="space-y-1 text-muted-foreground">
                      <li>• Free shipping on orders over $50</li>
                      <li>• Standard delivery: 3-5 business days</li>
                      <li>• Express delivery: 1-2 business days (additional cost)</li>
                      <li>• International shipping available</li>
                    </ul>
                  </div>
                  <Separator />
                  <div>
                    <h3 className="font-semibold mb-2">Returns & Exchanges</h3>
                    <ul className="space-y-1 text-muted-foreground">
                      <li>• 30-day return policy</li>
                      <li>• Items must be in original condition</li>
                      <li>• Free returns for defective items</li>
                      <li>• Exchange available for different sizes/colors</li>
                    </ul>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>

{/* Related Products */}
        {relatedProducts.length > 0 && (
          <section>
            <h2 className="text-2xl font-bold mb-6">You May Also Like</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {relatedProducts.map((product) => (
                <ProductCard key={product.id} product={product} />
              ))}
            </div>
          </section>
        )}
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/cart/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import Link from "next/link"
import { Minus, Plus, Trash2, ShoppingBag, ArrowLeft } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import { Header } from "@/components/layout/header"
import { Footer } from "@/components/layout/footer"
import { useApp } from "@/app/providers"
import { useToast } from "@/hooks/use-toast"

export default function CartPage() {
  const { state, dispatch } = useApp()
  const router = useRouter()
  const { toast } = useToast()
  const [mounted, setMounted] = useState(false)
  const [promoCode, setPromoCode] = useState("")
  const [discount, setDiscount] = useState(0)

useEffect(() => {
    setMounted(true)
  }, [])

if (!mounted) {
    return null
  }

const updateQuantity = (itemId: string, newQuantity: number) => {
    if (newQuantity === 0) {
      dispatch({ type: "REMOVE_FROM_CART", payload: itemId })
      toast({
        title: "Item Removed",
        description: "Item has been removed from your cart.",
      })
    } else {
      dispatch({ type: "UPDATE_CART_ITEM", payload: { id: itemId, quantity: newQuantity } })
    }
  }

const removeItem = (itemId: string) => {
    dispatch({ type: "REMOVE_FROM_CART", payload: itemId })
    toast({
      title: "Item Removed",
      description: "Item has been removed from your cart.",
    })
  }

const applyPromoCode = () => {
    const validCodes = {
      SAVE10: 0.1,
      WELCOME20: 0.2,
      STUDENT15: 0.15,
    }

if (validCodes[promoCode as keyof typeof validCodes]) {
      setDiscount(validCodes[promoCode as keyof typeof validCodes])
      toast({
        title: "Promo Code Applied",
        description: `${validCodes[promoCode as keyof typeof validCodes] * 100}% discount applied!`,
      })
    } else {
      toast({
        title: "Invalid Promo Code",
        description: "Please enter a valid promo code.",
        variant: "destructive",
      })
    }
  }

const subtotal = state.cart.reduce((sum, item) => sum + item.price * item.quantity, 0)
  const discountAmount = subtotal * discount
  const shipping = subtotal > 50 ? 0 : 9.99
  const tax = (subtotal - discountAmount) * 0.08
  const total = subtotal - discountAmount + shipping + tax

if (state.cart.length === 0) {
    return (
      <div className="min-h-screen bg-background">
        <Header />
        <main className="container mx-auto px-4 py-8">
          <div className="text-center py-12">
            <ShoppingBag className="h-24 w-24 mx-auto text-muted-foreground mb-6" />
            <h1 className="text-2xl font-bold mb-4">Your cart is empty</h1>
            <p className="text-muted-foreground mb-8">Looks like you haven't added any items to your cart yet.</p>
            <Button asChild>
              <Link href="/products">Continue Shopping</Link>
            </Button>
          </div>
        </main>
        <Footer />
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      <Header />

<main className="container mx-auto px-4 py-8">
        <div className="flex items-center gap-2 mb-8">
          <Button variant="ghost" size="sm" onClick={() => router.back()}>
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back
          </Button>
          <h1 className="text-2xl font-bold">Shopping Cart ({state.cart.length} items)</h1>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Cart Items */}
          <div className="lg:col-span-2 space-y-4">
            {state.cart.map((item) => (
              <Card key={item.id}>
                <CardContent className="p-6">
                  <div className="flex flex-col sm:flex-row gap-4">
                    <div className="w-full sm:w-24 h-24 relative rounded-md overflow-hidden">
                      <Image src={item.image || "/placeholder.svg"} alt={item.name} fill className="object-cover" />
                    </div>

<div className="flex-1 space-y-2">
                      <h3 className="font-semibold">{item.name}</h3>
                      {item.variant && (
                        <div className="text-sm text-muted-foreground">
                          {item.variant.color && `Color: ${item.variant.color}`}
                          {item.variant.color && item.variant.size && " • "}
                          {item.variant.size && `Size: ${item.variant.size}`}
                        </div>
                      )}
                      <div className="text-lg font-bold">${item.price.toFixed(2)}</div>
                    </div>

<div className="flex flex-col sm:items-end gap-4">
                      <div className="flex items-center gap-2">
                        <Button
                          variant="outline"
                          size="icon"
                          onClick={() => updateQuantity(item.id, item.quantity - 1)}
                          disabled={item.quantity <= 1}
                        >
                          <Minus className="h-4 w-4" />
                        </Button>
                        <span className="w-12 text-center font-semibold">{item.quantity}</span>
                        <Button
                          variant="outline"
                          size="icon"
                          onClick={() => updateQuantity(item.id, item.quantity + 1)}
                        >
                          <Plus className="h-4 w-4" />
                        </Button>
                      </div>

<div className="flex items-center gap-2">
                        <div className="font-bold">${(item.price * item.quantity).toFixed(2)}</div>
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => removeItem(item.id)}
                          className="text-destructive hover:text-destructive"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

{/* Order Summary */}
          <div className="space-y-6">
            <Card>
              <CardContent className="p-6">
                <h2 className="text-lg font-semibold mb-4">Order Summary</h2>

<div className="space-y-2">
                  <div className="flex justify-between">
                    <span>Subtotal</span>
                    <span>${subtotal.toFixed(2)}</span>
                  </div>

{discount > 0 && (
                    <div className="flex justify-between text-green-600">
                      <span>Discount ({discount * 100}%)</span>
                      <span>-${discountAmount.toFixed(2)}</span>
                    </div>
                  )}

<div className="flex justify-between">
                    <span>Shipping</span>
                    <span>{shipping === 0 ? "Free" : `$${shipping.toFixed(2)}`}</span>
                  </div>

<div className="flex justify-between">
                    <span>Tax</span>
                    <span>${tax.toFixed(2)}</span>
                  </div>

<div className="flex justify-between font-bold text-lg">
                    <span>Total</span>
                    <span>${total.toFixed(2)}</span>
                  </div>
                </div>

<Button className="w-full mt-6" size="lg" asChild>
                  <Link href="/checkout">Proceed to Checkout</Link>
                </Button>
              </CardContent>
            </Card>

{/* Promo Code */}
            <Card>
              <CardContent className="p-6">
                <h3 className="font-semibold mb-4">Promo Code</h3>
                <div className="flex gap-2">
                  <Input
                    placeholder="Enter promo code"
                    value={promoCode}
                    onChange={(e) => setPromoCode(e.target.value.toUpperCase())}
                  />
                  <Button onClick={applyPromoCode} variant="outline">
                    Apply
                  </Button>
                </div>
                <div className="text-xs text-muted-foreground mt-2">Try: SAVE10, WELCOME20, STUDENT15</div>
              </CardContent>
            </Card>

{/* Shipping Info */}
            <Card>
              <CardContent className="p-6">
                <h3 className="font-semibold mb-2">Shipping Information</h3>
                <div className="text-sm text-muted-foreground space-y-1">
                  <p>• Free shipping on orders over $50</p>
                  <p>• Standard delivery: 3-5 business days</p>
                  <p>• Express delivery available at checkout</p>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/checkout/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { CreditCard, Truck, User } from "lucide-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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Separator } from "@/components/ui/separator"
import { Checkbox } from "@/components/ui/checkbox"
import { Header } from "@/components/layout/header"
import { Footer } from "@/components/layout/footer"
import { useApp, type Order } from "@/app/providers"
import { useToast } from "@/hooks/use-toast"

export default function CheckoutPage() {
  const { state, dispatch } = useApp()
  const router = useRouter()
  const { toast } = useToast()
  const [mounted, setMounted] = useState(false)
  const [step, setStep] = useState(1)
  const [formData, setFormData] = useState({
    // Shipping Information
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    address: "",
    city: "",
    zipCode: "",
    country: "United States",

// Payment Information
    cardNumber: "",
    expiryDate: "",
    cvv: "",
    cardName: "",

// Options
    shippingMethod: "standard",
    saveInfo: false,
    newsletter: false,
  })

useEffect(() => {
    setMounted(true)
    if (state.cart.length === 0) {
      router.push("/cart")
    }
  }, [state.cart.length, router])

if (!mounted) {
    return null
  }

const subtotal = state.cart.reduce((sum, item) => sum + item.price * item.quantity, 0)
  const shippingCost = formData.shippingMethod === "express" ? 15.99 : subtotal > 50 ? 0 : 9.99
  const tax = subtotal * 0.08
  const total = subtotal + shippingCost + tax

const handleInputChange = (field: string, value: string | boolean) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

const validateStep = (stepNumber: number) => {
    switch (stepNumber) {
      case 1:
        return (
          formData.firstName &&
          formData.lastName &&
          formData.email &&
          formData.address &&
          formData.city &&
          formData.zipCode
        )
      case 2:
        return formData.cardNumber && formData.expiryDate && formData.cvv && formData.cardName
      default:
        return true
    }
  }

const handlePlaceOrder = () => {
    if (!state.user) {
      toast({
        title: "Login Required",
        description: "Please login to place an order.",
        variant: "destructive",
      })
      return
    }

const order: Order = {
      id: Date.now().toString(),
      userId: state.user.id,
      items: state.cart,
      total,
      status: "pending",
      date: new Date().toISOString(),
      shippingAddress: {
        name: `${formData.firstName} ${formData.lastName}`,
        address: formData.address,
        city: formData.city,
        zipCode: formData.zipCode,
        country: formData.country,
      },
    }

dispatch({ type: "ADD_ORDER", payload: order })
    dispatch({ type: "CLEAR_CART" })

toast({
      title: "Order Placed Successfully!",
      description: `Your order #${order.id} has been confirmed.`,
    })

router.push(`/orders/${order.id}`)
  }

return (
    <div className="min-h-screen bg-background">
      <Header />

<main className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-2xl font-bold mb-8">Checkout</h1>

{/* Progress Steps */}
          <div className="flex items-center justify-center mb-8">
            <div className="flex items-center space-x-4">
              {[1, 2, 3].map((stepNumber) => (
                <div key={stepNumber} className="flex items-center">
                  <div
                    className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold ${
                      step >= stepNumber ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
                    }`}
                  >
                    {stepNumber}
                  </div>
                  <span className={`ml-2 text-sm ${step >= stepNumber ? "text-foreground" : "text-muted-foreground"}`}>
                    {stepNumber === 1 ? "Shipping" : stepNumber === 2 ? "Payment" : "Review"}
                  </span>
                  {stepNumber < 3 && (
                    <div className={`w-12 h-0.5 mx-4 ${step > stepNumber ? "bg-primary" : "bg-muted"}`} />
                  )}
                </div>
              ))}
            </div>
          </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Main Content */}
            <div className="lg:col-span-2">
              {/* Step 1: Shipping Information */}
              {step === 1 && (
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Truck className="h-5 w-5" />
                      Shipping Information
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <div>
                        <Label htmlFor="firstName">First Name</Label>
                        <Input
                          id="firstName"
                          value={formData.firstName}
                          onChange={(e) => handleInputChange("firstName", e.target.value)}
                          required
                        />
                      </div>
                      <div>
                        <Label htmlFor="lastName">Last Name</Label>
                        <Input
                          id="lastName"
                          value={formData.lastName}
                          onChange={(e) => handleInputChange("lastName", e.target.value)}
                          required
                        />
                      </div>
                    </div>

<div>
                      <Label htmlFor="email">Email</Label>
                      <Input
                        id="email"
                        type="email"
                        value={formData.email}
                        onChange={(e) => handleInputChange("email", e.target.value)}
                        required
                      />
                    </div>

<div>
                      <Label htmlFor="phone">Phone Number</Label>
                      <Input
                        id="phone"
                        type="tel"
                        value={formData.phone}
                        onChange={(e) => handleInputChange("phone", e.target.value)}
                      />
                    </div>

<div>
                      <Label htmlFor="address">Address</Label>
                      <Input
                        id="address"
                        value={formData.address}
                        onChange={(e) => handleInputChange("address", e.target.value)}
                        required
                      />
                    </div>

<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                      <div>
                        <Label htmlFor="city">City</Label>
                        <Input
                          id="city"
                          value={formData.city}
                          onChange={(e) => handleInputChange("city", e.target.value)}
                          required
                        />
                      </div>
                      <div>
                        <Label htmlFor="zipCode">ZIP Code</Label>
                        <Input
                          id="zipCode"
                          value={formData.zipCode}
                          onChange={(e) => handleInputChange("zipCode", e.target.value)}
                          required
                        />
                      </div>
                      <div>
                        <Label htmlFor="country">Country</Label>
                        <Input
                          id="country"
                          value={formData.country}
                          onChange={(e) => handleInputChange("country", e.target.value)}
                          required
                        />
                      </div>
                    </div>

{/* Shipping Method */}
                    <div className="pt-4">
                      <Label className="text-base font-semibold">Shipping Method</Label>
                      <RadioGroup
                        value={formData.shippingMethod}
                        onValueChange={(value) => handleInputChange("shippingMethod", value)}
                        className="mt-2"
                      >
                        <div className="flex items-center space-x-2 p-3 border rounded-lg">
                          <RadioGroupItem value="standard" id="standard" />
                          <Label htmlFor="standard" className="flex-1">
                            <div className="flex justify-between">
                              <div>
                                <div className="font-medium">Standard Shipping</div>
                                <div className="text-sm text-muted-foreground">3-5 business days</div>
                              </div>
                              <div className="font-medium">{subtotal > 50 ? "Free" : "$9.99"}</div>
                            </div>
                          </Label>
                        </div>
                        <div className="flex items-center space-x-2 p-3 border rounded-lg">
                          <RadioGroupItem value="express" id="express" />
                          <Label htmlFor="express" className="flex-1">
                            <div className="flex justify-between">
                              <div>
                                <div className="font-medium">Express Shipping</div>
                                <div className="text-sm text-muted-foreground">1-2 business days</div>
                              </div>
                              <div className="font-medium">$15.99</div>
                            </div>
                          </Label>
                        </div>
                      </RadioGroup>
                    </div>

<Button onClick={() => setStep(2)} disabled={!validateStep(1)} className="w-full">
                      Continue to Payment
                    </Button>
                  </CardContent>
                </Card>
              )}

{/* Step 2: Payment Information */}
              {step === 2 && (
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <CreditCard className="h-5 w-5" />
                      Payment Information
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div>
                      <Label htmlFor="cardNumber">Card Number</Label>
                      <Input
                        id="cardNumber"
                        placeholder="1234 5678 9012 3456"
                        value={formData.cardNumber}
                        onChange={(e) => handleInputChange("cardNumber", e.target.value)}
                        required
                      />
                    </div>

<div className="grid grid-cols-2 gap-4">
                      <div>
                        <Label htmlFor="expiryDate">Expiry Date</Label>
                        <Input
                          id="expiryDate"
                          placeholder="MM/YY"
                          value={formData.expiryDate}
                          onChange={(e) => handleInputChange("expiryDate", e.target.value)}
                          required
                        />
                      </div>
                      <div>
                        <Label htmlFor="cvv">CVV</Label>
                        <Input
                          id="cvv"
                          placeholder="123"
                          value={formData.cvv}
                          onChange={(e) => handleInputChange("cvv", e.target.value)}
                          required
                        />
                      </div>
                    </div>

<div>
                      <Label htmlFor="cardName">Name on Card</Label>
                      <Input
                        id="cardName"
                        value={formData.cardName}
                        onChange={(e) => handleInputChange("cardName", e.target.value)}
                        required
                      />
                    </div>

<div className="flex items-center space-x-2">
                      <Checkbox
                        id="saveInfo"
                        checked={formData.saveInfo}
                        onCheckedChange={(checked) => handleInputChange("saveInfo", checked as boolean)}
                      />
                      <Label htmlFor="saveInfo" className="text-sm">
                        Save payment information for future purchases
                      </Label>
                    </div>

<div className="flex gap-2">
                      <Button variant="outline" onClick={() => setStep(1)} className="flex-1">
                        Back to Shipping
                      </Button>
                      <Button onClick={() => setStep(3)} disabled={!validateStep(2)} className="flex-1">
                        Review Order
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              )}

{/* Step 3: Order Review */}
              {step === 3 && (
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <User className="h-5 w-5" />
                      Order Review
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    {/* Shipping Address */}
                    <div>
                      <h3 className="font-semibold mb-2">Shipping Address</h3>
                      <div className="text-sm text-muted-foreground">
                        <p>
                          {formData.firstName} {formData.lastName}
                        </p>
                        <p>{formData.address}</p>
                        <p>
                          {formData.city}, {formData.zipCode}
                        </p>
                        <p>{formData.country}</p>
                      </div>
                    </div>

{/* Payment Method */}
                    <div>
                      <h3 className="font-semibold mb-2">Payment Method</h3>
                      <div className="text-sm text-muted-foreground">
                        <p>**** **** **** {formData.cardNumber.slice(-4)}</p>
                        <p>{formData.cardName}</p>
                      </div>
                    </div>

{/* Order Items */}
                    <div>
                      <h3 className="font-semibold mb-2">Order Items</h3>
                      <div className="space-y-2">
                        {state.cart.map((item) => (
                          <div key={item.id} className="flex justify-between text-sm">
                            <span>
                              {item.name} × {item.quantity}
                            </span>
                            <span>${(item.price * item.quantity).toFixed(2)}</span>
                          </div>
                        ))}
                      </div>
                    </div>

<div className="flex items-center space-x-2">
                      <Checkbox
                        id="newsletter"
                        checked={formData.newsletter}
                        onCheckedChange={(checked) => handleInputChange("newsletter", checked as boolean)}
                      />
                      <Label htmlFor="newsletter" className="text-sm">
                        Subscribe to our newsletter for updates and exclusive offers
                      </Label>
                    </div>

<div className="flex gap-2">
                      <Button variant="outline" onClick={() => setStep(2)} className="flex-1">
                        Back to Payment
                      </Button>
                      <Button onClick={handlePlaceOrder} className="flex-1">
                        Place Order
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              )}
            </div>

{/* Order Summary Sidebar */}
            <div>
              <Card className="sticky top-4">
                <CardHeader>
                  <CardTitle>Order Summary</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    {state.cart.map((item) => (
                      <div key={item.id} className="flex justify-between text-sm">
                        <span className="truncate">
                          {item.name} × {item.quantity}
                        </span>
                        <span>${(item.price * item.quantity).toFixed(2)}</span>
                      </div>
                    ))}
                  </div>

<div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span>Subtotal</span>
                      <span>${subtotal.toFixed(2)}</span>
                    </div>
                    <div className="flex justify-between">
                      <span>Shipping</span>
                      <span>{shippingCost === 0 ? "Free" : `$${shippingCost.toFixed(2)}`}</span>
                    </div>
                    <div className="flex justify-between">
                      <span>Tax</span>
                      <span>${tax.toFixed(2)}</span>
                    </div>
                  </div>

<div className="flex justify-between font-bold">
                    <span>Total</span>
                    <span>${total.toFixed(2)}</span>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/login/page.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { Eye, EyeOff } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Header } from "@/components/layout/header"
import { Footer } from "@/components/layout/footer"
import { useApp } from "@/app/providers"
import { useToast } from "@/hooks/use-toast"

export default function LoginPage() {
  const { dispatch } = useApp()
  const router = useRouter()
  const { toast } = useToast()
  const [showPassword, setShowPassword] = useState(false)
  const [formData, setFormData] = useState({
    email: "",
    password: "",
  })

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

// Mock authentication - in a real app, this would call an API
    const mockUsers = [
      {
        id: "1",
        email: "admin@example.com",
        name: "Admin User",
        role: "admin" as const,
        wishlist: [],
        recentlyViewed: [],
      },
      {
        id: "2",
        email: "user@example.com",
        name: "John Doe",
        role: "customer" as const,
        wishlist: [],
        recentlyViewed: [],
      },
    ]

const user = mockUsers.find((u) => u.email === formData.email)

if (user && formData.password === "password") {
      dispatch({ type: "SET_USER", payload: user })
      toast({
        title: "Login Successful",
        description: `Welcome back, ${user.name}!`,
      })
      router.push("/")
    } else {
      toast({
        title: "Login Failed",
        description: "Invalid email or password. Try admin@example.com or user@example.com with password 'password'",
        variant: "destructive",
      })
    }
  }

return (
    <div className="min-h-screen bg-background">
      <Header />

<main className="container mx-auto px-4 py-8">
        <div className="max-w-md mx-auto">
          <Card>
            <CardHeader className="text-center">
              <CardTitle className="text-2xl">Welcome Back</CardTitle>
              <CardDescription>Sign in to your account to continue shopping</CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSubmit} className="space-y-4">
                <div>
                  <Label htmlFor="email">Email</Label>
                  <Input
                    id="email"
                    type="email"
                    value={formData.email}
                    onChange={(e) => setFormData((prev) => ({ ...prev, email: e.target.value }))}
                    required
                  />
                </div>

<div>
                  <Label htmlFor="password">Password</Label>
                  <div className="relative">
                    <Input
                      id="password"
                      type={showPassword ? "text" : "password"}
                      value={formData.password}
                      onChange={(e) => setFormData((prev) => ({ ...prev, password: e.target.value }))}
                      required
                    />
                    <Button
                      type="button"
                      variant="ghost"
                      size="icon"
                      className="absolute right-0 top-0 h-full px-3"
                      onClick={() => setShowPassword(!showPassword)}
                    >
                      {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                    </Button>
                  </div>
                </div>

<div className="mt-6">
                <div className="text-center text-sm text-muted-foreground mb-4">Demo Accounts:</div>
                <div className="space-y-2 text-xs text-muted-foreground">
                  <div>Admin: admin@example.com / password</div>
                  <div>Customer: user@example.com / password</div>
                </div>
              </div>

<div className="text-center">
                <p className="text-sm text-muted-foreground">
                  Don't have an account?{" "}
                  <Link href="/register" className="text-primary hover:underline">
                    Sign up
                  </Link>
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/register/page.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { Eye, EyeOff } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, 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 { Separator } from "@/components/ui/separator"
import { Header } from "@/components/layout/header"
import { Footer } from "@/components/layout/footer"
import { useApp, type User } from "@/app/providers"
import { useToast } from "@/hooks/use-toast"

export default function RegisterPage() {
  const { dispatch } = useApp()
  const router = useRouter()
  const { toast } = useToast()
  const [showPassword, setShowPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
    confirmPassword: "",
    agreeToTerms: false,
    newsletter: false,
  })

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

if (formData.password !== formData.confirmPassword) {
      toast({
        title: "Password Mismatch",
        description: "Passwords do not match. Please try again.",
        variant: "destructive",
      })
      return
    }

if (!formData.agreeToTerms) {
      toast({
        title: "Terms Required",
        description: "Please agree to the terms and conditions.",
        variant: "destructive",
      })
      return
    }

// Mock registration - in a real app, this would call an API
    const newUser: User = {
      id: Date.now().toString(),
      email: formData.email,
      name: formData.name,
      role: "customer",
      wishlist: [],
      recentlyViewed: [],
    }

dispatch({ type: "SET_USER", payload: newUser })
    toast({
      title: "Registration Successful",
      description: `Welcome to ModernStore, ${newUser.name}!`,
    })
    router.push("/")
  }

return (
    <div className="min-h-screen bg-background">
      <Header />

<main className="container mx-auto px-4 py-8">
        <div className="max-w-md mx-auto">
          <Card>
            <CardHeader className="text-center">
              <CardTitle className="text-2xl">Create Account</CardTitle>
              <CardDescription>Join ModernStore and start shopping today</CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSubmit} className="space-y-4">
                <div>
                  <Label htmlFor="name">Full Name</Label>
                  <Input
                    id="name"
                    value={formData.name}
                    onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
                    required
                  />
                </div>

<div>
                  <Label htmlFor="email">Email</Label>
                  <Input
                    id="email"
                    type="email"
                    value={formData.email}
                    onChange={(e) => setFormData((prev) => ({ ...prev, email: e.target.value }))}
                    required
                  />
                </div>

<div>
                  <Label htmlFor="confirmPassword">Confirm Password</Label>
                  <div className="relative">
                    <Input
                      id="confirmPassword"
                      type={showConfirmPassword ? "text" : "password"}
                      value={formData.confirmPassword}
                      onChange={(e) => setFormData((prev) => ({ ...prev, confirmPassword: e.target.value }))}
                      required
                    />
                    <Button
                      type="button"
                      variant="ghost"
                      size="icon"
                      className="absolute right-0 top-0 h-full px-3"
                      onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                    >
                      {showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                    </Button>
                  </div>
                </div>

<div className="space-y-3">
                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="agreeToTerms"
                      checked={formData.agreeToTerms}
                      onCheckedChange={(checked) =>
                        setFormData((prev) => ({ ...prev, agreeToTerms: checked as boolean }))
                      }
                    />
                    <Label htmlFor="agreeToTerms" className="text-sm">
                      I agree to the{" "}
                      <Link href="/terms" className="text-primary hover:underline">
                        Terms of Service
                      </Link>{" "}
                      and{" "}
                      <Link href="/privacy" className="text-primary hover:underline">
                        Privacy Policy
                      </Link>
                    </Label>
                  </div>

<div className="flex items-center space-x-2">
                    <Checkbox
                      id="newsletter"
                      checked={formData.newsletter}
                      onCheckedChange={(checked) =>
                        setFormData((prev) => ({ ...prev, newsletter: checked as boolean }))
                      }
                    />
                    <Label htmlFor="newsletter" className="text-sm">
                      Subscribe to our newsletter for updates and exclusive offers
                    </Label>
                  </div>
                </div>

<Button type="submit" className="w-full">
                  Create Account
                </Button>
              </form>

<div className="text-center">
                <p className="text-sm text-muted-foreground">
                  Already have an account?{" "}
                  <Link href="/login" className="text-primary hover:underline">
                    Sign in
                  </Link>
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Plus, Edit, Trash2, Package, ShoppingCart, TrendingUp } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Header } from "@/components/layout/header"
import { Footer } from "@/components/layout/footer"
import { useApp, type Product } from "@/app/providers"
import { useToast } from "@/hooks/use-toast"

export default function AdminPage() {
  const { state, dispatch } = useApp()
  const router = useRouter()
  const { toast } = useToast()
  const [mounted, setMounted] = useState(false)
  const [isProductDialogOpen, setIsProductDialogOpen] = useState(false)
  const [editingProduct, setEditingProduct] = useState<Product | null>(null)
  const [productForm, setProductForm] = useState({
    name: "",
    description: "",
    price: "",
    originalPrice: "",
    category: "",
    tags: "",
    stock: "",
    featured: false,
    onSale: false,
  })

useEffect(() => {
    setMounted(true)
    if (!state.user || state.user.role !== "admin") {
      router.push("/login")
    }
  }, [state.user, router])

if (!mounted || !state.user || state.user.role !== "admin") {
    return null
  }

const resetForm = () => {
    setProductForm({
      name: "",
      description: "",
      price: "",
      originalPrice: "",
      category: "",
      tags: "",
      stock: "",
      featured: false,
      onSale: false,
    })
    setEditingProduct(null)
  }

const handleEditProduct = (product: Product) => {
    setEditingProduct(product)
    setProductForm({
      name: product.name,
      description: product.description,
      price: product.price.toString(),
      originalPrice: product.originalPrice?.toString() || "",
      category: product.category,
      tags: product.tags.join(", "),
      stock: product.stock.toString(),
      featured: product.featured,
      onSale: product.onSale,
    })
    setIsProductDialogOpen(true)
  }

const handleSubmitProduct = () => {
    if (!productForm.name || !productForm.description || !productForm.price || !productForm.category) {
      toast({
        title: "Missing Fields",
        description: "Please fill in all required fields.",
        variant: "destructive",
      })
      return
    }

const productData: Product = {
      id: editingProduct?.id || Date.now().toString(),
      name: productForm.name,
      description: productForm.description,
      price: Number.parseFloat(productForm.price),
      originalPrice: productForm.originalPrice ? Number.parseFloat(productForm.originalPrice) : undefined,
      images: ["/placeholder.svg?height=400&width=400"],
      category: productForm.category,
      tags: productForm.tags
        .split(",")
        .map((tag) => tag.trim())
        .filter(Boolean),
      variants: { color: ["Black", "White"], size: ["S", "M", "L"] },
      stock: Number.parseInt(productForm.stock) || 0,
      rating: editingProduct?.rating || 4.5,
      reviewCount: editingProduct?.reviewCount || 0,
      featured: productForm.featured,
      onSale: productForm.onSale,
      saleEndDate: productForm.onSale ? new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString() : undefined,
    }

if (editingProduct) {
      dispatch({ type: "UPDATE_PRODUCT", payload: productData })
      toast({
        title: "Product Updated",
        description: `${productData.name} has been updated successfully.`,
      })
    } else {
      dispatch({ type: "ADD_PRODUCT", payload: productData })
      toast({
        title: "Product Added",
        description: `${productData.name} has been added successfully.`,
      })
    }

setIsProductDialogOpen(false)
    resetForm()
  }

const handleDeleteProduct = (productId: string) => {
    dispatch({ type: "DELETE_PRODUCT", payload: productId })
    toast({
      title: "Product Deleted",
      description: "Product has been deleted successfully.",
    })
  }

const totalRevenue = state.orders.reduce((sum, order) => sum + order.total, 0)
  const totalOrders = state.orders.length
  const totalProducts = state.products.length
  const lowStockProducts = state.products.filter((p) => p.stock <= 10).length

return (
    <div className="min-h-screen bg-background">
      <Header />

<main className="container mx-auto px-4 py-8">
        <div className="flex items-center justify-between mb-8">
          <div>
            <h1 className="text-3xl font-bold">Admin Dashboard</h1>
            <p className="text-muted-foreground">Manage your store and products</p>
          </div>
        </div>

{/* Stats Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
              <TrendingUp className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">${totalRevenue.toFixed(2)}</div>
              <p className="text-xs text-muted-foreground">From {totalOrders} orders</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Orders</CardTitle>
              <ShoppingCart className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{totalOrders}</div>
              <p className="text-xs text-muted-foreground">All time orders</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Products</CardTitle>
              <Package className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{totalProducts}</div>
              <p className="text-xs text-muted-foreground">Active products</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Low Stock Alert</CardTitle>
              <Package className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{lowStockProducts}</div>
              <p className="text-xs text-muted-foreground">Products with ≤10 stock</p>
            </CardContent>
          </Card>
        </div>

{/* Products Management */}
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <div>
                <CardTitle>Products</CardTitle>
                <CardDescription>Manage your product inventory</CardDescription>
              </div>
              <Dialog open={isProductDialogOpen} onOpenChange={setIsProductDialogOpen}>
                <DialogTrigger asChild>
                  <Button onClick={resetForm}>
                    <Plus className="h-4 w-4 mr-2" />
                    Add Product
                  </Button>
                </DialogTrigger>
                <DialogContent className="max-w-2xl">
                  <DialogHeader>
                    <DialogTitle>{editingProduct ? "Edit Product" : "Add New Product"}</DialogTitle>
                    <DialogDescription>
                      {editingProduct ? "Update product information" : "Create a new product for your store"}
                    </DialogDescription>
                  </DialogHeader>
                  <div className="grid gap-4 py-4">
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <Label htmlFor="name">Product Name</Label>
                        <Input
                          id="name"
                          value={productForm.name}
                          onChange={(e) => setProductForm((prev) => ({ ...prev, name: e.target.value }))}
                        />
                      </div>
                      <div>
                        <Label htmlFor="category">Category</Label>
                        <Select
                          value={productForm.category}
                          onValueChange={(value) => setProductForm((prev) => ({ ...prev, category: value }))}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select category" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="Electronics">Electronics</SelectItem>
                            <SelectItem value="Clothing">Clothing</SelectItem>
                            <SelectItem value="Home">Home</SelectItem>
                            <SelectItem value="Sports">Sports</SelectItem>
                            <SelectItem value="Books">Books</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>

<div>
                      <Label htmlFor="description">Description</Label>
                      <Textarea
                        id="description"
                        value={productForm.description}
                        onChange={(e) => setProductForm((prev) => ({ ...prev, description: e.target.value }))}
                      />
                    </div>

<div className="grid grid-cols-3 gap-4">
                      <div>
                        <Label htmlFor="price">Price</Label>
                        <Input
                          id="price"
                          type="number"
                          step="0.01"
                          value={productForm.price}
                          onChange={(e) => setProductForm((prev) => ({ ...prev, price: e.target.value }))}
                        />
                      </div>
                      <div>
                        <Label htmlFor="originalPrice">Original Price (Optional)</Label>
                        <Input
                          id="originalPrice"
                          type="number"
                          step="0.01"
                          value={productForm.originalPrice}
                          onChange={(e) => setProductForm((prev) => ({ ...prev, originalPrice: e.target.value }))}
                        />
                      </div>
                      <div>
                        <Label htmlFor="stock">Stock</Label>
                        <Input
                          id="stock"
                          type="number"
                          value={productForm.stock}
                          onChange={(e) => setProductForm((prev) => ({ ...prev, stock: e.target.value }))}
                        />
                      </div>
                    </div>

<div>
                      <Label htmlFor="tags">Tags (comma separated)</Label>
                      <Input
                        id="tags"
                        value={productForm.tags}
                        onChange={(e) => setProductForm((prev) => ({ ...prev, tags: e.target.value }))}
                        placeholder="e.g. wireless, premium, bestseller"
                      />
                    </div>

<div className="flex gap-4">
                      <div className="flex items-center space-x-2">
                        <Checkbox
                          id="featured"
                          checked={productForm.featured}
                          onCheckedChange={(checked) =>
                            setProductForm((prev) => ({ ...prev, featured: checked as boolean }))
                          }
                        />
                        <Label htmlFor="featured">Featured Product</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox
                          id="onSale"
                          checked={productForm.onSale}
                          onCheckedChange={(checked) =>
                            setProductForm((prev) => ({ ...prev, onSale: checked as boolean }))
                          }
                        />
                        <Label htmlFor="onSale">On Sale</Label>
                      </div>
                    </div>
                  </div>
                  <div className="flex justify-end gap-2">
                    <Button variant="outline" onClick={() => setIsProductDialogOpen(false)}>
                      Cancel
                    </Button>
                    <Button onClick={handleSubmitProduct}>{editingProduct ? "Update Product" : "Add Product"}</Button>
                  </div>
                </DialogContent>
              </Dialog>
            </div>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Name</TableHead>
                  <TableHead>Category</TableHead>
                  <TableHead>Price</TableHead>
                  <TableHead>Stock</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {state.products.map((product) => (
                  <TableRow key={product.id}>
                    <TableCell className="font-medium">{product.name}</TableCell>
                    <TableCell>{product.category}</TableCell>
                    <TableCell>${product.price.toFixed(2)}</TableCell>
                    <TableCell>
                      <span className={product.stock <= 10 ? "text-destructive font-semibold" : ""}>
                        {product.stock}
                      </span>
                    </TableCell>
                    <TableCell>
                      <div className="flex gap-1">
                        {product.featured && <Badge variant="secondary">Featured</Badge>}
                        {product.onSale && <Badge variant="destructive">Sale</Badge>}
                        {product.stock === 0 && <Badge variant="outline">Out of Stock</Badge>}
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="flex gap-2">
                        <Button variant="ghost" size="icon" onClick={() => handleEditProduct(product)}>
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => handleDeleteProduct(product.id)}
                          className="text-destructive hover:text-destructive"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/theme-toggle.tsx"
"use client"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"

import { Button } from "@/components/ui/button"

export function ThemeToggle() {
  const { theme, setTheme } = useTheme()

return (
    <Button variant="ghost" size="icon" onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
      <span className="sr-only">Toggle theme</span>
    </Button>
  )
}
[V0_FILE]typescriptreact:file="hooks/use-toast.ts"
"use client"

import * as React from "react"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: React.ReactElement
  variant?: "default" | "destructive"
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType["ADD_TOAST"]
      toast: ToasterToast
    }
  | {
      type: ActionType["UPDATE_TOAST"]
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType["DISMISS_TOAST"]
      toastId?: ToasterToast["id"]
    }
  | {
      type: ActionType["REMOVE_TOAST"]
      toastId?: ToasterToast["id"]
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "ADD_TOAST":
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t,
        ),
      }
    }
    case "REMOVE_TOAST":
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

export { useToast, toast }
[V0_FILE]css:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;
  }

.dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}</article></body></html>