desktop baner and mobile banner
This commit is contained in:
hamid zarghami
@@ -1,36 +1,84 @@
|
||||
'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={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 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={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 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={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 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='hidden lg:block'>{renderLayout(desktopBanners)}</div>
|
||||
<div className='lg:hidden'>{renderLayout(mobileBanners)}</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Banners3
|
||||
@@ -1,44 +1,102 @@
|
||||
'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 Banners4: 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 < 4) return null
|
||||
|
||||
const [firstBanner, secondBanner, thirdBanner, fourthBanner] = banners
|
||||
|
||||
if (
|
||||
!firstBanner?.imageUrl ||
|
||||
!secondBanner?.imageUrl ||
|
||||
!thirdBanner?.imageUrl ||
|
||||
!fourthBanner?.imageUrl
|
||||
)
|
||||
return null
|
||||
|
||||
return (
|
||||
<div className='flex lg:flex-row flex-col gap-6'>
|
||||
<div className='flex-1 rounded-[10px]'>
|
||||
<Link href={sortedBanners[3]?.linkUrl || '#'} className='block'>
|
||||
<Image src={data?.results?.banners?.[3]?.imageUrl as string} height={340} width={1000} className='w-full h-auto rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
|
||||
<Link href={firstBanner.linkUrl || '#'} className='block'>
|
||||
<Image
|
||||
src={firstBanner.imageUrl}
|
||||
height={340}
|
||||
width={1000}
|
||||
className='w-full h-auto rounded-lg'
|
||||
alt={firstBanner.altText}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className='lg:w-[12%] w-full flex flex-col gap-6'>
|
||||
<div className='w-full rounded-[10px]'>
|
||||
<Link href={sortedBanners[4]?.linkUrl || '#'} className='block'>
|
||||
<Image src={data?.results?.banners?.[4]?.imageUrl as string} height={158} width={158} className='w-full h-auto rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
|
||||
<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={sortedBanners[5]?.linkUrl || '#'} className='block'>
|
||||
<Image src={data?.results?.banners?.[5]?.imageUrl as string} height={158} width={158} className='w-full h-auto rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div className='lg:w-[30%] w-full rounded-lg'>
|
||||
<Link href={sortedBanners[6]?.linkUrl || '#'} className='block'>
|
||||
<Image src={data?.results?.banners?.[6]?.imageUrl as string} height={400} width={400} className='w-full h-auto rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
|
||||
<Link href={fourthBanner.linkUrl || '#'} className='block'>
|
||||
<Image
|
||||
src={fourthBanner.imageUrl}
|
||||
height={400}
|
||||
width={400}
|
||||
className='w-full h-auto rounded-lg'
|
||||
alt={fourthBanner.altText}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='hidden lg:block'>{renderLayout(desktopBanners)}</div>
|
||||
<div className='lg:hidden'>{renderLayout(mobileBanners)}</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Banners4
|
||||
@@ -157,6 +157,7 @@ export interface IBanner {
|
||||
linkUrl: string;
|
||||
isActive: boolean;
|
||||
order: number;
|
||||
displayLocation: "desktop" | "mobile";
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user