import React, { useState, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Flame, Plus, Minus, ShoppingBag, Clock, MapPin, Phone, Star, ArrowRight, Check } from 'lucide-react'; const menuData = { Starters: [ { name: 'Charred Octopus', desc: 'Smoked paprika, lemon aioli, pickled shallots', price: 16, time: '15 min' }, { name: 'Ember-Grilled Flatbread', desc: 'Burrata, heirloom tomatoes, basil oil', price: 14, time: '12 min' }, { name: 'Wild Mushroom Tart', desc: 'Truffle cream, gruyère, thyme', price: 13, time: '10 min' }, { name: 'Smoked Beet Salad', desc: 'Goat cheese, candied pecans, sherry vinaigrette', price: 12, time: '8 min' }, ], Mains: [ { name: 'Oak-Grilled Ribeye', desc: 'Herb butter, charred broccolini, fingerling potatoes', price: 38, time: '25 min' }, { name: 'Ember-Roasted Salmon', desc: 'Citrus glaze, fennel slaw, saffron rice', price: 29, time: '20 min' }, { name: 'Braised Short Rib', desc: 'Red wine jus, parsnip purée, crispy shallots', price: 32, time: '30 min' }, { name: 'Wood-Fired Chicken', desc: 'Lemon rosemary marinade, grilled asparagus', price: 26, time: '22 min' }, ], Desserts: [ { name: 'Smoked Chocolate Tart', desc: 'Sea salt, crème fraîche, candied orange', price: 11, time: '5 min' }, { name: 'Burnt Basque Cheesecake', desc: 'Flambéed top, berry compote', price: 12, time: '5 min' }, { name: 'Ember Roasted Pears', desc: 'Honey, mascarpone, toasted almonds', price: 10, time: '7 min' }, ], Drinks: [ { name: 'Smoked Old Fashioned', desc: 'Oak-infused bourbon, bitters, orange twist', price: 15, time: '3 min' }, { name: 'Ember Negroni', desc: 'Campari, gin, vermouth, flamed orange peel', price: 14, time: '3 min' }, { name: 'Charred Pineapple Spritz', desc: 'Mezcal, pineapple, lime, soda', price: 13, time: '4 min' }, { name: 'House Cold Brew', desc: 'Slow-steeped, vanilla cream', price: 6, time: '2 min' }, ], }; const categoryIcons = { Starters: Flame, Mains: Flame, Desserts: Flame, Drinks: Flame, }; export default function App() { const [activeCategory, setActiveCategory] = useState('Starters'); const [order, setOrder] = useState([]); const [isDrawerOpen, setIsDrawerOpen] = useState(false); const [activeTab, setActiveTab] = useState('menu'); const filteredItems = useMemo(() => menuData[activeCategory] || [], [activeCategory]); const addToOrder = (item) => { setOrder(prev => { const existing = prev.find(o => o.name === item.name); if (existing) { return prev.map(o => o.name === item.name ? { ...o, qty: o.qty + 1 } : o); } return [...prev, { ...item, qty: 1 }]; }); }; const removeFromOrder = (name) => { setOrder(prev => prev.filter(o => o.name !== name)); }; const updateQty = (name, delta) => { setOrder(prev => prev.map(o => { if (o.name === name) { const newQty = o.qty + delta; return newQty <= 0 ? o : { ...o, qty: newQty }; } return o; }).filter(o => o.qty > 0)); }; const totalItems = order.reduce((sum, o) => sum + o.qty, 0); const totalPrice = order.reduce((sum, o) => sum + (o.qty * o.price), 0); return (

{/* Background gradient glows */}

{/* Header */}

Ember & Oak

Modern Bistro

{/* Hero */}

Fire-Kissed • Wood-Fired • Seasonal

Where Flame Meets Culinary Artistry

Experience the primal beauty of open-fire cooking. Every dish is a celebration of smoke, char, and seasonal ingredients.

4.9 Rating

30–45 min delivery

Downtown District

{/* Main Content Area */}

{activeTab === 'menu' && (

{/* Menu Section */}

{/* Category Tabs */}

{Object.keys(menuData).map(cat => { const isActive = activeCategory === cat; return ( ); })}

{/* Menu Items Grid */}

{filteredItems.map((item, idx) => (

{item.name}

{item.desc}

${item.price} {item.time}

addToOrder(item)} className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-amber-400/20 border border-amber-400/30 text-amber-300 text-sm font-medium hover:bg-amber-400/30 transition-all" > Add

))}

{/* Order Summary Sidebar */}

Your Order

{totalItems} items

{order.length === 0 ? (

Your order is empty

Add some delicious dishes!

) : ( <>

{order.map(item => (

{item.name}

${(item.price * item.qty).toFixed(2)}

{item.qty}

))}

Subtotal ${totalPrice.toFixed(2)}

Delivery Free

Total ${totalPrice.toFixed(2)}

)}

)} {activeTab === 'reservations' && (

Reserve Your Table

Date

Time

Party Size

)} {activeTab === 'delivery' && (

Delivery Information

Estimated Delivery Time

30–45 minutes within the downtown area

Delivery Radius

Within 5 miles of our location at 123 Oak Street

Call for Large Orders

(555) 123-4567 for catering or groups of 10+

Enter your address for delivery:

)}

{/* Order Drawer (Mobile) */} {isDrawerOpen && ( <> setIsDrawerOpen(false)} className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 lg:hidden" />

Your Order

{order.length === 0 ? (

Your order is empty

) : ( <>

{order.map(item => (

{item.name}

${(item.price * item.qty).toFixed(2)}

{item.qty}

))}

Total ${totalPrice.toFixed(2)}

)} )} {/* Footer */}

); }

레스토랑·음식 배달