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

desktop baner and mobile banner

Browse Source
This commit is contained in:
hamid zarghami
2025-11-09 09:47:26 +03:30
parent 6c2be7dc1c
commit 09ce505241
3 changed files with 159 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/home/components/Banners3.tsx
+70 -22
View File
@@ -1,35 +1,83 @@
'use client'
import { FC } from 'react'
import { useGetLanding } from '../hooks/useHomeData'
import Image from 'next/image'
import Link from 'next/link'
import { FC, useMemo } from 'react'
import { IBanner } from '@/types/landing.types'
import { useGetLanding } from '@/app/home/hooks/useHomeData'
const Banners3: FC = () => {
const { data } = useGetLanding()
const sortedBanners = data?.results?.banners?.sort((a, b) => a.order - b.order) || []
const { desktopBanners, mobileBanners } = useMemo(() => {
const allBanners = data?.results?.banners ?? []
const sortByOrder = (items: IBanner[]) =>
[...items].sort((firstBanner, secondBanner) => firstBanner.order - secondBanner.order)
const groupByDisplayLocation = (displayLocation: IBanner['displayLocation']) =>
sortByOrder(allBanners.filter((banner) => banner.displayLocation === displayLocation))
return {
desktopBanners: groupByDisplayLocation('desktop'),
mobileBanners: groupByDisplayLocation('mobile'),
}
}, [data?.results?.banners])
const renderLayout = (banners: IBanner[]) => {
if (banners.length < 3) return null
const [firstBanner, secondBanner, thirdBanner] = banners
if (!firstBanner?.imageUrl || !secondBanner?.imageUrl || !thirdBanner?.imageUrl) return null
return (
<div className='flex lg:flex-row flex-col gap-4'>
<div className='flex flex-col gap-2 h-full flex-1'>
<div className='flex-1 h-full'>
<Link href={firstBanner.linkUrl || '#'}>
<Image
src={firstBanner.imageUrl}
height={500}
width={1000}
className='flex-1 rounded-lg'
alt={firstBanner.altText}
/>
</Link>
</div>
<div className='flex-1 h-full'>
<Link href={secondBanner.linkUrl || '#'}>
<Image
src={secondBanner.imageUrl}
height={500}
width={1000}
className='flex-1 rounded-lg'
alt={secondBanner.altText}
/>
</Link>
</div>
</div>
<div className='flex-1 h-full'>
<Link href={thirdBanner.linkUrl || '#'}>
<Image
src={thirdBanner.imageUrl}
height={1000}
width={1000}
className='flex-1 rounded-lg h-full object-cover'
alt={thirdBanner.altText}
/>
</Link>
</div>
</div>
)
}
return (
<div className='flex lg:flex-row flex-col gap-4'>
<div className='flex flex-col gap-2 h-full flex-1'>
<div className='flex-1 h-full'>
<Link href={sortedBanners[0]?.linkUrl || '#'}>
<Image src={sortedBanners[0]?.imageUrl as string} height={500} width={1000} className='flex-1 rounded-lg' alt={sortedBanners[1]?.altText as string} />
</Link>
</div>
<div className='flex-1 h-full'>
<Link href={sortedBanners[1]?.linkUrl || '#'}>
<Image src={sortedBanners[1]?.imageUrl as string} height={500} width={1000} className='flex-1 rounded-lg' alt={sortedBanners[2]?.altText as string} />
</Link>
</div>
</div>
<div className='flex-1 h-full'>
<Link href={sortedBanners[2]?.linkUrl || '#'}>
<Image src={sortedBanners[2]?.imageUrl as string} height={1000} width={1000} className='flex-1 rounded-lg h-full object-cover' alt={sortedBanners[0]?.altText as string} />
</Link>
</div>
</div>
<>
<div className='hidden lg:block'>{renderLayout(desktopBanners)}</div>
<div className='lg:hidden'>{renderLayout(mobileBanners)}</div>
</>
)
}