110 lines
5.3 KiB
JavaScript
110 lines
5.3 KiB
JavaScript
'use client'
|
|
import { useState } from 'react'
|
|
import Layout from "@/components/layout/Layout"
|
|
import Link from 'next/link'
|
|
import { menuData } from '@/utils/constant.utils'
|
|
|
|
export default function MenusClient() {
|
|
const [activeTab, setActiveTab] = useState('Wings')
|
|
const tabs = Object.keys(menuData)
|
|
const menuItems = menuData[activeTab] || []
|
|
|
|
// Split items into two columns
|
|
const mid = Math.ceil(menuItems.length / 2)
|
|
const firstHalf = menuItems.slice(0, mid)
|
|
const secondHalf = menuItems.slice(mid)
|
|
|
|
return (
|
|
<>
|
|
<Layout
|
|
headerStyle={2}
|
|
footerStyle={2}
|
|
breadcrumbTitle="Our Menu"
|
|
bgImage={"/assets/images/inner-banner/menu-banner.webp"}
|
|
>
|
|
{/* Menu Section */}
|
|
<section className="menus-section sec-pad" id="menu">
|
|
<div className="auto-container">
|
|
{/* Section Title */}
|
|
<div className="sec-title mb-3 centered">
|
|
<div className="title">Our Menu</div>
|
|
<h2>Explore Our Delicious Dishes</h2>
|
|
<div className="separate"></div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<ul className="nav nav-tabs justify-content-center mb-5 border-0">
|
|
{tabs.map((tab) => (
|
|
<li
|
|
key={tab}
|
|
className="nav-item"
|
|
onClick={() => setActiveTab(tab)}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<span
|
|
className={`nav-link ${activeTab === tab ? 'active fw-bold' : ''}`}
|
|
style={activeTab === tab ? { color: '#cf2d1f' } : {}}
|
|
>
|
|
{tab}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* Menu Items */}
|
|
<div className="row clearfix">
|
|
{/* Left Column */}
|
|
<div className="menu-column col-lg-6 col-md-12 col-sm-12">
|
|
<div className="inner-column">
|
|
{firstHalf.map((item, index) => (
|
|
<div className="menu-block" key={index}>
|
|
<div className="inner-box">
|
|
<div className="menu-image">
|
|
<Link href="/#">
|
|
<img src={item.img} alt={item.alt} />
|
|
</Link>
|
|
</div>
|
|
<h3>
|
|
<Link href="/#">{item.name}</Link>
|
|
</h3>
|
|
<div className="title">{item.desc}</div>
|
|
<div className="price-box">
|
|
<span className="price">${item.price}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column */}
|
|
<div className="menu-column col-lg-6 col-md-12 col-sm-12">
|
|
<div className="inner-column">
|
|
{secondHalf.map((item, index) => (
|
|
<div className="menu-block" key={index}>
|
|
<div className="inner-box">
|
|
<div className="menu-image">
|
|
<Link href="/#">
|
|
<img src={item.img} alt={item.alt} />
|
|
</Link>
|
|
</div>
|
|
<h3>
|
|
<Link href="/#">{item.name}</Link>
|
|
</h3>
|
|
<div className="title">{item.desc}</div>
|
|
<div className="price-box">
|
|
<span className="price">${item.price}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Layout>
|
|
</>
|
|
)
|
|
}
|