109 lines
4.7 KiB
JavaScript
109 lines
4.7 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] || [];
|
|
|
|
const visibleItems = menuItems.slice(0, 6);
|
|
|
|
const mid = Math.ceil(visibleItems.length / 2);
|
|
const firstHalf = visibleItems.slice(0, mid);
|
|
const secondHalf = visibleItems.slice(mid);
|
|
|
|
return (
|
|
<section className="menus-section" id="menu">
|
|
<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' : ''}`}
|
|
style={activeTab === tab ? { color: '#cf2d1f' } : {}}
|
|
>
|
|
{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 className="btns-box text-center mt-4">
|
|
<Link
|
|
href="/menu"
|
|
className="theme-btn btn-style-one clearfix"
|
|
>
|
|
<span className="icon"></span> View All Menu
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|