102 lines
4.5 KiB
JavaScript
102 lines
4.5 KiB
JavaScript
'use client';
|
|
import { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { menuData } from '@/utils/constant.utils';
|
|
|
|
export default function Menus() {
|
|
const [activeTab, setActiveTab] = useState('Wings');
|
|
const tabs = Object.keys(menuData);
|
|
const menuItems = menuData[activeTab] || [];
|
|
|
|
// Split the array into 2 halves
|
|
const mid = Math.ceil(menuItems.length / 2);
|
|
const firstHalf = menuItems.slice(0, mid);
|
|
const secondHalf = menuItems.slice(mid);
|
|
|
|
return (
|
|
<section className="menus-section" id="menu">
|
|
{/* <div
|
|
className="pattern-layer"
|
|
style={{ backgroundImage: 'url(assets/images/background/4.jpg)' }}
|
|
></div> */}
|
|
<div className="auto-container">
|
|
{/* Section Title */}
|
|
<div className="sec-title mb-3 centered">
|
|
<div className="title">Our Menu</div>
|
|
<h2>Menus</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 text-primary' : ''}`}
|
|
>
|
|
{tab}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* Menu Items in Two Columns */}
|
|
<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.name} />
|
|
</Link>
|
|
</div>
|
|
<h6>
|
|
<Link href="/#">{item.name}</Link>
|
|
</h6>
|
|
<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.name} />
|
|
</Link>
|
|
</div>
|
|
<h6>
|
|
<Link href="/#">{item.name}</Link>
|
|
</h6>
|
|
<div className="title">{item.desc}</div>
|
|
<div className="price-box">
|
|
<span className="price">${item.price}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|