[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { MapPin, Phone, Clock, ShoppingCart, Plus, Minus } from "lucide-react" import { useToast } from "@/hooks/use-toast" interface MenuItem { id: string name: string description: string price: number image: string category: string } interface CartItem extends MenuItem { quantity: number } const menuItems: MenuItem[] = [ { id: "1", name: "Pani Poori", description: "Crispy hollow puris filled with spiced water, tamarind chutney, and chickpeas", price: 60, image: "/placeholder.svg?height=200&width=300", category: "Chaat", }, { id: "2", name: "Dhai Poori", description: "Crispy puris topped with yogurt, chutneys, and fresh herbs", price: 70, image: "/placeholder.svg?height=200&width=300", category: "Chaat", }, { id: "3", name: "Muruk Sandwich", description: "Crunchy murukku with fresh vegetables in soft bread", price: 80, image: "/placeholder.svg?height=200&width=300", category: "Sandwich", }, { id: "4", name: "Muruk Cheese Sandwich", description: "Crispy murukku with melted cheese and fresh vegetables", price: 100, image: "/placeholder.svg?height=200&width=300", category: "Sandwich", }, { id: "5", name: "Sev Poori", description: "Flat puris topped with sev, onions, chutneys, and spices", price: 65, image: "/placeholder.svg?height=200&width=300", category: "Chaat", }, { id: "6", name: "Dhai Papadi", description: "Crispy papadis with yogurt, chutneys, and aromatic spices", price: 75, image: "/placeholder.svg?height=200&width=300", category: "Chaat", }, ] export default function ChatShop() { const [cart, setCart] = useState([]) const [selectedCategory, setSelectedCategory] = useState("All") const { toast } = useToast() const categories = ["All", "Chaat", "Sandwich"] const filteredItems = selectedCategory === "All" ? menuItems : menuItems.filter((item) => item.category === selectedCategory) const addToCart = (item: MenuItem) => { setCart((prevCart) => { const existingItem = prevCart.find((cartItem) => cartItem.id === item.id) if (existingItem) { return prevCart.map((cartItem) => cartItem.id === item.id ? { ...cartItem, quantity: cartItem.quantity + 1 } : cartItem, ) } else { return [...prevCart, { ...item, quantity: 1 }] } }) toast({ title: "Added to cart", description: `${item.name} has been added to your cart.`, }) } const removeFromCart = (itemId: string) => { setCart((prevCart) => { return prevCart.reduce((acc, cartItem) => { if (cartItem.id === itemId) { if (cartItem.quantity > 1) { acc.push({ ...cartItem, quantity: cartItem.quantity - 1 }) } } else { acc.push(cartItem) } return acc }, [] as CartItem[]) }) } const getTotalPrice = () => { return cart.reduce((total, item) => total + item.price * item.quantity, 0) } const getTotalItems = () => { return cart.reduce((total, item) => total + item.quantity, 0) } return (

{/* Header */}

Chaat Corner

Authentic Street Food Experience

{/* Location Info */}

123 Food Street, Mumbai, Maharashtra 400001

+91 98765 43210

Open: 11:00 AM - 10:00 PM

{/* Category Filter */}

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

{/* Menu Items */}

{filteredItems.map((item) => (

{item.name} {item.category}

{item.description}

₹{item.price}

{cart.find((cartItem) => cartItem.id === item.id) ? (

{cart.find((cartItem) => cartItem.id === item.id)?.quantity || 0}

) : ( )}

))}

{/* Cart Summary */} {cart.length > 0 && (

Cart Summary

{cart.map((item) => (

{item.name} x{item.quantity} ₹{item.price * item.quantity}

))}

Total: ₹{getTotalPrice()}

)} {/* Footer */}

) }