[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Link from "next/link" import { ShoppingBag, Star } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import FeaturedProducts from "@/components/featured-products" import HeroSection from "@/components/hero-section" import CategorySection from "@/components/category-section" export default function Home() { return (

Why Choose Shivam Toys & Gifts?

We provide high-quality toys and gifts that bring joy to children and adults alike.

Free Shipping

On orders over ₹500

Quality Products

Curated selection of toys and gifts

24/7 Support

Always here to help you

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Menu, Search, ShoppingCart, User, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" import { useCart } from "@/components/cart-provider" export default function Header() { const [isSearchOpen, setIsSearchOpen] = useState(false) const { cart } = useCart() const cartItemsCount = cart.reduce((total, item) => total + item.quantity, 0) return (

Shivam Toys & Gifts

{isSearchOpen ? (

) : ( )}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import Link from "next/link" import { Facebook, Instagram, Twitter } from "lucide-react" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" export default function HeroSection() { return (

Discover Joy with Shivam Toys & Gifts

Explore our curated collection of toys and gifts for all ages. From educational toys to unique gifts, we have something special for everyone.

) } [V0_FILE]typescriptreact:file="components/category-section.tsx" isMerged="true" import Link from "next/link" import Image from "next/image" import { Card, CardContent } from "@/components/ui/card" const categories = [ { id: 1, name: "Educational Toys", image: "/placeholder.svg?height=200&width=200", slug: "educational-toys", }, { id: 2, name: "Outdoor Toys", image: "/placeholder.svg?height=200&width=200", slug: "outdoor-toys", }, { id: 3, name: "Board Games", image: "/placeholder.svg?height=200&width=200", slug: "board-games", }, { id: 4, name: "Plush Toys", image: "/placeholder.svg?height=200&width=200", slug: "plush-toys", }, ] export default function CategorySection() { return (

Shop by Category

{categories.map((category) => (

{category.name}

))}

) } [V0_FILE]typescriptreact:file="components/cart-provider.tsx" isMerged="true" "use client" import { createContext, useContext, useState, useEffect, type ReactNode } from "react" export type CartItem = { id: number name: string price: number image: string quantity: number } type CartContextType = { cart: CartItem[] addToCart: (item: CartItem) => void removeFromCart: (id: number) => void updateQuantity: (id: number, quantity: number) => void clearCart: () => void subtotal: number } const CartContext = createContext(undefined) export function CartProvider({ children }: { children: ReactNode }) { const [cart, setCart] = useState([]) // Load cart from localStorage on initial render useEffect(() => { const savedCart = localStorage.getItem("cart") if (savedCart) { try { setCart(JSON.parse(savedCart)) } catch (error) { console.error("Failed to parse cart from localStorage:", error) } } }, []) // Save cart to localStorage whenever it changes useEffect(() => { localStorage.setItem("cart", JSON.stringify(cart)) }, [cart]) const addToCart = (item: CartItem) => { setCart((prevCart) => { const existingItem = prevCart.find((cartItem) => cartItem.id === item.id) if (existingItem) { // If item already exists, update quantity return prevCart.map((cartItem) => cartItem.id === item.id ? { ...cartItem, quantity: cartItem.quantity + item.quantity } : cartItem, ) } else { // Otherwise add new item return [...prevCart, item] } }) } const removeFromCart = (id: number) => { setCart((prevCart) => prevCart.filter((item) => item.id !== id)) } const updateQuantity = (id: number, quantity: number) => { if (quantity <= 0) { removeFromCart(id) return } setCart((prevCart) => prevCart.map((item) => (item.id === id ? { ...item, quantity } : item))) } const clearCart = () => { setCart([]) } const subtotal = cart.reduce((total, item) => total + item.price * item.quantity, 0) return ( {children} ) } export function useCart() { const context = useContext(CartContext) if (context === undefined) { throw new Error("useCart must be used within a CartProvider") } return context } [V0_FILE]typescriptreact:file="app/products/page.tsx" isMerged="true" import { Suspense } from "react" import ProductList from "@/components/product-list" import ProductFilters from "@/components/product-filters" import ProductsLoading from "@/components/products-loading" export const metadata = { title: "Products | Shivam Toys & Gifts", description: "Browse our collection of toys and gifts", } export default function ProductsPage() { return (

All Products

) } [V0_FILE]typescriptreact:file="components/product-list.tsx" isMerged="true" import Link from "next/link" import Image from "next/image" import { Card, CardContent, CardFooter } from "@/components/ui/card" import AddToCartButton from "@/components/add-to-cart-button" // This would normally come from an API or database const products = [ { id: 1, name: "Educational Building Blocks", price: 1299, image: "/placeholder.svg?height=300&width=300", slug: "educational-building-blocks", category: "Educational Toys", }, { id: 2, name: "Plush Teddy Bear", price: 799, image: "/placeholder.svg?height=300&width=300", slug: "plush-teddy-bear", category: "Plush Toys", }, { id: 3, name: "Remote Control Car", price: 1499, image: "/placeholder.svg?height=300&width=300", slug: "remote-control-car", category: "Outdoor Toys", }, { id: 4, name: "Chess Set", price: 999, image: "/placeholder.svg?height=300&width=300", slug: "chess-set", category: "Board Games", }, { id: 5, name: "Wooden Puzzle", price: 699, image: "/placeholder.svg?height=300&width=300", slug: "wooden-puzzle", category: "Educational Toys", }, { id: 6, name: "Dollhouse Set", price: 2499, image: "/placeholder.svg?height=300&width=300", slug: "dollhouse-set", category: "Dolls & Accessories", }, { id: 7, name: "Science Experiment Kit", price: 1199, image: "/placeholder.svg?height=300&width=300", slug: "science-experiment-kit", category: "Educational Toys", }, { id: 8, name: "Art & Craft Set", price: 899, image: "/placeholder.svg?height=300&width=300", slug: "art-craft-set", category: "Creative Toys", }, ] export default function ProductList() { return (

{products.map((product) => (

{product.category}

{product.name}

₹{product.price.toLocaleString()}

))}

) } [V0_FILE]typescriptreact:file="components/product-filters.tsx" isMerged="true" "use client" import { useState } from "react" import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" const categories = [ { id: "educational-toys", label: "Educational Toys" }, { id: "outdoor-toys", label: "Outdoor Toys" }, { id: "board-games", label: "Board Games" }, { id: "plush-toys", label: "Plush Toys" }, { id: "dolls-accessories", label: "Dolls & Accessories" }, { id: "creative-toys", label: "Creative Toys" }, ] const ageGroups = [ { id: "0-2", label: "0-2 years" }, { id: "3-5", label: "3-5 years" }, { id: "6-8", label: "6-8 years" }, { id: "9-12", label: "9-12 years" }, { id: "13+", label: "13+ years" }, ] export default function ProductFilters() { const [priceRange, setPriceRange] = useState([0, 5000]) return (

Filters

{product.name}

{Array.from({ length: 5 }).map((_, i) => ( ))}

{product.rating} ({product.reviewCount} reviews)

₹{product.price.toLocaleString()}

{product.description}

Shipping

Free shipping on orders over ₹500

Estimated delivery: 3-5 business days

Details Specifications Reviews

Features

{feature}

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

{key} {value}

))}

Customer Reviews

This product has {product.reviewCount} reviews with an average rating of {product.rating} stars.

Related Products

) } [V0_FILE]typescriptreact:file="components/related-products.tsx" isMerged="true" import Link from "next/link" import Image from "next/image" import { Card, CardContent, CardFooter } from "@/components/ui/card" import AddToCartButton from "@/components/add-to-cart-button" // This would normally come from an API or database const products = [ { id: 1, name: "Educational Building Blocks", price: 1299, image: "/placeholder.svg?height=300&width=300", slug: "educational-building-blocks", category: "Educational Toys", }, { id: 2, name: "Plush Teddy Bear", price: 799, image: "/placeholder.svg?height=300&width=300", slug: "plush-teddy-bear", category: "Plush Toys", }, { id: 3, name: "Remote Control Car", price: 1499, image: "/placeholder.svg?height=300&width=300", slug: "remote-control-car", category: "Outdoor Toys", }, { id: 4, name: "Chess Set", price: 999, image: "/placeholder.svg?height=300&width=300", slug: "chess-set", category: "Board Games", }, { id: 7, name: "Science Experiment Kit", price: 1199, image: "/placeholder.svg?height=300&width=300", slug: "science-experiment-kit", category: "Educational Toys", }, ] export default function RelatedProducts({ currentProductId, category, }: { currentProductId: number category: string }) { // Filter products by category and exclude current product const relatedProducts = products .filter((product) => product.category === category && product.id !== currentProductId) .slice(0, 4) return (

{relatedProducts.map((product) => (

{product.category}

{product.name}

₹{product.price.toLocaleString()}

))}

) } [V0_FILE]typescriptreact:file="app/cart/page.tsx" isMerged="true" "use client" import Link from "next/link" import Image from "next/image" import { Minus, Plus, ShoppingBag, Trash2 } from "lucide-react" import { Button } from "@/components/ui/button" import { useCart } from "@/components/cart-provider" import { Separator } from "@/components/ui/separator" import { Input } from "@/components/ui/input" export default function CartPage() { const { cart, removeFromCart, updateQuantity, subtotal } = useCart() if (cart.length === 0) { return (

Your cart is empty

Looks like you haven't added anything to your cart yet.

) } return (

Shopping Cart

Product

Price

Quantity

Total

{cart.map((item) => (

{item.name}

Price

₹{item.price.toLocaleString()}

Quantity

updateQuantity(item.id, Number.parseInt(e.target.value) || 1)} className="h-8 w-12 text-center border-0" />

Total

₹{(item.price * item.quantity).toLocaleString()}

{cart.indexOf(item) < cart.length - 1 && }

))}

Order Summary

Subtotal ₹{subtotal.toLocaleString()}

Shipping {subtotal > 500 ? "Free" : "₹50"}

Total ₹{(subtotal > 500 ? subtotal : subtotal + 50).toLocaleString()}

Continue Shopping

) } [V0_FILE]typescriptreact:file="app/checkout/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { ChevronRight, CreditCard } from "lucide-react" import { Button } from "@/components/ui/button" 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 { Textarea } from "@/components/ui/textarea" import { useCart } from "@/components/cart-provider" import { useToast } from "@/components/ui/use-toast" import { Toaster } from "@/components/ui/toaster" export default function CheckoutPage() { const { cart, subtotal, clearCart } = useCart() const { toast } = useToast() const [loading, setLoading] = useState(false) if (cart.length === 0) { return (

Your cart is empty

You need to add items to your cart before checking out.

) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() setLoading(true) // Simulate order processing setTimeout(() => { toast({ title: "Order placed successfully!", description: "Thank you for your purchase. Your order will be processed shortly.", }) clearCart() setLoading(false) // Redirect to success page window.location.href = "/checkout/success" }, 2000) } return (

Home Cart Checkout

Checkout

Contact Information

First Name

Last Name

Phone

Shipping Address

Street Address

City

State

PIN Code

Country

Payment Method

Credit/Debit Card

UPI

Cash on Delivery

Name on Card

Card Number

Expiry Date

CVV

Additional Information

Order Notes (Optional)

</div>
              </div>

<Button type="submit" size="lg" className="w-full" disabled={loading}>
                {loading ? (
                  <span className="flex items-center gap-1">
                    <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
                    Processing...
                  </span>
                ) : (
                  "Place Order"
                )}
              </Button>
            </div>
          </form>
        </div>

<div>
          <div className="border rounded-lg p-6 sticky top-20">
            <h2 className="text-xl font-semibold mb-6">Order Summary</h2>

<div className="space-y-4">
              {cart.map((item) => (
                <div key={item.id} className="flex justify-between">
                  <div className="flex items-center gap-2">
                    <span className="bg-muted rounded-full h-6 w-6 flex items-center justify-center text-xs">
                      {item.quantity}
                    </span>
                    <span className="line-clamp-1">{item.name}</span>
                  </div>
                  <span>₹{(item.price * item.quantity).toLocaleString()}</span>
                </div>
              ))}

<div className="flex justify-between">
                <span className="text-muted-foreground">Subtotal</span>
                <span>₹{subtotal.toLocaleString()}</span>
              </div>

<div className="flex justify-between">
                <span className="text-muted-foreground">Shipping</span>
                <span>{subtotal > 500 ? "Free" : "₹50"}</span>
              </div>

<div className="flex justify-between font-medium text-lg">
                <span>Total</span>
                <span>₹{(subtotal > 500 ? subtotal : subtotal + 50).toLocaleString()}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Toaster />
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/checkout/success/page.tsx" isMerged="true"
import Link from "next/link"
import { CheckCircle } from "lucide-react"
import { Button } from "@/components/ui/button"

export const metadata = {
  title: "Order Successful | Shivam Toys & Gifts",
  description: "Your order has been placed successfully",
}

export default function OrderSuccessPage() {
  return (
    <div className="container mx-auto px-4 py-16 text-center">
      <div className="max-w-md mx-auto">
        <CheckCircle className="h-16 w-16 mx-auto mb-6 text-green-500" />
        <h1 className="text-3xl font-bold mb-4">Order Successful!</h1>
        <p className="text-muted-foreground mb-8">
          Thank you for your purchase. Your order has been placed successfully and will be processed shortly. We have
          sent a confirmation email with your order details.
        </p>
        <div className="space-y-4">
          <Button asChild size="lg" className="w-full">
            <Link href="/products">Continue Shopping</Link>
          </Button>
          <Button variant="outline" asChild size="lg" className="w-full">
            <Link href="/account/orders">View My Orders</Link>
          </Button>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { BarChart3, Box, DollarSign, Package, Plus, Search, ShoppingCart, Users } 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 { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

// Mock data for admin dashboard
const recentOrders = [
  { id: "ORD-001", customer: "Rahul Sharma", date: "2023-05-15", status: "Delivered", total: 2499 },
  { id: "ORD-002", customer: "Priya Patel", date: "2023-05-14", status: "Processing", total: 1299 },
  { id: "ORD-003", customer: "Amit Singh", date: "2023-05-13", status: "Shipped", total: 3499 },
  { id: "ORD-004", customer: "Neha Gupta", date: "2023-05-12", status: "Delivered", total: 799 },
  { id: "ORD-005", customer: "Vikram Joshi", date: "2023-05-11", status: "Processing", total: 1999 },
]

const products = [
  {
    id: 1,
    name: "Educational Building Blocks",
    price: 1299,
    image: "/placeholder.svg?height=50&width=50",
    stock: 25,
    category: "Educational Toys",
  },
  {
    id: 2,
    name: "Plush Teddy Bear",
    price: 799,
    image: "/placeholder.svg?height=50&width=50",
    stock: 42,
    category: "Plush Toys",
  },
  {
    id: 3,
    name: "Remote Control Car",
    price: 1499,
    image: "/placeholder.svg?height=50&width=50",
    stock: 18,
    category: "Outdoor Toys",
  },
  {
    id: 4,
    name: "Chess Set",
    price: 999,
    image: "/placeholder.svg?height=50&width=50",
    stock: 30,
    category: "Board Games",
  },
  {
    id: 5,
    name: "Wooden Puzzle",
    price: 699,
    image: "/placeholder.svg?height=50&width=50",
    stock: 15,
    category: "Educational Toys",
  },
]

export default function AdminDashboard() {
  const [activeTab, setActiveTab] = useState("overview")

return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-10 flex h-16 items-center gap-4 border-b bg-background px-6">
        <Link href="/admin" className="flex items-center gap-2 font-semibold">
          <Package className="h-6 w-6" />
          <span>Shivam Toys Admin</span>
        </Link>
        <div className="ml-auto flex items-center gap-4">
          <form className="relative">
            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input type="search" placeholder="Search..." className="w-[200px] pl-8 md:w-[300px] lg:w-[400px]" />
          </form>
          <Button variant="outline" size="sm" asChild>
            <Link href="/">View Store</Link>
          </Button>
        </div>
      </header>

<div className="grid flex-1 md:grid-cols-[220px_1fr]">
        <aside className="hidden border-r md:block">
          <div className="flex h-full flex-col gap-2 p-4">
            <Button
              variant={activeTab === "overview" ? "default" : "ghost"}
              className="justify-start"
              onClick={() => setActiveTab("overview")}
            >
              <BarChart3 className="mr-2 h-4 w-4" />
              Overview
            </Button>
            <Button
              variant={activeTab === "orders" ? "default" : "ghost"}
              className="justify-start"
              onClick={() => setActiveTab("orders")}
            >
              <ShoppingCart className="mr-2 h-4 w-4" />
              Orders
            </Button>
            <Button
              variant={activeTab === "products" ? "default" : "ghost"}
              className="justify-start"
              onClick={() => setActiveTab("products")}
            >
              <Box className="mr-2 h-4 w-4" />
              Products
            </Button>
            <Button
              variant={activeTab === "customers" ? "default" : "ghost"}
              className="justify-start"
              onClick={() => setActiveTab("customers")}
            >
              <Users className="mr-2 h-4 w-4" />
              Customers
            </Button>
          </div>
        </aside>

<main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
          <Tabs value={activeTab} onValueChange={setActiveTab} className="md:hidden mb-4">
            <TabsList className="grid grid-cols-4">
              <TabsTrigger value="overview">Overview</TabsTrigger>
              <TabsTrigger value="orders">Orders</TabsTrigger>
              <TabsTrigger value="products">Products</TabsTrigger>
              <TabsTrigger value="customers">Customers</TabsTrigger>
            </TabsList>
          </Tabs>

{activeTab === "overview" && (
            <div className="space-y-8">
              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                <Card>
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
                    <DollarSign className="h-4 w-4 text-muted-foreground" />
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">₹45,231</div>
                    <p className="text-xs text-muted-foreground">+20.1% from last month</p>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm font-medium">Orders</CardTitle>
                    <ShoppingCart className="h-4 w-4 text-muted-foreground" />
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">+123</div>
                    <p className="text-xs text-muted-foreground">+15% from last month</p>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm font-medium">Products</CardTitle>
                    <Box className="h-4 w-4 text-muted-foreground" />
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">52</div>
                    <p className="text-xs text-muted-foreground">+12 new 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">Customers</CardTitle>
                    <Users className="h-4 w-4 text-muted-foreground" />
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">+573</div>
                    <p className="text-xs text-muted-foreground">+201 since last month</p>
                  </CardContent>
                </Card>
              </div>

<Card>
                <CardHeader>
                  <CardTitle>Recent Orders</CardTitle>
                  <CardDescription>You have {recentOrders.length} orders this month.</CardDescription>
                </CardHeader>
                <CardContent>
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Order ID</TableHead>
                        <TableHead>Customer</TableHead>
                        <TableHead>Date</TableHead>
                        <TableHead>Status</TableHead>
                        <TableHead className="text-right">Amount</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {recentOrders.map((order) => (
                        <TableRow key={order.id}>
                          <TableCell className="font-medium">{order.id}</TableCell>
                          <TableCell>{order.customer}</TableCell>
                          <TableCell>{order.date}</TableCell>
                          <TableCell>
                            <span
                              className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
                                order.status === "Delivered"
                                  ? "bg-green-100 text-green-800"
                                  : order.status === "Processing"
                                    ? "bg-blue-100 text-blue-800"
                                    : "bg-yellow-100 text-yellow-800"
                              }`}
                            >
                              {order.status}
                            </span>
                          </TableCell>
                          <TableCell className="text-right">₹{order.total.toLocaleString()}</TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </CardContent>
              </Card>
            </div>
          )}

{activeTab === "products" && (
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <h2 className="text-2xl font-bold">Products</h2>
                <Button>
                  <Plus className="mr-2 h-4 w-4" /> Add Product
                </Button>
              </div>

<Card>
                <CardContent className="p-0">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Product</TableHead>
                        <TableHead>Category</TableHead>
                        <TableHead>Price</TableHead>
                        <TableHead>Stock</TableHead>
                        <TableHead className="text-right">Actions</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {products.map((product) => (
                        <TableRow key={product.id}>
                          <TableCell>
                            <div className="flex items-center gap-3">
                              <Image
                                src={product.image || "/placeholder.svg"}
                                alt={product.name}
                                width={40}
                                height={40}
                                className="rounded object-cover"
                              />
                              <span className="font-medium">{product.name}</span>
                            </div>
                          </TableCell>
                          <TableCell>{product.category}</TableCell>
                          <TableCell>₹{product.price.toLocaleString()}</TableCell>
                          <TableCell>
                            <span
                              className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
                                product.stock > 20
                                  ? "bg-green-100 text-green-800"
                                  : product.stock > 10
                                    ? "bg-yellow-100 text-yellow-800"
                                    : "bg-red-100 text-red-800"
                              }`}
                            >
                              {product.stock} in stock
                            </span>
                          </TableCell>
                          <TableCell className="text-right">
                            <Button variant="ghost" size="sm">
                              Edit
                            </Button>
                            <Button variant="ghost" size="sm" className="text-red-500">
                              Delete
                            </Button>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </CardContent>
              </Card>
            </div>
          )}

{activeTab === "orders" && (
            <div className="space-y-4">
              <h2 className="text-2xl font-bold">Orders</h2>
              <p>Order management interface would be displayed here.</p>
            </div>
          )}

{activeTab === "customers" && (
            <div className="space-y-4">
              <h2 className="text-2xl font-bold">Customers</h2>
              <p>Customer management interface would be displayed here.</p>
            </div>
          )}
        </main>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/admin/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}

[V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isMerged="true"
"use client"

import { useToast } from "@/components/ui/use-toast"
import { X } from "lucide-react"

export function Toaster() {
  const { toasts, dismissToast } = useToast()

if (toasts.length === 0) return null

return (
    <div className="fixed bottom-0 right-0 z-50 p-4 space-y-4 w-full max-w-md">
      {toasts.map((toast, index) => (
        <div
          key={index}
          className="bg-background border rounded-lg shadow-lg p-4 flex items-start gap-3 animate-in slide-in-from-bottom-5"
        >
          <div className="flex-1">
            {toast.title && <h3 className="font-medium">{toast.title}</h3>}
            {toast.description && <p className="text-sm text-muted-foreground">{toast.description}</p>}
          </div>
          <button onClick={() => dismissToast(index)} className="text-muted-foreground">
            <X className="h-4 w-4" />
            <span className="sr-only">Close</span>
          </button>
        </div>
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

[V0_FILE]typescriptreact:file="components/ui/use-toast.tsx" isEdit="true" isQuickEdit="true"
// Simplified version of the toast component
"use client"

import type React from "react"

import { createContext, useContext, useState } from "react"

type ToastProps = {
  title?: string
  description?: string
  duration?: number
}

type ToastContextType = {
  toast: (props: ToastProps) => void
  toasts: ToastProps[]
  dismissToast: (index: number) => void
}

const ToastContext = createContext<ToastContextType | undefined>(undefined)

export function ToastProvider({ children }: { children: React.ReactNode }) {
  const [toasts, setToasts] = useState<ToastProps[]>([])

const toast = (props: ToastProps) => {
    const newToast = { ...props, duration: props.duration || 3000 }
    setToasts((prev) => [...prev, newToast])

setTimeout(() => {
      setToasts((prev) => prev.slice(1))
    }, newToast.duration)
  }

const dismissToast = (index: number) => {
    setToasts((prev) => prev.filter((_, i) => i !== index))
  }

return <ToastContext.Provider value={{ toast, toasts, dismissToast }}>{children}</ToastContext.Provider>
}

export function useToast() {
  const context = useContext(ToastContext)
  if (!context) {
    throw new Error("useToast must be used within a ToastProvider")
  }
  return context
}

// Export a direct toast function for convenience
export const toast = (props: ToastProps) => {
  // This is a fallback for when the hook is used outside the provider
  // In a real implementation, you might want to handle this differently
  console.warn("Toast used outside provider - this might not work as expected")

const newToast = document.createElement("div")
  newToast.className =
    "fixed bottom-4 right-4 z-50 bg-background border rounded-lg shadow-lg p-4 animate-in slide-in-from-bottom-5"

const title = props.title ? `<h3 class="font-medium">${props.title}</h3>` : ""
  const description = props.description ? `<p class="text-sm text-muted-foreground">${props.description}</p>` : ""

newToast.innerHTML = `${title}${description}`
  document.body.appendChild(newToast)

setTimeout(() => {
    newToast.classList.add("animate-out", "slide-out-to-right")
    setTimeout(() => {
      document.body.removeChild(newToast)
    }, 300)
  }, props.duration || 3000)
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import Header from "@/components/header"
import Footer from "@/components/footer"
import { CartProvider } from "@/components/cart-provider"
import { ToastProvider } from "@/components/ui/use-toast"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Shivam Toys & Gifts",
  description: "Quality toys and gifts for all ages",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ToastProvider>
          <CartProvider>
            <div className="flex min-h-screen flex-col">
              <Header />
              <div className="flex-1">{children}</div>
              <Footer />
            </div>
          </CartProvider>
        </ToastProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/featured-products.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { ShoppingCart } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { useCart } from "@/components/cart-provider"
import { useToast } from "@/components/ui/use-toast"
import { Toaster } from "@/components/ui/toaster"

const featuredProducts = [
  {
    id: 1,
    name: "Educational Building Blocks",
    price: 1299,
    image: "/placeholder.svg?height=300&width=300",
    slug: "educational-building-blocks",
    category: "Educational Toys",
  },
  {
    id: 2,
    name: "Plush Teddy Bear",
    price: 799,
    image: "/placeholder.svg?height=300&width=300",
    slug: "plush-teddy-bear",
    category: "Plush Toys",
  },
  {
    id: 3,
    name: "Remote Control Car",
    price: 1499,
    image: "/placeholder.svg?height=300&width=300",
    slug: "remote-control-car",
    category: "Outdoor Toys",
  },
  {
    id: 4,
    name: "Chess Set",
    price: 999,
    image: "/placeholder.svg?height=300&width=300",
    slug: "chess-set",
    category: "Board Games",
  },
]

export default function FeaturedProducts() {
  const { addToCart } = useCart()
  const { toast } = useToast()
  const [loading, setLoading] = useState<number | null>(null)

const handleAddToCart = (product: any) => {
    setLoading(product.id)

// Simulate network request
    setTimeout(() => {
      addToCart({
        id: product.id,
        name: product.name,
        price: product.price,
        image: product.image,
        quantity: 1,
      })

toast({
        title: "Added to cart",
        description: `${product.name} has been added to your cart.`,
      })

setLoading(null)
    }, 600)
  }

return (
    <>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
        {featuredProducts.map((product) => (
          <Card key={product.id} className="overflow-hidden">
            <Link href={`/products/${product.slug}`}>
              <div className="aspect-square relative">
                <Image
                  src={product.image || "/placeholder.svg"}
                  alt={product.name}
                  fill
                  className="object-cover transition-transform hover:scale-105"
                />
              </div>
            </Link>
            <CardContent className="p-4">
              <div className="text-sm text-muted-foreground mb-1">{product.category}</div>
              <Link href={`/products/${product.slug}`} className="hover:underline">
                <h3 className="font-medium text-lg mb-2 line-clamp-1">{product.name}</h3>
              </Link>
              <div className="font-bold">₹{product.price.toLocaleString()}</div>
            </CardContent>
            <CardFooter className="p-4 pt-0">
              <Button
                className="w-full"
                size="sm"
                onClick={() => handleAddToCart(product)}
                disabled={loading === product.id}
              >
                {loading === product.id ? (
                  <span className="flex items-center gap-1">
                    <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
                    Adding...
                  </span>
                ) : (
                  <span className="flex items-center gap-1">
                    <ShoppingCart className="h-4 w-4" /> Add to Cart
                  </span>
                )}
              </Button>
            </CardFooter>
          </Card>
        ))}
      </div>
      <Toaster />
    </>
  )
}

[V0_FILE]typescriptreact:file="components/add-to-cart-button.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { ShoppingCart } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useCart } from "@/components/cart-provider"
import { useToast } from "@/components/ui/use-toast"

type Product = {
  id: number
  name: string
  price: number
  image: string
}

export default function AddToCartButton({ product }: { product: Product }) {
  const { addToCart } = useCart()
  const { toast } = useToast()
  const [loading, setLoading] = useState(false)

const handleAddToCart = () => {
    setLoading(true)

toast({
        title: "Added to cart",
        description: `${product.name} has been added to your cart.`,
      })

setLoading(false)
    }, 600)
  }

return (
    <Button className="w-full" size="sm" onClick={handleAddToCart} disabled={loading}>
      {loading ? (
        <span className="flex items-center gap-1">
          <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
          Adding...
        </span>
      ) : (
        <span className="flex items-center gap-1">
          <ShoppingCart className="h-4 w-4" /> Add to Cart
        </span>
      )}
    </Button>
  )
}
</article></body></html>

Featured Products

Why Choose Shivam Toys & Gifts?

Free Shipping

Quality Products

24/7 Support

Discover Joy with Shivam Toys & Gifts

Shop by Category

{category.name}

All Products

{product.name}

Filters

{product.name}

Shipping

Features

Customer Reviews

Related Products

{product.name}

Your cart is empty

Shopping Cart

{item.name}

Order Summary

Your cart is empty

Checkout

Contact Information

Shipping Address

Payment Method

Additional Information