danak/shop-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

banners

Browse Source
This commit is contained in:
hamid zarghami
2025-12-06 10:36:41 +03:30
parent 7226d0417a
commit f083acef85
1 changed files with 71 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/home/components/Banners4.tsx
+71 -33
View File
@@ -6,6 +6,8 @@ import { FC, useMemo } from 'react'
import { IBanner } from '@/types/landing.types'
import { useGetLanding } from '@/app/home/hooks/useHomeData'
const USE_PLACEHOLDER = false
const Banners4: FC = () => {
const { data } = useGetLanding()
@@ -21,6 +23,34 @@ const Banners4: FC = () => {
}
}, [data?.results?.banners])
const renderPlaceholder = () => (
<div className='flex lg:flex-row flex-col gap-4 lg:h-[340px]'>
{/* بنر 1 (Order 4) - بزرگ سمت راست - 34% عرض */}
<div className='lg:w-[34%] w-full lg:h-full h-[200px]'>
<div className='bg-pink-300 rounded-lg flex items-center justify-center w-full h-full'>
<span className='text-white text-lg font-bold'>بنر 1 (Order 4) - بزرگ راست</span>
</div>
</div>
{/* دو بنر کوچک عمودی - 12% عرض */}
<div className='flex flex-col gap-4 lg:w-[12%] w-full lg:h-full'>
<div className='bg-gray-400 rounded-lg flex items-center justify-center w-full flex-1 min-h-[100px]'>
<span className='text-white text-sm font-bold'>بنر 2 (Order 5)</span>
</div>
<div className='bg-green-400 rounded-lg flex items-center justify-center w-full flex-1 min-h-[100px]'>
<span className='text-white text-sm font-bold'>بنر 3 (Order 6)</span>
</div>
</div>
{/* بنر 4 (Order 7) - عریض سمت چپ - 54% عرض */}
<div className='lg:w-[54%] w-full lg:h-full h-[200px]'>
<div className='bg-teal-300 rounded-lg flex items-center justify-center w-full h-full'>
<span className='text-white text-lg font-bold'>بنر 4 (Order 7) - عریض چپ</span>
</div>
</div>
</div>
)
const renderLayout = (banners: IBanner[]) => {
const firstBanner = banners.find((banner) => banner.order === 4)
const secondBanner = banners.find((banner) => banner.order === 5)
@@ -37,51 +67,50 @@ const Banners4: FC = () => {
}
return (
<div className='flex lg:flex-row flex-col gap-6'>
<div className='flex-1 rounded-[10px] min-w-0'>
<Link href={firstBanner.linkUrl || '#'} className='block'>
<div className='flex lg:flex-row flex-col gap-4 lg:h-[340px]'>
{/* بنر 1 (Order 4) - بزرگ سمت راست - 34% عرض */}
<div className='lg:w-[34%] w-full lg:h-full'>
<Link href={firstBanner.linkUrl || '#'} className='block h-full'>
<Image
src={firstBanner.imageUrl}
height={340}
width={1000}
className='w-full h-auto rounded-lg'
width={340}
className='w-full h-full rounded-lg object-cover'
alt={firstBanner.altText}
/>
</Link>
</div>
<div className='lg:w-[140px] xl:w-[180px] 2xl:w-[220px] w-full flex flex-col gap-6 shrink-0'>
<div className='w-full rounded-[10px]'>
<Link href={secondBanner.linkUrl || '#'} className='block'>
<Image
src={secondBanner.imageUrl}
height={158}
width={158}
className='w-full h-auto rounded-lg'
alt={secondBanner.altText}
/>
</Link>
</div>
<div className='w-full rounded-[10px]'>
<Link href={thirdBanner.linkUrl || '#'} className='block'>
<Image
src={thirdBanner.imageUrl}
height={158}
width={158}
className='w-full h-auto rounded-lg'
alt={thirdBanner.altText}
/>
</Link>
</div>
{/* دو بنر کوچک عمودی - 12% عرض */}
<div className='flex flex-col gap-4 lg:w-[12%] w-full lg:h-full'>
<Link href={secondBanner.linkUrl || '#'} className='block flex-1 min-h-0'>
<Image
src={secondBanner.imageUrl}
height={160}
width={160}
className='w-full h-full rounded-lg object-cover'
alt={secondBanner.altText}
/>
</Link>
<Link href={thirdBanner.linkUrl || '#'} className='block flex-1 min-h-0'>
<Image
src={thirdBanner.imageUrl}
height={160}
width={160}
className='w-full h-full rounded-lg object-cover'
alt={thirdBanner.altText}
/>
</Link>
</div>
<div className='lg:w-[280px] xl:w-[360px] 2xl:w-[420px] w-full rounded-lg shrink-0'>
<Link href={fourthBanner.linkUrl || '#'} className='block'>
{/* بنر 4 (Order 7) - عریض سمت چپ - 54% عرض */}
<div className='lg:w-[54%] w-full lg:h-full'>
<Link href={fourthBanner.linkUrl || '#'} className='block h-full'>
<Image
src={fourthBanner.imageUrl}
height={400}
width={400}
className='w-full h-auto rounded-lg'
height={340}
width={800}
className='w-full h-full rounded-lg object-cover'
alt={fourthBanner.altText}
/>
</Link>
@@ -90,6 +119,15 @@ const Banners4: FC = () => {
)
}
if (USE_PLACEHOLDER) {
return (
<>
<div className='hidden lg:block'>{renderPlaceholder()}</div>
<div className='lg:hidden'>{renderPlaceholder()}</div>
</>
)
}
return (
<>
{desktopBanners.length > 0 && (