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

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

@ -15,9 +15,9 @@ export function ChocolateCategories() {
const [currentImage, setCurrentImage] = useState(categories[0].image);
return (
<section className='flex flex-col md:flex-row items-center "bg-[#f9f6f5] py-12 px-4 sm:px-6 lg:px-8"'>
{/* Left Side: Categories */}
<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'>
<section className='flex flex-col md:flex-row bg-[#f9f6f5] 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}
@ -28,14 +28,17 @@ export function ChocolateCategories() {
</li>
))}
</ul>
</div>
{/* Right Side: Image */}
<div className='w-full md:w-1/2'>
<div className='w-full md:w-1/2 h-full'>
<Image
src={currentImage}
alt='Chocolate Category'
width={500}
height={300}
layout='responsive'
width={300}
height={500}
className='w-full h-auto'
/>
</div>
</section>