tanshu/kakawa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Categories working

Browse Source
This commit is contained in:
Amritanshu Agrawal 2024-09-23 23:22:51 +05:30
parent fc237d8b9f
commit 2d91a5741f
1 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/category-slider.tsx
View File

@ -15,27 +15,30 @@ export function ChocolateCategories() {
const [currentImage, setCurrentImage] = useState(categories[0].image); const [currentImage, setCurrentImage] = useState(categories[0].image);
return ( return (
<section className='flex flex-col md:flex-row items-center "bg-[#f9f6f5] py-12 px-4 sm:px-6 lg:px-8"'> <section className='flex flex-col md:flex-row bg-[#f9f6f5] py-12 px-4 sm:px-6 lg:px-8'>
{/* Left Side: Categories */} <div className='w-full md:w-1/2 bg-white h-auto'>
<ul className='space-y-4 text-[#5a352a] font-serif text-5xl flex flex-col justify-center w-1/2 bg-white text-left pl-10'> <ul className='m-8 space-y-10 text-[#5a352a] font-serif text-5xl justify-center text-left'>
{categories.map((category) => ( {categories.map((category) => (
<li <li
key={category.name} key={category.name}
onMouseEnter={() => setCurrentImage(category.image)} onMouseEnter={() => setCurrentImage(category.image)}
className='hover:text-[#c19a6b] cursor-pointer' className='hover:text-[#c19a6b] cursor-pointer'
> >
{category.name} {category.name}
</li> </li>
))} ))}
</ul> </ul>
</div>
{/* Right Side: Image */} {/* Right Side: Image */}
<div className='w-full md:w-1/2'> <div className='w-full md:w-1/2 h-full'>
<Image <Image
src={currentImage} src={currentImage}
alt='Chocolate Category' alt='Chocolate Category'
width={500} layout='responsive'
height={300} width={300}
height={500}
className='w-full h-auto'
/> />
</div> </div>
</section> </section>