hamid zarghami
65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
'use client'
|
||
import { FC } from 'react'
|
||
import ProductCard from '@/components/ProductCard'
|
||
import Image from 'next/image'
|
||
import { Swiper, SwiperSlide } from 'swiper/react'
|
||
import { SHOP_CONFIG } from '@/config/const'
|
||
import { useGetLanding } from '../hooks/useHomeData'
|
||
|
||
|
||
const HotOffer: FC = () => {
|
||
|
||
const { data } = useGetLanding()
|
||
|
||
const incredibleOffers = data?.results?.incredibleOffers || []
|
||
|
||
if (!incredibleOffers.length) {
|
||
return null
|
||
}
|
||
|
||
return (
|
||
<div className='bg-[#F2F2F2] rounded-xl sm:rounded-2xl flex flex-col sm:flex-row py-4 sm:py-6'>
|
||
<div className='px-4 sm:px-6 w-full sm:min-w-[140px] sm:max-w-[180px] flex flex-col justify-center items-center sm:items-start'>
|
||
<div className='text-center text-primary font-extrabold text-xs sm:text-sm'>
|
||
پیشنهاد های
|
||
<br />
|
||
داغ
|
||
<br />
|
||
{SHOP_CONFIG.name}
|
||
<br />
|
||
کالا
|
||
</div>
|
||
<div className='mt-4 sm:mt-6 flex justify-center'>
|
||
<Image
|
||
src={'/images/hot_offer.png'}
|
||
alt=''
|
||
width={120}
|
||
height={150}
|
||
className='max-w-[80px] sm:max-w-full h-auto'
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='flex-1 overflow-hidden px-2 sm:px-4 mt-4 sm:mt-0'>
|
||
<Swiper
|
||
spaceBetween={8}
|
||
slidesPerView={'auto'}
|
||
className='h-full'
|
||
breakpoints={{
|
||
640: {
|
||
spaceBetween: 16,
|
||
},
|
||
}}
|
||
>
|
||
{incredibleOffers.map((product) => (
|
||
<SwiperSlide key={product._id} className='!w-auto'>
|
||
<ProductCard item={product} />
|
||
</SwiperSlide>
|
||
))}
|
||
</Swiper>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default HotOffer |