fix:image/filter in polda/kaltara

app/[locale]/(public)/(polda)/polda/[polda_name]/audio/layout.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import LayoutProvider from "@/providers/layout.provider";
 import LayoutContentProvider from "@/providers/content.provider";
 import DashCodeSidebar from "@/components/partials/sidebar";
@@ -8,11 +10,26 @@ import DashCodeHeader from "@/components/partials/header";
 import { redirect } from "@/components/navigation";
 import Footer from "@/components/landing-page/footer";
 import Navbar from "@/components/landing-page/navbar";
+import NavbarKaltara from "@/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
+import { useParams } from "next/navigation";
+import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara";
+import NewsTickerKaltara from "../../../tbnews/[polda_name]/components/news-tickers-kaltara";
 
-const layout = async ({ children }: { children: React.ReactNode }) => {
+const layout = ({ children }: { children: React.ReactNode }) => {
-  return (
+  const params = useParams();
+  const poldaName: any = params?.polda_name;
+  return poldaName === "kaltara" ? (
     <>
+      <NavbarKaltara />
       {children}
+      <ContactUsKaltara />
+      <NewsTickerKaltara />
+    </>
+  ) : (
+    <>
+      <Navbar />
+      {children}
+      <Footer />
     </>
   );
 };

app/[locale]/(public)/(polda)/polda/[polda_name]/document/layout.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import LayoutProvider from "@/providers/layout.provider";
 import LayoutContentProvider from "@/providers/content.provider";
 import DashCodeSidebar from "@/components/partials/sidebar";
@@ -8,11 +10,26 @@ import DashCodeHeader from "@/components/partials/header";
 import { redirect } from "@/components/navigation";
 import Footer from "@/components/landing-page/footer";
 import Navbar from "@/components/landing-page/navbar";
+import NavbarKaltara from "@/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
+import { useParams } from "next/navigation";
+import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara";
+import NewsTickerKaltara from "../../../tbnews/[polda_name]/components/news-tickers-kaltara";
 
-const layout = async ({ children }: { children: React.ReactNode }) => {
+const layout = ({ children }: { children: React.ReactNode }) => {
-  return (
+  const params = useParams();
+  const poldaName: any = params?.polda_name;
+  return poldaName === "kaltara" ? (
     <>
+      <NavbarKaltara />
       {children}
+      <ContactUsKaltara />
+      <NewsTickerKaltara />
+    </>
+  ) : (
+    <>
+      <Navbar />
+      {children}
+      <Footer />
     </>
   );
 };

app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx

@@ -15,6 +15,7 @@ import ReactDatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { close, loading } from "@/config/swal";
 import { useTranslations } from "next-intl";
+import Image from "next/image";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -70,7 +71,7 @@ const FilterPage = () => {
   const [userLevels, setUserLevels] = useState([]);
   const poldaName = params?.polda_name;
   let prefixPath = poldaName ? `/polda/${poldaName}` : "/";
-  
+
   const t = useTranslations("FilterPage");
 
   // const [startDate, endDate] = dateRange;
@@ -348,11 +349,27 @@ const FilterPage = () => {
     clearTimeout(typingTimer);
   };
 
+  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 (
     <div className="flex flex-col">
       {/* Header */}
 
-      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
+      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black px-4 lg:px-20">
         <p>
           {" "}
           {t("image")} {">"} <span className="font-bold">{t("allImage")}</span>
@@ -361,9 +378,9 @@ const FilterPage = () => {
         <p>{`${t("thereIs")} ${totalContent} ${t("downloadableImage")}`}</p>
       </div>
 
-      {/* Left */}
+      <div className="flex flex-col lg:flex-row gap-6 p-4 px-4 lg:px-20">
-      <div className="flex flex-col lg:flex-row gap-6 p-4">
+        {/* Left */}
-        <div className="lg:w-[25%] h-fit w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
+        <div className="lg:w-[20%] h-fit w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
           <h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
             <Icon icon="stash:filter-light" fontSize={30} />
             Filter
@@ -465,48 +482,84 @@ const FilterPage = () => {
         </div>
 
         {/* Konten Kanan */}
-        <Reveal>
+        {/* <>
-          <div className="flex-1">
+          <Reveal> */}
-            <div className="flex flex-col items-end mb-4">
+        <div className="w-[80%]">
-              <h2 className="text-lg font-semibold">{t("sortBy")}</h2>
+          <div className="flex flex-col items-end mb-4">
-              <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
+            <h2 className="text-lg font-semibold">{t("sortBy")}</h2>
-                <option value="latest">{t("latest")}</option>
+            <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
-                <option value="popular">{t("mostPopular")}</option>
+              <option value="latest">{t("latest")}</option>
-              </select>
+              <option value="popular">{t("mostPopular")}</option>
-            </div>
+            </select>
-
-            {imageData?.length > 0 ? (
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-                {imageData?.map((image: any) => (
-                  <Card key={image?.id} className="hover:scale-110 transition-transform duration-300">
-                    <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
-                      <Link href={`${prefixPath}/image/detail/${image?.slug}`}>
-                        <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
-                        <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
-                          {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
-                          {image?.clickCount}{" "}
-                          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
-                            <path
-                              fill="#f00"
-                              d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
-                            />
-                          </svg>{" "}
-                        </div>
-                        <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{image?.title}</div>
-                      </Link>
-                    </CardContent>
-                  </Card>
-                ))}
-              </div>
-            ) : (
-              <p className="flex items-center justify-center text-black">
-                <img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
-              </p>
-            )}
-
-            <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
           </div>
-        </Reveal>
+
+          {imageData?.length > 0 ? (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+              {imageData?.map((image: any) => (
+                // <Card key={image?.id} className="hover:scale-110 transition-transform duration-300 h-full lg:h-[300px] w-full lg:w-[342px]">
+                //   <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
+                //     <Link href={`${prefixPath}/image/detail/${image?.slug}`}>
+                //       <Image
+                //         width={2560}
+                //         height={1440}
+                //         alt="filter-image"
+                //         placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                //         src={image?.thumbnailLink}
+                //         className="h-full lg:h-[300px] w-full lg:w-[342px] object-cover items-center justify-center cursor-pointer rounded-lg"
+                //       />
+
+                //       {/* <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
+                //         {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
+                //         {image?.clickCount}{" "}
+                //         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
+                //           <path
+                //             fill="#f00"
+                //             d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
+                //           />
+                //         </svg>{" "}
+                //       </div> */}
+                //       <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{image?.title}</div>
+                //     </Link>
+                //   </CardContent>
+                // </Card>
+                <Card key={image?.id} className="relative overflow-hidden hover:scale-105 transition-transform duration-300 h-full lg:h-[300px] w-full shadow-md hover:shadow-lg rounded-lg">
+                  <CardContent className="flex flex-col w-full p-0">
+                    <Link href={`${prefixPath}/image/detail/${image?.slug}`} className="relative">
+                      {/* Gambar */}
+                      <Image
+                        width={2560}
+                        height={1440}
+                        alt="filter-image"
+                        placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                        src={image?.thumbnailLink}
+                        className="h-full lg:h-[300px] w-full  object-cover rounded-lg transition-transform duration-300"
+                      />
+
+                      {/* Overlay Gelap */}
+                      <div className="absolute inset-0 bg-black bg-opacity-40  rounded-lg"></div>
+
+                      {/* Gradient Bawah */}
+                      {/* <div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black/50 via-black/20 to-transparent"></div> */}
+
+                      {/* Judul */}
+                      <div className="absolute bottom-3 left-3 right-3  text-white p-3 rounded-md z-10">
+                        <h3 className="text-[20px] font-semibold truncate hover:whitespace-normal hover:overflow-visible">{image?.title}</h3>
+                      </div>
+                    </Link>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          ) : (
+            <p className="flex items-center justify-center text-black">
+              <img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
+            </p>
+          )}
+
+          <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
+        </div>
+        {/* </Reveal>
+        </> */}
       </div>
     </div>
   );

app/[locale]/(public)/(polda)/polda/[polda_name]/image/layout.tsx

@@ -1,10 +1,35 @@
+"use client";
+
+import LayoutProvider from "@/providers/layout.provider";
+import LayoutContentProvider from "@/providers/content.provider";
+import DashCodeSidebar from "@/components/partials/sidebar";
+import DashCodeFooter from "@/components/partials/footer";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeHeader from "@/components/partials/header";
+
+import { redirect } from "@/components/navigation";
 import Footer from "@/components/landing-page/footer";
 import Navbar from "@/components/landing-page/navbar";
+import NavbarKaltara from "@/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
+import { useParams } from "next/navigation";
+import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara";
+import NewsTickerKaltara from "../../../tbnews/[polda_name]/components/news-tickers-kaltara";
 
-const layout = async ({ children }: { children: React.ReactNode }) => {
+const layout = ({ children }: { children: React.ReactNode }) => {
-  return (
+  const params = useParams();
+  const poldaName: any = params?.polda_name;
+  return poldaName === "kaltara" ? (
     <>
+      <NavbarKaltara />
       {children}
+      <ContactUsKaltara />
+      <NewsTickerKaltara />
+    </>
+  ) : (
+    <>
+      <Navbar />
+      {children}
+      <Footer />
     </>
   );
 };

app/[locale]/(public)/(polda)/polda/[polda_name]/video/layout.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import LayoutProvider from "@/providers/layout.provider";
 import LayoutContentProvider from "@/providers/content.provider";
 import DashCodeSidebar from "@/components/partials/sidebar";
@@ -8,11 +10,26 @@ import DashCodeHeader from "@/components/partials/header";
 import { redirect } from "@/components/navigation";
 import Footer from "@/components/landing-page/footer";
 import Navbar from "@/components/landing-page/navbar";
+import NavbarKaltara from "@/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
+import { useParams } from "next/navigation";
+import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara";
+import NewsTickerKaltara from "../../../tbnews/[polda_name]/components/news-tickers-kaltara";
 
-const layout = async ({ children }: { children: React.ReactNode }) => {
+const layout = ({ children }: { children: React.ReactNode }) => {
-  return (
+  const params = useParams();
+  const poldaName: any = params?.polda_name;
+  return poldaName === "kaltara" ? (
     <>
+      <NavbarKaltara />
       {children}
+      <ContactUsKaltara />
+      <NewsTickerKaltara />
+    </>
+  ) : (
+    <>
+      <Navbar />
+      {children}
+      <Footer />
     </>
   );
 };