From 8812ce02ac1621fa393156b28a50bb309fd4ada7 Mon Sep 17 00:00:00 2001
From: Sabda Yagra <msabdayagra@gmail.com>
Date: Thu, 27 Mar 2025 21:00:01 +0700
Subject: [PATCH] fix mobile version polda/kaltara and tbnews

---
 .../[polda_name]/image/detail/[slug]/page.tsx |   2 +-
 .../[polda_name]/components/regional-news.tsx |   2 +-
 .../[polda_name]/components/social-media.tsx  |  10 +-
 .../[polda_name]/image/detail/[slug]/page.tsx |   2 +-
 components/landing-page/content-category.tsx  |  44 +++++-
 .../header-banner-kaltara.tsx                 |   5 +-
 .../latest-content-kaltara.tsx                | 132 +++++++++++++-----
 7 files changed, 148 insertions(+), 49 deletions(-)

diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx
index 17e7e146..8a6565ee 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx
@@ -497,7 +497,7 @@ const DetailInfo = () => {
             </button>
           </div>
 
-          <div className="border-b-2  border-slate-300 mt-4 w-auto"></div>
+          <div className="border-b-2  border-slate-300 mt-4 w-auto lg:w-[1230px] self-center"></div>
 
           <div>
             {listSuggestion?.map((data: any) => (
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx
index a81bd11e..dd676e45 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx
@@ -129,7 +129,7 @@ const RegionalNews = () => {
             <p className="text-white font-semibold">Berita Wilayah</p>
           </div>
         </div>
-        <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20">
+        <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20 mb-4 lg:mb-10">
           {isLoading ? (
             <div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
               <Skeleton className="h-[310px] lg:h-[420px]  rounded-xl" />
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx
index 3e6b6878..6abb3425 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx
@@ -109,7 +109,7 @@ const SocialMedia = () => {
           </div>
           <div className="flex flex-col lg:flex-row w-full">
             {selectedTab == "x" ? (
-              <div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
+              <div className="flex flex-row justify-between gap-5 ">
                 {/* <div className="border border-slate-300 rounded-lg mt-4 w-[350px] h-[500px]">
                   <div className="mt-2 flex flex-row gap-2 mx-1">
                     <div className="h-full">
@@ -175,7 +175,7 @@ const SocialMedia = () => {
                 </Carousel>
               </div>
             ) : selectedTab == "instagram" ? (
-              <div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
+              <div className="flex flex-row justify-between gap-5">
                 <div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
                   <div className="mt-2 flex flex-row gap-2 mx-1">
                     <div className="h-full">
@@ -207,7 +207,7 @@ const SocialMedia = () => {
                 </div>
               </div>
             ) : selectedTab == "facebook" ? (
-              <div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
+              <div className="flex flex-row justify-between gap-5">
                 <div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
                   <div className="mt-2 flex flex-row gap-2 mx-1">
                     <div className="h-full">
@@ -239,7 +239,7 @@ const SocialMedia = () => {
                 </div>
               </div>
             ) : selectedTab == "tiktok" ? (
-              <div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
+              <div className="flex flex-row justify-between gap-5">
                 <div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
                   <div className="mt-2 flex flex-row gap-2 mx-1">
                     <div className="h-full">
@@ -271,7 +271,7 @@ const SocialMedia = () => {
                 </div>
               </div>
             ) : selectedTab == "youtube" ? (
-              <div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
+              <div className="flex flex-row justify-between gap-5">
                 <div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
                   <div className="mt-2 flex flex-row gap-2 mx-1">
                     <div className="h-full">
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx
index dfe60185..f00057c9 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx
@@ -813,7 +813,7 @@ const DetailInfo = () => {
             </button>
           </div>
 
-          <div className="border-b-2  border-slate-300 mt-4 w-auto"></div>
+          <div className="border-b-2  border-slate-300 mt-4 w-auto lg:w-[1600px] self-center"></div>
 
           <div>
             {listSuggestion?.map((data: any) => (
diff --git a/components/landing-page/content-category.tsx b/components/landing-page/content-category.tsx
index 44e97c13..d4d5542b 100644
--- a/components/landing-page/content-category.tsx
+++ b/components/landing-page/content-category.tsx
@@ -72,7 +72,21 @@ const ContentCategory = (props: { group?: string }) => {
           {categories?.map((category: any, index: number) =>
             !seeAllValue ? (
               index < 4 ? (
+                // <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
+                //   <Image
+                //     placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                //     alt="category"
+                //     width={2560}
+                //     height={1440}
+                //     src={category?.thumbnailLink}
+                //     className="w-full lg:w-[315px] lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
+                //   />
+                //   <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523]">
+                //     <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
+                //   </div>
+                // </Link>
                 <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
+                  {/* Gambar */}
                   <Image
                     placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                     alt="category"
@@ -81,7 +95,12 @@ const ContentCategory = (props: { group?: string }) => {
                     src={category?.thumbnailLink}
                     className="w-full lg:w-[315px] lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
                   />
-                  <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523]">
+
+                  {/* Overlay gelap */}
+                  <div className="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-35 transition-all duration-300 rounded-md"></div>
+
+                  {/* Judul */}
+                  <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523] z-10">
                     <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
                   </div>
                 </Link>
@@ -89,16 +108,35 @@ const ContentCategory = (props: { group?: string }) => {
                 ""
               )
             ) : (
+              // <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
+              //   <Image
+              //     placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+              //     alt="category"
+              //     width={2560}
+              //     height={1440}
+              //     src={category?.thumbnailLink}
+              //     className="w-fulllg:w-[315px] lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
+              //   />
+              //   <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523]">
+              //     <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
+              //   </div>
+              // </Link>
               <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
+                {/* Gambar */}
                 <Image
                   placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                   alt="category"
                   width={2560}
                   height={1440}
                   src={category?.thumbnailLink}
-                  className="w-fulllg:w-[315px] lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
+                  className="w-full lg:w-[315px] lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
                 />
-                <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523]">
+
+                {/* Overlay Gelap */}
+                <div className="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-35 transition-all duration-300"></div>
+
+                {/* Judul */}
+                <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523] z-10">
                   <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
                 </div>
               </Link>
diff --git a/components/landing-page/landing-polda-kaltara/header-banner-kaltara.tsx b/components/landing-page/landing-polda-kaltara/header-banner-kaltara.tsx
index 0aba9055..6a38dbb0 100644
--- a/components/landing-page/landing-polda-kaltara/header-banner-kaltara.tsx
+++ b/components/landing-page/landing-polda-kaltara/header-banner-kaltara.tsx
@@ -89,8 +89,9 @@ const HeaderBannerKaltara = () => {
               <CarouselContent>
                 {content?.map((row: any) => (
                   <CarouselItem key={row?.id}>
-                    <div className="relative h-[310px] lg:h-[580px]">
-                      <Image src={row?.thumbnailLink} alt="" width={1920} height={1080} className="w-full h-[540px] lg:h-full rounded-lg object-cover" />
+                    <div className="relative h-[310px] lg:h-[580px] overflow-hidden rounded-lg">
+                      <Image src={row?.thumbnailLink} alt="" width={1920} height={1080} className="w-full h-[540px] lg:h-full object-cover" />
+                      <div className="absolute inset-0 bg-black bg-opacity-30"></div> {/* Overlay */}
                       <div className="absolute bottom-5 left-5 right-5 bg-black bg-opacity-50  text-white p-4 rounded-r-lg border-l-2 border-[#bb3523]">
                         <span className="text-[#bb3523] font-sans bg-[#b0b0af] border border-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-[10px] lg:text-[14px] px-[10px] py-[5px]">{row?.categoryName}</span>
                         <div onClick={() => router.push(prefixPath + `/image/detail/${row?.slug}`)} className="cursor-pointer mt-2 lg:mt-0">
diff --git a/components/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx b/components/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx
index 71748927..8d112c3a 100644
--- a/components/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx
+++ b/components/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx
@@ -75,7 +75,7 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
       <Reveal>
         <div className="px-4 lg:px-20 my-10">
           <div className="bg-[#c03724] rounded-md p-3 w-fit text-white">Berita {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"}</div>
-          <div className="mx-auto w-full max-w-7xl justify-center flex px-5 flex-col lg:flex-row gap-5 mb-4">
+          <div className="mx-auto w-full  justify-center flex px-5 flex-col lg:flex-row gap-5 mb-4">
             <Tabs value={selectedTab} onValueChange={setSelectedTab}>
               <TabsList className="grid grid-cols-2 lg:flex lg:flex-row">
                 <TabsTrigger
@@ -130,40 +130,70 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
             <div className="">
               {selectedTab == "image" ? (
                 content?.length > 0 ? (
-                  <Carousel className="w-[90%] mx-auto">
+                  // <Carousel className="">
+                  //   <CarouselContent>
+                  //     {content?.map((image: any) => (
+                  //       <CarouselItem key={image?.id} className="basis-1/2 md:basis-1/3 lg:basis-1/4">
+                  //         <div onClick={() => router.push(prefixPath + `/video/detail/${image?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden">
+                  //           {/* Gambar */}
+                  //           <Image
+                  //             placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                  //             alt="image"
+                  //             width={2560}
+                  //             height={1440}
+                  //             src={image?.thumbnailLink}
+                  //             className="w-full lg:w-[390px] h-48 md:h-56 lg:h-[490px] object-cover rounded-md"
+                  //           />
+
+                  //           {/* Kategori - Sekarang Berada di Atas */}
+                  //           <span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{image?.categoryName}</span>
+
+                  //           {/* Overlay Konten (Informasi di Bawah) */}
+                  //           <div className="absolute bottom-0 left-0 right-0 p-4 bg-transparent rounded-md">
+                  //             {/* Judul */}
+                  //             <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{image?.title}</p>
+
+                  //             {/* Info Tambahan */}
+                  //             {/* <p className="flex items-center text-xs md:text-sm text-white mt-1 gap-2">
+                  //           {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}
+                  //         </p> */}
+                  //           </div>
+                  //         </div>
+                  //       </CarouselItem>
+                  //     ))}
+                  //   </CarouselContent>
+                  //   {/* <CarouselPrevious className="hover:bg-black" />
+                  //   <CarouselNext className="hover:bg-black -mr-6" /> */}
+                  // </Carousel>
+                  <Carousel className="">
                     <CarouselContent>
-                      {content?.map((video: any) => (
-                        <CarouselItem key={video?.id} className="basis-1/2 md:basis-1/3 lg:basis-1/4">
-                          <div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden">
+                      {content?.map((image: any) => (
+                        <CarouselItem key={image?.id} className="basis-1/2 md:basis-1/3 lg:basis-1/4">
+                          <div onClick={() => router.push(prefixPath + `/image/detail/${image?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden">
                             {/* Gambar */}
                             <Image
                               placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                               alt="video"
                               width={2560}
                               height={1440}
-                              src={video?.thumbnailLink}
+                              src={image?.thumbnailLink}
                               className="w-full lg:w-[390px] h-48 md:h-56 lg:h-[490px] object-cover rounded-md"
                             />
 
-                            {/* Kategori - Sekarang Berada di Atas */}
-                            <span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{video?.categoryName}</span>
+                            {/* Overlay gelap */}
+                            <div className="absolute inset-0 bg-black bg-opacity-30 group-hover:bg-opacity-40 transition-all duration-300 rounded-md"></div>
 
-                            {/* Overlay Konten (Informasi di Bawah) */}
-                            <div className="absolute bottom-0 left-0 right-0 p-4 bg-transparent rounded-md">
-                              {/* Judul */}
-                              <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{video?.title}</p>
+                            {/* Kategori */}
+                            <span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{image?.categoryName}</span>
 
-                              {/* Info Tambahan */}
-                              {/* <p className="flex items-center text-xs md:text-sm text-white mt-1 gap-2">
-                            {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}
-                          </p> */}
+                            {/* Konten Informasi */}
+                            <div className="absolute bottom-0 left-0 right-0 p-4 z-10">
+                              <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{image?.title}</p>
                             </div>
                           </div>
                         </CarouselItem>
                       ))}
                     </CarouselContent>
-                    <CarouselPrevious className="hover:bg-black" />
-                    <CarouselNext className="hover:bg-black -mr-6" />
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">
@@ -200,8 +230,8 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                         </CarouselItem>
                       ))}
                     </CarouselContent>
-                    <CarouselPrevious />
-                    <CarouselNext />
+                    {/* <CarouselPrevious />
+                    <CarouselNext /> */}
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">
@@ -210,10 +240,45 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                 )
               ) : selectedTab == "video" ? (
                 content?.length > 0 ? (
-                  <Carousel className="w-[90%] mx-auto">
+                  // <Carousel className="">
+                  //   <CarouselContent>
+                  //     {content?.map((video: any) => (
+                  //       <CarouselItem key={video?.id} className=" md:basis-1/3 lg:basis-1/4">
+                  //         <div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-lg overflow-hidden">
+                  //           {/* Gambar */}
+                  //           <Image
+                  //             placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                  //             alt="video"
+                  //             width={2560}
+                  //             height={1440}
+                  //             src={video?.thumbnailLink}
+                  //             className="w-full lg:w-[315px] h-48 md:h-56 lg:h-[490px] object-cover rounded-lg transition-transform duration-300"
+                  //           />
+
+                  //           {/* Kategori - Sekarang Berada di Atas */}
+                  //           <span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{video?.categoryName}</span>
+
+                  //           {/* Overlay Konten (Informasi di Bawah) */}
+                  //           <div className="absolute bottom-0 left-0 right-0 p-4 bg-transparent rounded-lg">
+                  //             {/* Judul */}
+                  //             <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{video?.title}</p>
+
+                  //             {/* Info Tambahan */}
+                  //             {/* <p className="flex items-center text-xs md:text-sm text-white mt-1 gap-2">
+                  //           {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}
+                  //         </p> */}
+                  //           </div>
+                  //         </div>
+                  //       </CarouselItem>
+                  //     ))}
+                  //   </CarouselContent>
+                  //   {/* <CarouselPrevious className="hover:bg-black" />
+                  //   <CarouselNext className="hover:bg-black -mr-6" /> */}
+                  // </Carousel>
+                  <Carousel className="">
                     <CarouselContent>
                       {content?.map((video: any) => (
-                        <CarouselItem key={video?.id} className=" md:basis-1/3 lg:basis-1/4">
+                        <CarouselItem key={video?.id} className="md:basis-1/3 lg:basis-1/4">
                           <div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-lg overflow-hidden">
                             {/* Gambar */}
                             <Image
@@ -225,25 +290,20 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                               className="w-full lg:w-[315px] h-48 md:h-56 lg:h-[490px] object-cover rounded-lg transition-transform duration-300"
                             />
 
-                            {/* Kategori - Sekarang Berada di Atas */}
+                            {/* Overlay Gelap */}
+                            <div className="absolute inset-0 bg-black bg-opacity-30 group-hover:bg-opacity-40 transition-all duration-300 rounded-lg"></div>
+
+                            {/* Kategori */}
                             <span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{video?.categoryName}</span>
 
-                            {/* Overlay Konten (Informasi di Bawah) */}
-                            <div className="absolute bottom-0 left-0 right-0 p-4 bg-transparent rounded-lg">
-                              {/* Judul */}
-                              <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{video?.title}</p>
-
-                              {/* Info Tambahan */}
-                              {/* <p className="flex items-center text-xs md:text-sm text-white mt-1 gap-2">
-                            {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}
-                          </p> */}
+                            {/* Overlay Konten (Judul) */}
+                            <div className="absolute bottom-0 left-0 right-0 p-4 z-10">
+                              <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2 line-clamp-2">{video?.title}</p>
                             </div>
                           </div>
                         </CarouselItem>
                       ))}
                     </CarouselContent>
-                    <CarouselPrevious className="hover:bg-black" />
-                    <CarouselNext className="hover:bg-black -mr-6" />
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">
@@ -286,8 +346,8 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                       </CarouselItem>
                     ))}
                   </CarouselContent>
-                  <CarouselPrevious />
-                  <CarouselNext />
+                  {/* <CarouselPrevious />
+                  <CarouselNext /> */}
                 </Carousel>
               ) : (
                 <p className="flex items-center justify-center">