Merge branch 'dev-sabda' of https://gitlab.com/hanifsalafi/mediahub_redesign

app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx

@@ -114,7 +114,7 @@ const HeroKaltara = () => {
   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-36">
+        <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" />
@@ -125,7 +125,7 @@ const HeroKaltara = () => {
             </div>
           ) : (
             <div className="w-full lg:h-full">
-              {content?.map((row: any, index: number) => (
+              {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" />

app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/latest-news.tsx

@@ -136,7 +136,7 @@ const LatestNews = (props: { type: string }) => {
       <Reveal>
         <div className="my-10 px-4 lg:px-20 gap-3">
           <div className="bg-[#c03724] rounded-md p-3 w-fit">
-            <p className="text-white font-semibold">Berita {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"}</p>
+            <p className="text-white font-sans font-semibold">Berita {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"}</p>
           </div>
         </div>
         <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20">

app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx

@@ -51,7 +51,8 @@ const NavbarKaltara = () => {
   const [menuOpen, setMenuOpen] = useState(false);
 
   return (
-    <div className="bg-[#c03724] w-full py-3 px-4 lg:px-20 items-center fixed top-0 z-50">
+    <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">
           <Link href="/tbnews/polda-kaltara">
             <Image width={2560} height={1440} src="/assets/img/logo-new-tbnews.png" alt="image" className="h-28 w-72" />
@@ -85,10 +86,11 @@ const NavbarKaltara = () => {
             </svg>
           )}
         </button>
+      </div>
 
       {/* Mobile Menu */}
       {menuOpen && (
-        <div className="lg:hidden absolute bg-[#c03724] dark:bg-slate-600 px-4 py-3 space-y-3 z-50 left-[142px] top-[142px] items-center w-[300px]">
+        <div className="lg:hidden absolute bg-[#c03724] dark:bg-slate-600 px-4 py-3 space-y-3 z-50 left-[1oopx] top-[142px] items-center w-[300px]">
           <div className="text-white font-semibold gap-5 items-center grid grid-cols-2">
             {category?.map((data: any) => (
               <Link key={data?.id} href={categoryLinks[data?.name] || "#"}>

app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/pps-section.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import React from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import Image from "next/image";
+
+const PpsSection = () => {
+  const image = [
+    {
+      id: 1,
+      src: "/assets/PPS.png",
+    },
+    {
+      id: 2,
+      src: "/assets/contoh6.png",
+    },
+    {
+      id: 3,
+      src: "/assets/contoh7.png",
+    },
+  ];
+
+  return (
+    <div className="px-8 lg:px-20 py-4 lg:py-10">
+      <div>
+        <Carousel className="w-full mx-auto">
+          <CarouselContent>
+            {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" />
+
+                  <CardContent className="p-4">
+                    {/* <div className="flex items-center gap-2 text-white text-xs font-bold">
+                    <span className={`${news.bgColor} px-2 py-1 rounded text-[12px] font-helvetica`}>{news.tag}</span>
+                    <span className="text-[#A6711F] text-[12px] font-helvetica">{news.category}</span>
+                  </div>
+                  <p className="text-gray-400 text-[12px] font-helvetica mt-1">{news.date}</p>
+                  <h3 className="text-[16px] font-helvetica font-bold mt-2">{news.title}</h3>
+                  <p className="text-[14px] font-helvetica text-gray-500 mt-2">{news.description}</p> */}
+                  </CardContent>
+                </Card>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious className="hover:bg-black" />
+          <CarouselNext className="hover:bg-black -mr-6" />
+        </Carousel>
+      </div>
+    </div>
+  );
+};
+
+export default PpsSection;

app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx

@@ -1,12 +1,66 @@
+"use client";
+
 import React, { useState } from "react";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import Image from "next/image";
 import { Icon } from "@/components/ui/icon";
 import { Link } from "@/i18n/routing";
 import { Reveal } from "@/components/landing-page/Reveal";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import { formatDateToIndonesian } from "@/utils/globals";
 
 const SocialMedia = () => {
   const [selectedTab, setSelectedTab] = useState("x");
+  const twitter = [
+    {
+      id: 1,
+      logo: "/assets/img/logo-humas.jpg",
+      title: "Humas_PoldaKaltara",
+      tag: "@HumasKaltara",
+      desc: " Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et dolor ut ullam tempora deserunt dolore consequatur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati sint et sunt quis, eius fuga aliquid",
+      image: "/assets/img/gbr-contoh.png",
+    },
+    {
+      id: 2,
+      logo: "/assets/img/logo-humas.jpg",
+      title: "Humas_PoldaKaltara",
+      tag: "@HumasKaltara",
+      desc: " Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et dolor ut ullam tempora deserunt dolore consequatur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati sint et sunt quis, eius fuga aliquid",
+      image: "/assets/img/gbr-contoh.png",
+    },
+    {
+      id: 3,
+      logo: "/assets/img/logo-humas.jpg",
+      title: "Humas_PoldaKaltara",
+      tag: "@HumasKaltara",
+      desc: " Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et dolor ut ullam tempora deserunt dolore consequatur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati sint et sunt quis, eius fuga aliquid",
+      image: "/assets/img/gbr-contoh.png",
+    },
+    {
+      id: 4,
+      logo: "/assets/img/logo-humas.jpg",
+      title: "Humas_PoldaKaltara",
+      tag: "@HumasKaltara",
+      desc: " Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et dolor ut ullam tempora deserunt dolore consequatur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati sint et sunt quis, eius fuga aliquid",
+      image: "/assets/img/gbr-contoh.png",
+    },
+  ];
+
+  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 (
     <>
@@ -56,7 +110,7 @@ const SocialMedia = () => {
           <div className="flex flex-col lg:flex-row">
             {selectedTab == "x" ? (
               <div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
-                <div className="border border-slate-300 rounded-lg mt-4 w-[350px] h-[500px]">
+                {/* <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">
                       {" "}
@@ -84,16 +138,19 @@ const SocialMedia = () => {
                       <Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-full w-full mt-3 rounded-md" />{" "}
                     </div>
                   </div>
-                </div>
+                </div> */}
-                <div className="border border-slate-300 rounded-lg mt-4 w-[350px] h-[500px]">
+                <Carousel className="w-full mx-auto">
+                  <CarouselContent className="gap-[20px] w-full">
+                    {twitter?.map((image: any) => (
+                      <CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/4 border border-slate-300 rounded-lg mt-4">
                         <div className="mt-2 flex flex-row gap-2 mx-1">
                           <div className="h-full">
                             {" "}
-                      <Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
+                            <Image alt="" src={image?.logo} width={1920} height={1080} className="h-12 w-12" />
                           </div>
                           <div className="flex flex-col">
                             <div className="flex flex-row gap-2">
-                          <p className="font-bold">Humas_PoldaKaltara</p>
+                              <p className="font-bold">{image?.title}</p>
                               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
                                 <path
                                   fill="#53b0ff"
@@ -101,77 +158,21 @@ const SocialMedia = () => {
                                 />
                               </svg>
                             </div>
-                        <p className="text-slate-500 text-sm">@HumasKaltara</p>
+                            <p className="text-slate-500 text-sm">{image?.tag}</p>
                           </div>
                         </div>
                         <div className="flex flex-col w-full px-3">
                           <div className="my-3">
-                        <p className="text-sm text-justify">
+                            <p className="text-sm text-justify">{image?.desc} </p>
-                          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
+                            <Image alt="" src={image?.image} width={1920} height={1080} className="h-full w-full mt-3 rounded-md" />{" "}
-                          dolor ut ullam tempora deserunt dolore consequatur! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima repellat corrupti ipsa cumque obcaecati sed ipsum libero
-                        </p>
-                        <Image alt="" src="/assets/tbnews/medsos1.png" width={1920} height={1080} className="h-full w-full mt-3 rounded-md" />{" "}
-                      </div>
-                    </div>
-                  </div>
-                  <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">
-                        {" "}
-                        <Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
-                      </div>
-                      <div className="flex flex-col">
-                        <div className="flex flex-row gap-2">
-                          <p className="font-bold">Humas_PoldaKaltara</p>
-                          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
-                            <path
-                              fill="#53b0ff"
-                              d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
-                            />
-                          </svg>
-                        </div>
-                        <p className="text-slate-500 text-sm">@HumasKaltara</p>
-                      </div>
-                    </div>
-                    <div className="flex flex-col w-full px-3">
-                      <div className="my-3">
-                        <p className="text-sm text-justify">
-                          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
-                          dolor ut ullam tempora deserunt dolore consequatur! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem, eveniet sint modi, cupiditate pariatur quod voluptas minus
-                        </p>
-                        <Image alt="" src="/assets/tbnews/medsos3.png" width={1920} height={1080} className="h-full w-full mt-3 rounded-md" />{" "}
-                      </div>
-                    </div>
-                  </div>
-                  <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">
-                        {" "}
-                        <Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
-                      </div>
-                      <div className="flex flex-col">
-                        <div className="flex flex-row gap-2">
-                          <p className="font-bold">Humas_PoldaKaltara</p>
-                          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
-                            <path
-                              fill="#53b0ff"
-                              d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
-                            />
-                          </svg>
-                        </div>
-                        <p className="text-slate-500 text-sm">@HumasKaltara</p>
-                      </div>
-                    </div>
-                    <div className="flex flex-col w-full px-3">
-                      <div className="my-3">
-                        <p className="text-sm text-justify">
-                          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
-                          dolor ut ullam tempora deserunt dolore consequatur! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore quibusdam doloribus magni nisi
-                        </p>
-                        <Image alt="" src="/assets/tbnews/medsos2.png" width={1920} height={1080} className="h-full w-full mt-3 rounded-md" />{" "}
-                      </div>
                           </div>
                         </div>
+                      </CarouselItem>
+                    ))}
+                  </CarouselContent>
+                  <CarouselPrevious className="hover:bg-black" />
+                  <CarouselNext className="hover:bg-black -mr-6" />
+                </Carousel>
               </div>
             ) : selectedTab == "instagram" ? (
               <div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">

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

@@ -10,12 +10,14 @@ import RegionalNews from "./components/regional-news";
 import ContactUs from "./components/contact-us";
 import SocialMedia from "./components/social-media";
 import NewsTickerKaltara from "./components/news-tickers-kaltara";
+import PpsSection from "./components/pps-section";
 
 const PoldaKaltara = () => {
   return (
     <div>
       <NavbarKaltara />
       <HeroKaltara />
+      <PpsSection />
       <LatestNews type="latest" />
       <LatestNews type="popular" />
       {/* <PopularNews /> */}