[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

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This