From 87b57f1442ded81965ca9a477d1d680f84ef2857 Mon Sep 17 00:00:00 2001
From: Sabda Yagra <msabdayagra@gmail.com>
Date: Wed, 26 Mar 2025 15:07:52 +0700
Subject: [PATCH] fix detail content tbnews

---
 .../[polda_name]/components/contact-us.tsx    |  2 +-
 .../[polda_name]/components/hero-kaltara.tsx  | 87 +++++++++++++++----
 .../components/navbar-kaltara.tsx             |  5 +-
 .../[polda_name]/components/pps-section.tsx   |  2 +-
 .../{video => image}/detail/[slug]/layout.tsx |  0
 .../{video => image}/detail/[slug]/page.tsx   | 17 +++-
 6 files changed, 86 insertions(+), 27 deletions(-)
 rename app/[locale]/(public)/(polda)/tbnews/[polda_name]/{video => image}/detail/[slug]/layout.tsx (100%)
 rename app/[locale]/(public)/(polda)/tbnews/[polda_name]/{video => image}/detail/[slug]/page.tsx (98%)

diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/contact-us.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/contact-us.tsx
index f3935010..69a4b659 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/contact-us.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/contact-us.tsx
@@ -5,7 +5,7 @@ import React from "react";
 
 const ContactUs = () => {
   return (
-    <div className="bg-[#fbfbfb] text-black px-4 lg:px-20 mb-10 mt-10">
+    <div className="bg-[#fbfbfb] text-black px-4 lg:px-20 mb-10 h-[150px] lg:h-[300px]">
       <div className="container mx-auto py-8">
         <div className="flex flex-col md:flex-row justify-between items-start gap-4">
           {/* Logo */}
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx
index 381c280d..4e1a7a16 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Reveal } from "@/components/landing-page/Reveal";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
 import { Icon } from "@/components/ui/icon";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Link } from "@/i18n/routing";
@@ -12,6 +13,7 @@ import React, { useEffect, useState } from "react";
 
 const HeroKaltara = () => {
   const params = useParams();
+  const locale = params?.locale;
   const [content, setContent] = useState([]);
   const [centerPadding, setCenterPadding] = useState<any>();
   const [isBannerLoading, setIsBannerLoading] = useState(true);
@@ -111,37 +113,84 @@ const HeroKaltara = () => {
     ],
   };
 
+  const shimmer = (w: number, h: number) => `
+  <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+      <linearGradient id="g">
+        <stop stop-color="#bcbcbd" offset="20%" />
+        <stop stop-color="#f9fafb" offset="50%" />
+        <stop stop-color="#bcbcbd" offset="70%" />
+      </linearGradient>
+    </defs>
+    <rect width="${w}" height="${h}" fill="#bcbcbd" />
+    <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
+    <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
+  </svg>`;
+
+  const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
+
   return (
     <>
       <Reveal>
         <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20 w-full py-4 mt-0 lg:mt-2">
           {isBannerLoading ? (
+            // <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" />
+            //   <div className="space-y-2">
+            //     <Skeleton className="h-4 w-[250px]" />
+            //     <Skeleton className="h-4 w-[200px]" />
+            //   </div>
+            // </div>
             <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" />
+              <Skeleton className="h-[310px] lg:h-[420px]  rounded-xl" />
               <div className="space-y-2">
                 <Skeleton className="h-4 w-[250px]" />
                 <Skeleton className="h-4 w-[200px]" />
               </div>
             </div>
           ) : (
-            <div className="w-full lg:h-full">
-              {content?.slice(0, 1)?.map((row: any, index: number) => (
-                <div className="flex flex-col gap-[10px]" key={index}>
-                  <Link href={prefixPath + `/video/detail/${row.slug}`}>
-                    <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[200px] lg:h-[500px] rounded-sm object-cover" />
-                  </Link>
-                  <h1 className="font-bold font-sans text-[30px]">{row.title}</h1>
-                  <div className="flex flex-row gap-3">
-                    <p className="text-[#c03724] font-sans text-[16px]">{row?.categoryName}</p>
-                    <p className="text-[16px] font-sans flex flex-row items-center text-slate-500 dark:text-white gap-1">
-                      {getPublicLocaleTimestamp(new Date(row?.createdAt))}
-                      {/* {row?.createdAt} */}
-                    </p>
-                  </div>
-                  <p className="text-[16px] font-sans text-justify" dangerouslySetInnerHTML={{ __html: row?.description }} />
-                </div>
-              ))}
-            </div>
+            // <div className="w-full lg:h-full">
+            //   {content?.slice(0, 1)?.map((row: any, index: number) => (
+            //     <div className="flex flex-col gap-[10px]" key={index}>
+            //       <Link href={prefixPath + `/image/detail/${row.slug}`}>
+            //         <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[200px] lg:h-[500px] rounded-sm object-cover" />
+            //       </Link>
+            //       <h1 className="font-bold font-sans text-[30px]">{row.title}</h1>
+            //       <div className="flex flex-row gap-3">
+            //         <p className="text-[#c03724] font-sans text-[16px]">{row?.categoryName}</p>
+            //         <p className="text-[16px] font-sans flex flex-row items-center text-slate-500 dark:text-white gap-1">
+            //           {getPublicLocaleTimestamp(new Date(row?.createdAt))}
+            //           {/* {row?.createdAt} */}
+            //         </p>
+            //       </div>
+            //       <p className="text-[16px] font-sans text-justify" dangerouslySetInnerHTML={{ __html: row?.description }} />
+            //     </div>
+            //   ))}
+            // </div>
+            <Carousel className="lg:w-2/3 lg:h-full ">
+              <CarouselContent>
+                {content?.map((row: any) => (
+                  <CarouselItem key={row?.id}>
+                    <div className="flex flex-col gap-[10px]">
+                      <Link href={`${locale}/image/detail/${row?.slug}`}>
+                        <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[200px] lg:h-[500px] rounded-sm object-cover" />
+                      </Link>
+                      <h1 className="font-bold font-sans text-[30px]">{row.title}</h1>
+                      <div className="flex flex-row gap-3">
+                        <p className="text-[#c03724] font-sans text-[16px]">{row?.categoryName}</p>
+                        <p className="text-[16px] font-sans flex flex-row items-center text-slate-500 dark:text-white gap-1">
+                          {getPublicLocaleTimestamp(new Date(row?.createdAt))}
+                          {/* {row?.createdAt} */}
+                        </p>
+                      </div>
+                      <p className="text-[16px] font-sans text-justify" dangerouslySetInnerHTML={{ __html: row?.description }} />
+                    </div>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious className="hover:bg-black ml-1 lg:ml-0" />
+              <CarouselNext className="hover:bg-black mr-1 lg:mr-0" />
+            </Carousel>
           )}
 
           {isBannerLoading ? (
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx
index 08283155..9fa94e0d 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx
@@ -44,7 +44,7 @@ const categoryLinks: any = {
   Kesehatan: "https://tribratanews.kaltara.polri.go.id/category/kesehatan/",
   Olahraga: "https://tribratanews.kaltara.polri.go.id/category/olahraga/",
   PPA: "https://tribratanews.kaltara.polri.go.id/category/ppa/",
-  MediaHub: "https://new.netidhub.com/",
+  MediaHub: "https://new.netidhub.com/in/polda/kaltara",
 };
 
 const NavbarKaltara = () => {
@@ -53,10 +53,11 @@ const NavbarKaltara = () => {
   return (
     <div className="bg-[#c03724] w-full py-3 px-4 lg:px-20 items-center sticky top-0 z-50">
       <div className="flex flex-row justify-between items-center">
-        <div className="flex flex-row justify-between items-center">
+        <div className="flex w-full justify-between items-center">
           <Link href="/tbnews/polda-kaltara">
             <Image width={2560} height={1440} src="/assets/img/logo-new-tbnews.png" alt="image" className="h-28 w-72" />
           </Link>
+
           <div className="flex flex-row">
             <div className="text-white font-semibold hidden lg:flex flex-row gap-14 items-center">
               {category?.map((data: any) => (
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/pps-section.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/pps-section.tsx
index 9ab2ee42..3711bf32 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/pps-section.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/pps-section.tsx
@@ -29,7 +29,7 @@ const PpsSection = () => {
             {image?.map((news: any, index) => (
               <CarouselItem key={news?.id} className="grid grid-cols-1">
                 <Card key={index} className="w-full overflow-hidden shadow-lg h-full">
-                  <Image src={news.src} alt="pps" width={400} height={250} className="w-full h-full object-cover rounded-md" />
+                  <Image src={news.src} alt="pps" width={2560} height={1440} className="w-full h-[60vh] object-cover rounded-md" />
 
                   <CardContent className="p-4">
                     {/* <div className="flex items-center gap-2 text-white text-xs font-bold">
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/video/detail/[slug]/layout.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/layout.tsx
similarity index 100%
rename from app/[locale]/(public)/(polda)/tbnews/[polda_name]/video/detail/[slug]/layout.tsx
rename to app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/layout.tsx
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/video/detail/[slug]/page.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx
similarity index 98%
rename from app/[locale]/(public)/(polda)/tbnews/[polda_name]/video/detail/[slug]/page.tsx
rename to app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx
index a00047f4..dfe60185 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/video/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx
@@ -619,7 +619,7 @@ const DetailInfo = () => {
 
   return (
     <>
-      <div className="min-h-screen px-4 md:px-24 py-4 my-0 lg:my-[150px]">
+      <div className="min-h-screen px-4 md:px-24 mt-5">
         <div className="rounded-md overflow-hidden md:flex">
           {/* Bagian Kiri */}
           <div className="md:w-3/4">
@@ -630,7 +630,16 @@ const DetailInfo = () => {
               </div>
             ) : (
               <div className="relative">
-                <Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
+                {/* <Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" /> */}
+                <Image
+                  placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                  width={2560}
+                  height={1440}
+                  src={detailDataImage?.files?.length > 0 ? detailDataImage.files[selectedImage]?.url : detailDataImage?.thumbnailLink}
+                  alt="Main"
+                  className="rounded-lg w-auto h-fit"
+                />
+
                 <div className="absolute top-4 left-4"></div>
               </div>
             )}
@@ -793,9 +802,9 @@ const DetailInfo = () => {
         </div>
       </div>
 
-      <div className="w-full mb-8">
+      <div className="w-full ">
         {/* Comment */}
-        <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
+        <div className="flex flex-col mt-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
           <div className="gap-5 flex flex-col px-4 lg:px-14">
             <p className="flex items-start text-lg">{t("comment")}</p>
             <Textarea placeholder={t("leaveComment")} className="flex w-full pb-12" onChange={getInputValue} />