desktop baner and mobile banner

src/app/home/components/Banners3.tsx

@@ -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='hidden lg:block'>{renderLayout(desktopBanners)}</div>
-                <div className='flex-1 h-full'>
+            <div className='lg:hidden'>{renderLayout(mobileBanners)}</div>
-                    <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>
     )
 }
 

src/app/home/components/Banners4.tsx

@@ -1,43 +1,101 @@
 '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={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={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>
+                </div>
+
+                <div className='lg:w-[30%] w-full rounded-lg'>
+                    <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='flex lg:flex-row flex-col gap-6'>
+        <>
-            <div className='flex-1 rounded-[10px]'>
+            <div className='hidden lg:block'>{renderLayout(desktopBanners)}</div>
-                <Link href={sortedBanners[3]?.linkUrl || '#'} className='block'>
+            <div className='lg:hidden'>{renderLayout(mobileBanners)}</div>
-                    <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>
-            </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>
-                </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>
-                </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>
-            </div>
-
-        </div>
     )
 }
 

src/types/landing.types.ts

@@ -157,6 +157,7 @@ export interface IBanner {
   linkUrl: string;
   isActive: boolean;
   order: number;
+  displayLocation: "desktop" | "mobile";
   createdAt: string;
   updatedAt: string;
 }