feat: add banners in categories page

src/app/curso/[courseId]/page.tsx

@@ -13,14 +13,10 @@ import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
 import imageCapa from '../../../../public/images/banner.png'
 
-export default function CoursePage({
-  params,
-}: {
-  params: { courseId: string }
-}) {
+export default function CoursePage() {
   return (
     <>
-      <BannerCategory title={params.courseId} />
+      <BannerCategory />
       <div className="flex flex-col md:flex-row px-6 pt-20 gap-6">
         <div className="flex flex-col gap-7">
           <h1 className="block md:hidden text-green-400 text-3xl font-thin">

src/app/empresas/page.tsx

@@ -14,8 +14,8 @@ import { Suspense } from 'react'
 export default function Companies() {
   return (
     <main>
-      <BannerCategory title="Empresas" />
       <Suspense fallback={<SkeletonSerachParams />}>
+        <BannerCategory />
         <NavLinkCategory />
       </Suspense>
       <SearchFilter />

src/app/estudantes/page.tsx

@@ -14,8 +14,8 @@ import { Suspense } from 'react'
 export default function Students() {
   return (
     <main>
-      <BannerCategory title="Estudantes" />
       <Suspense fallback={<SkeletonSerachParams />}>
+        <BannerCategory />
         <NavLinkCategory />
       </Suspense>
       <SearchFilter />

src/app/profissionais/page.tsx

@@ -14,8 +14,8 @@ import { Suspense } from 'react'
 export default function Professionals() {
   return (
     <main>
-      <BannerCategory title="Profissionais" />
       <Suspense fallback={<SkeletonSerachParams />}>
+        <BannerCategory />
         <NavLinkCategory />
       </Suspense>
       <SearchFilter />

src/components/banner-category.tsx

+'use client'
+
 import Image from 'next/image'
-import bannerBusiness from '../../public/images/banners/business_banner_01.jpg'
-import bannerProfessional from '../../public/images/banners/professional_banner.jpg'
+import { useSearchParams } from 'next/navigation'
+import bannerComunicacao from '../../public/images/banners/comunicacao.jpg'
+import bannerEducacao from '../../public/images/banners/educacao.jpg'
+import bannerNegocios from '../../public/images/banners/negocios.jpg'
+import bannerSaude from '../../public/images/banners/saude.jpg'
 import bannerStudants from '../../public/images/banners/students_banner.jpg'
+import bannerTecnologia from '../../public/images/banners/tecnologia.jpg'
+import bannerTeologia from '../../public/images/banners/teologia.jpg'
+
+import bannerComunicacaoMobile from '../../public/images/banners/comunicacao-mobile.jpg'
+import bannerEducacaoMobile from '../../public/images/banners/educacao-mobile.jpg'
+import bannerNegociosMobile from '../../public/images/banners/negocios-mobile.jpg'
+import bannerSaudeMobile from '../../public/images/banners/saude-mobile.jpg'
+import bannerTecnologiaMobile from '../../public/images/banners/tecnologia-mobile.jpg'
+import bannerTeologiaMobile from '../../public/images/banners/teologia-mobile.jpg'
+
+export function BannerCategory() {
+  const searchParams = useSearchParams()
+
+  const category = searchParams.get('categoria')
+
+  function desktopBannerCategory() {
+    switch (category) {
+      case 'tecnologia':
+        return bannerTecnologia
+      case 'negocios':
+        return bannerNegocios
+      case 'comunicacao':
+        return bannerComunicacao
+      case 'educacao':
+        return bannerEducacao
+      case 'saude':
+        return bannerSaude
+      case 'teologia':
+        return bannerTeologia
+      default:
+        return bannerStudants
+    }
+  }
+
+  function mobileBannerCategory() {
+    switch (category) {
+      case 'tecnologia':
+        return bannerTecnologiaMobile
+      case 'negocios':
+        return bannerNegociosMobile
+      case 'comunicacao':
+        return bannerComunicacaoMobile
+      case 'educacao':
+        return bannerEducacaoMobile
+      case 'saude':
+        return bannerSaudeMobile
+      case 'teologia':
+        return bannerTeologiaMobile
+      default:
+        return bannerStudants
+    }
+  }
 
-type BannerProps = {
-  title: string
-}
-export function BannerCategory({ title }: BannerProps) {
   return (
-    <div className=" h-[300px] flex items-center justify-end">
+    <div className="h-[300px] flex items-center justify-end">
       <Image
         alt="banner"
-        className="w-full h-full object-cover object-left-top"
-        src={
-          title === 'Estudantes'
-            ? bannerStudants
-            : title === 'Profissionais'
-              ? bannerProfessional
-              : bannerBusiness
-        }
+        className="hidden md:flex w-full h-full object-cover"
+        src={desktopBannerCategory()}
+        unoptimized
+      />
+      <Image
+        alt="banner"
+        className="flex md:hidden w-full h-full object-cover"
+        src={mobileBannerCategory()}
+        unoptimized
       />
     </div>
   )