vula-projects/vula-178c5c77
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deploy

Browse Source
This commit is contained in:
Vula Builder
2026-06-23 08:39:03 +00:00
parent 03b0fd0e05
commit 843b594c71
1 changed files with 72 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/MenuDisplaySection.tsx
+72
View File
@@ -0,0 +1,72 @@
'use client'
import { useState } from 'react'
import Image from 'next/image'
import { ChefHat, ChevronDown, Flame, Wheat } from 'lucide-react'
export default function MenuDisplaySection() {
const [open, setOpen] = useState<string | null>('Antipasti')
const categories = ['Antipasti', 'Pizzas', 'Pasta', 'Dolci', 'Beverages']
const menu: Record<string, { name: string; price: string; ingredients: string; image: string; tags: string[] }[]> = {
Antipasti: [
{ name: 'Bruschetta Classica', price: '$9', ingredients: "Tomato, basil, mozzarella", image: "https://images.pexels.com/photos/2728186/pexels-photo-2728186.jpeg?auto=compress&cs=tinysrgb&h=350", tags: ['vegetarian'] },
{ name: 'Calamari Fritti', price: '$12', ingredients: "Squid, lemon, aioli", image: "https://images.pexels.com/photos/2728186/pexels-photo-2728186.jpeg?auto=compress&cs=tinysrgb&h=350", tags: [] },
],
Pizzas: [
{ name: 'Margherita', price: '$14', ingredients: "San Marzano tomatoes, mozzarella, basil", image: "https://images.pexels.com/photos/35687736/pexels-photo-35687736.jpeg?auto=compress&cs=tinysrgb&h=350", tags: ['vegetarian'] },
{ name: 'Diavola', price: '$16', ingredients: "Spicy salami, chili flakes", image: "https://images.pexels.com/photos/35687736/pexels-photo-35687736.jpeg?auto=compress&cs=tinysrgb&h=350", tags: ['spicy'] },
],
Pasta: [
{ name: 'Carbonara', price: '$17', ingredients: "Egg, pecorino, guanciale", image: "https://images.pexels.com/photos/2728186/pexels-photo-2728186.jpeg?auto=compress&cs=tinysrgb&h=350", tags: [] },
{ name: 'Penne Arrabbiata', price: '$15', ingredients: "Tomato, garlic, chili", image: "https://images.pexels.com/photos/2728186/pexels-photo-2728186.jpeg?auto=compress&cs=tinysrgb&h=350", tags: ["spicy", "vegetarian"] },
],
Dolci: [
{ name: 'Tiramisù', price: '$9', ingredients: "Mascarpone, espresso, cocoa", image: "https://images.pexels.com/photos/35687736/pexels-photo-35687736.jpeg?auto=compress&cs=tinysrgb&h=350", tags: ['vegetarian'] },
{ name: 'Panna Cotta', price: '$8', ingredients: "Cream, vanilla, berry compote", image: "https://images.pexels.com/photos/35687736/pexels-photo-35687736.jpeg?auto=compress&cs=tinysrgb&h=350", tags: ['gluten-free'] },
],
Beverages: [
{ name: 'Espresso', price: '$3', ingredients: "Italian roast", image: "https://images.pexels.com/photos/35687736/pexels-photo-35687736.jpeg?auto=compress&cs=tinysrgb&h=350", tags: [] },
{ name: 'Chianti', price: '$9', ingredients: "Sangiovese", image: "https://images.pexels.com/photos/35687736/pexels-photo-35687736.jpeg?auto=compress&cs=tinysrgb&h=350", tags: [] },
],
}
const toggle = (cat: string) => setOpen(open === cat ? null : cat)
return (
<section data-vula-section="menudisplay" id="menu-display" className="py-20 bg-neutral-50">
<div className="container mx-auto px-4 max-w-4xl">
<h2 className="text-3xl font-bold text-[#212121] mb-8 text-center">Our Menu</h2>
{categories.map((cat) => (
<div key={cat} className="mb-4">
<button onClick={() => toggle(cat)}
className="w-full flex items-center justify-between px-6 py-4 bg-white rounded-xl shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] transition-all duration-200 ease-out"
>
<span className="text-lg font-semibold text-[#212121]">{cat}</span>
<ChevronDown className={`w-5 h-5 text-[#E91E63] transition-transform duration-200 ${open === cat ? 'rotate-180' : ''}`} />
</button>
{open === cat && (
<div className="mt-2 space-y-3">
{menu[cat].map((item, i) => (
<div key={i} className="flex items-start gap-4 bg-white p-4 rounded-xl border border-neutral-100">
<div className="w-20 h-20 rounded-lg overflow-hidden flex-shrink-0">
<Image src={item.image} alt={item.name} width={80} height={80} className="w-full h-full object-cover" />
</div>
<div className="flex-1">
<div className="flex items-center justify-between">
<h4 className="font-bold text-[#212121]">{item.name}</h4>
<span className="text-[#FF5722] font-bold">{item.price}</span>
</div>
<p className="text-sm text-[#212121]/70 mt-1">{item.ingredients}</p>
<div className="flex gap-2 mt-2">
{item.tags.includes('vegetarian') && <span className="text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-700"><Wheat className="inline w-3 h-3 mr-1" />Veg</span>}
{item.tags.includes('gluten-free') && <span className="text-xs px-2 py-0.5 rounded-full bg-blue-100 text-blue-700">GF</span>}
{item.tags.includes('spicy') && <span className="text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-700"><Flame className="inline w-3 h-3 mr-1" />Spicy</span>}
</div>
</div>
</div>
))}
</div>
)}
</div>
))}
</div>
</section>
)
}