51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
'use client';
|
|
import { useState } from 'react';
|
|
import Image from 'next/image';
|
|
|
|
const categories = [
|
|
{ name: 'Bars', image: '/images/categories/bars.jpg' },
|
|
{ name: 'Barks', image: '/images/categories/barks.jpg' },
|
|
{ name: 'Pralines', image: '/images/categories/pralines.jpg' },
|
|
{ name: 'Spreads', image: '/images/categories/spreads.jpg' },
|
|
{ name: 'Dragees', image: '/images/categories/dragees.jpg' },
|
|
{ name: 'Gelatos', image: '/images/categories/gelatos.jpg' },
|
|
];
|
|
|
|
export function ChocolateCategories() {
|
|
const [currentImage, setCurrentImage] = useState(categories[0].image);
|
|
|
|
return (
|
|
<section className='flex flex-col md:flex-row bg-white py-12 px-4 sm:px-6 lg:px-8'>
|
|
<div className='w-full md:w-1/2 bg-white h-auto'>
|
|
<ul className='m-8 space-y-10 text-[#5a352a] font-serif text-5xl justify-center text-left'>
|
|
{categories.map((category) => (
|
|
<li
|
|
key={category.name}
|
|
onMouseEnter={() => setCurrentImage(category.image)}
|
|
className='hover:text-[#c19a6b] cursor-pointer font-montera font-normal text-9xl'
|
|
>
|
|
{category.name}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Right Side: Image */}
|
|
<div className='w-full md:w-1/2 h-full'>
|
|
<Image
|
|
src={currentImage}
|
|
alt='Chocolate Category'
|
|
width={300}
|
|
height={500}
|
|
className='w-full h-auto'
|
|
sizes='100vw'
|
|
style={{
|
|
width: '100%',
|
|
height: 'auto',
|
|
}}
|
|
/>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|