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

banner 3 change

Browse Source
This commit is contained in:
hamid zarghami
2025-12-04 12:54:24 +03:30
parent cf5f6ff2a0
commit 7226d0417a
2 changed files with 89 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/home/components/Banners3.tsx
+60 -25
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 Banners3: FC = () => {
const { data } = useGetLanding()
@@ -22,6 +24,32 @@ const Banners3: FC = () => {
}
}, [data?.results?.banners])
const renderPlaceholder = () => (
<div className='flex lg:flex-row flex-col gap-4'>
{/* دو بنر کوچک - سمت راست (60% عرض در RTL) */}
<div className='flex flex-col gap-4 lg:w-[60%] w-full'>
<div
className='bg-gray-400 rounded-lg flex items-center justify-center w-full flex-1'
>
<span className='text-white text-lg font-bold'>بنر 1</span>
</div>
<div
className='bg-blue-400 rounded-lg flex items-center justify-center w-full flex-1'
>
<span className='text-white text-lg font-bold'>بنر 2</span>
</div>
</div>
{/* بنر بزرگ - سمت چپ (40% عرض در RTL) */}
<div className='lg:w-[40%] w-full' style={{ aspectRatio: '1/1' }}>
<div
className='bg-purple-600 rounded-lg flex items-center justify-center w-full h-full'
>
<span className='text-white text-lg font-bold'>بنر 3 - بزرگ</span>
</div>
</div>
</div>
)
const renderLayout = (banners: IBanner[]) => {
const firstBanner = banners.find((banner) => banner.order === 1)
const secondBanner = banners.find((banner) => banner.order === 2)
@@ -31,37 +59,35 @@ const Banners3: FC = () => {
return (
<div className='flex lg:flex-row flex-col gap-4'>
<div className='flex flex-col gap-2 flex-1 min-w-0'>
<div className='flex-1 min-h-0'>
<Link href={firstBanner.linkUrl || '#'} className='block h-full'>
<Image
src={firstBanner.imageUrl}
height={500}
width={1000}
className='w-full h-full object-cover rounded-lg'
alt={firstBanner.altText}
/>
</Link>
</div>
<div className='flex-1 min-h-0'>
<Link href={secondBanner.linkUrl || '#'} className='block h-full'>
<Image
src={secondBanner.imageUrl}
height={500}
width={1000}
className='w-full h-full object-cover rounded-lg'
alt={secondBanner.altText}
/>
</Link>
</div>
{/* دو بنر کوچک - سمت راست (60% عرض در RTL) */}
<div className='flex flex-col gap-4 lg:w-[60%] w-full'>
<Link href={firstBanner.linkUrl || '#'} className='block flex-1'>
<Image
src={firstBanner.imageUrl}
height={400}
width={1000}
className='w-full h-full rounded-lg object-cover'
alt={firstBanner.altText}
/>
</Link>
<Link href={secondBanner.linkUrl || '#'} className='block flex-1'>
<Image
src={secondBanner.imageUrl}
height={400}
width={1000}
className='w-full h-full rounded-lg object-cover'
alt={secondBanner.altText}
/>
</Link>
</div>
<div className='flex-1 min-w-0'>
{/* بنر بزرگ - سمت چپ (40% عرض در RTL) */}
<div className='lg:w-[40%] w-full' style={{ aspectRatio: '1/1' }}>
<Link href={thirdBanner.linkUrl || '#'} className='block h-full'>
<Image
src={thirdBanner.imageUrl}
height={1000}
width={1000}
className='w-full h-full object-cover rounded-lg'
className='w-full h-full rounded-lg object-cover'
alt={thirdBanner.altText}
/>
</Link>
@@ -70,6 +96,15 @@ const Banners3: FC = () => {
)
}
if (USE_PLACEHOLDER) {
return (
<>
<div className='hidden lg:block'>{renderPlaceholder()}</div>
<div className='lg:hidden'>{renderPlaceholder()}</div>
</>
)
}
return (
<>
{desktopBanners.length > 0 && (