adilovcode/oriyo_next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: adjust promotion-slider width

Browse Source
This commit is contained in:
BunyodL 2025-04-26 21:14:28 +05:00
parent eaeb4fe41c
commit 896fc7e60a
1 changed files with 45 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/shared/components/promotion-slider.tsx
View File

@ -74,68 +74,64 @@ export default function PromotionSlider() {
};
return (
<div className='relative'>
<div className='overflow-hidden'>
<div
className='flex transition-transform duration-300 ease-in-out'
style={{
transform: `translateX(-${currentIndex * (100 / visibleItems)}%)`,
}}
>
{promotions.map((promo) => (
<div
key={promo.id}
className='w-full flex-none p-2 sm:w-1/2 lg:w-1/3'
data-aos='zoom-in-right'
data-aos-duration='700'
>
<Card className='h-full overflow-hidden transition-shadow hover:shadow-lg'>
<div className='relative h-48'>
<Image
src={promo.image || '/placeholder.svg'}
alt={promo.title}
fill
className='object-cover'
/>
<div className='relative overflow-hidden'>
<div
className='flex transition-transform duration-300 ease-in-out'
style={{
transform: `translateX(-${currentIndex * (100 / visibleItems)}%)`,
}}
>
{promotions.map((promo) => (
<div
key={promo.id}
className='w-full flex-none p-2 sm:w-1/2 lg:w-1/3'
data-aos='zoom-in-right'
data-aos-duration='700'
>
<Card className='h-full overflow-hidden transition-shadow hover:shadow-lg'>
<div className='relative h-48'>
<Image
src={promo.image || '/placeholder.svg'}
alt={promo.title}
fill
className='object-cover'
/>
</div>
<CardContent className='p-4'>
<h3 className='mb-2 text-lg font-bold'>{promo.title}</h3>
<p className='mb-3 text-sm text-gray-600'>
{promo.description}
</p>
<div className='flex items-center justify-between'>
<span className='text-xs text-gray-500'>
Действует до: {promo.validUntil}
</span>
<Button
variant='outline'
size='sm'
className='border-red-600 text-red-600 hover:bg-red-50'
>
Подробнее
</Button>
</div>
<CardContent className='p-4'>
<h3 className='mb-2 text-lg font-bold'>{promo.title}</h3>
<p className='mb-3 text-sm text-gray-600'>
{promo.description}
</p>
<div className='flex items-center justify-between'>
<span className='text-xs text-gray-500'>
Действует до: {promo.validUntil}
</span>
<Button
variant='outline'
size='sm'
className='border-red-600 text-red-600 hover:bg-red-50'
>
Подробнее
</Button>
</div>
</CardContent>
</Card>
</div>
))}
</div>
</CardContent>
</Card>
</div>
))}
</div>
<Button
variant='outline'
size='icon'
className='absolute top-1/2 left-0 z-10 -translate-x-1/2 -translate-y-1/2 border-gray-200 bg-white shadow-lg'
className='absolute top-1/2 left-0 z-10 -translate-y-1/2 border-gray-200 bg-white shadow-lg'
onClick={prevSlide}
>
<ChevronLeft className='h-4 w-4' />
<span className='sr-only'>Предыдущий</span>
</Button>
<Button
variant='outline'
size='icon'
className='absolute top-1/2 right-0 z-10 translate-x-1/2 -translate-y-1/2 border-gray-200 bg-white shadow-lg'
className='absolute top-1/2 right-0 z-10 -translate-y-1/2 border-gray-200 bg-white shadow-lg'
onClick={nextSlide}
>
<ChevronRight className='h-4 w-4' />