fixing home, all content, detail content

2025-01-15 18:08:49 +07:00 · 2025-01-15 18:08:49 +07:00 · 2a9b676c5d
parent 6b93b8b79f
commit 2a9b676c5d
23 changed files with 895 additions and 534 deletions
--- a/app/news/all/layout.tsx
+++ b/app/news/all/layout.tsx
@ -1,10 +1,9 @@
 "use client";
-import { HumasLayout } from "@/components/layout/humas-layout";

 export default function AllNewsLayout({
  children,
 }: {
  children: React.ReactNode;
 }) {
-  return <HumasLayout>{children}</HumasLayout>;
+  return <>{children}</>;
 }
--- a/app/news/all/page.tsx
+++ b/app/news/all/page.tsx
@ -1,6 +1,20 @@
+"use client";
 import ListNews from "@/components/main/detail/list-news";
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { HumasLayout } from "@/components/layout/humas-layout";

 export default function ListNewsPage() {
-  return <ListNews />;
+  const [hasMounted, setHasMounted] = useState(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  // Render
+  if (!hasMounted) return null;
+  return (
+    <HumasLayout>
+      <ListNews />
+    </HumasLayout>
+  );
 }
--- a/app/news/detail/[id]/layout.tsx
+++ b/app/news/detail/[id]/layout.tsx
@ -1,10 +1,7 @@
-"use client";
-import { HumasLayout } from "@/components/layout/humas-layout";
-
 export default function NewsLayout({
  children,
 }: {
  children: React.ReactNode;
 }) {
-  return <HumasLayout>{children}</HumasLayout>;
+  return <>{children}</>;
 }
--- a/app/news/detail/[id]/page.tsx
+++ b/app/news/detail/[id]/page.tsx
@ -1,6 +1,20 @@
+"use client";
+import { HumasLayout } from "@/components/layout/humas-layout";
 import DetailPage from "@/components/main/detail/new-detail";
-import React from "react";
+import React, { useEffect, useState } from "react";

 export default function NewsPage() {
-  return <DetailPage />;
+  const [hasMounted, setHasMounted] = useState(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  // Render
+  if (!hasMounted) return null;
+  return (
+    <HumasLayout>
+      <DetailPage />
+    </HumasLayout>
+  );
 }
--- a/components/icons.tsx
+++ b/components/icons.tsx
@ -1369,7 +1369,7 @@ export const Calender = ({
    width="24"
    height="24"
    viewBox="0 0 24 24"
-    fill="none"
+    fill="currentColor"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g clip-path="url(#clip0_988_15814)">
@ -2190,3 +2190,135 @@ export const TimesIcon = ({
    />
  </svg>
 );
+export const CalendarIcon = ({
+  size,
+  height = 24,
+  width = 24,
+  fill = "currentColor",
+  ...props
+}: IconSvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size || width}
+    height={size || height}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <g fill="none">
+      <path fill="currentColor" d="M4 7v2h16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2" />
+      <path
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M16 5h2a2 2 0 0 1 2 2v2H4V7a2 2 0 0 1 2-2h2m8 0V3m0 2H8m0-2v2M4 9.5V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9.5"
+      />
+    </g>
+  </svg>
+);
+export const ClockIcon = ({
+  size,
+  height = 24,
+  width = 24,
+  fill = "currentColor",
+  ...props
+}: IconSvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size || width}
+    height={size || height}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M11.5 3a9.5 9.5 0 0 1 9.5 9.5a9.5 9.5 0 0 1-9.5 9.5A9.5 9.5 0 0 1 2 12.5A9.5 9.5 0 0 1 11.5 3m0 1A8.5 8.5 0 0 0 3 12.5a8.5 8.5 0 0 0 8.5 8.5a8.5 8.5 0 0 0 8.5-8.5A8.5 8.5 0 0 0 11.5 4M11 7h1v5.42l4.7 2.71l-.5.87l-5.2-3z"
+    />
+  </svg>
+);
+export const SquareFacebookIcon = ({
+  size,
+  height = 24,
+  width = 24,
+  fill = "currentColor",
+  ...props
+}: IconSvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size || width}
+    height={size || height}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fill-rule="evenodd"
+      d="M15.725 22v-7.745h2.6l.389-3.018h-2.99V9.31c0-.874.243-1.47 1.497-1.47h1.598v-2.7a21 21 0 0 0-2.33-.12c-2.304 0-3.881 1.407-3.881 3.99v2.227H10v3.018h2.607V22H3.104C2.494 22 2 21.506 2 20.896V3.104C2 2.494 2.494 2 3.104 2h17.792C21.506 2 22 2.494 22 3.104v17.792c0 .61-.494 1.104-1.104 1.104z"
+    />
+  </svg>
+);
+
+export const SquareXIcon = ({
+  size,
+  height = 24,
+  width = 24,
+  fill = "currentColor",
+  ...props
+}: IconSvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size || width}
+    height={size || height}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      d="m13.081 10.712l-4.786-6.71a.6.6 0 0 0-.489-.252H5.28a.6.6 0 0 0-.488.948l6.127 8.59m2.162-2.576l6.127 8.59a.6.6 0 0 1-.488.948h-2.526a.6.6 0 0 1-.489-.252l-4.786-6.71m2.162-2.576l5.842-6.962m-8.004 9.538L5.077 20.25"
+    />
+  </svg>
+);
+export const SquareLinkedInIcon = ({
+  size,
+  height = 24,
+  width = 24,
+  fill = "currentColor",
+  ...props
+}: IconSvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size || width}
+    height={size || height}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M20.47 2H3.53a1.45 1.45 0 0 0-1.47 1.43v17.14A1.45 1.45 0 0 0 3.53 22h16.94a1.45 1.45 0 0 0 1.47-1.43V3.43A1.45 1.45 0 0 0 20.47 2M8.09 18.74h-3v-9h3ZM6.59 8.48a1.56 1.56 0 1 1 0-3.12a1.57 1.57 0 1 1 0 3.12m12.32 10.26h-3v-4.83c0-1.21-.43-2-1.52-2A1.65 1.65 0 0 0 12.85 13a2 2 0 0 0-.1.73v5h-3v-9h3V11a3 3 0 0 1 2.71-1.5c2 0 3.45 1.29 3.45 4.06Z"
+    />
+  </svg>
+);
+export const SquareWhatsappIcon = ({
+  size,
+  height = 24,
+  width = 24,
+  fill = "currentColor",
+  ...props
+}: IconSvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size || width}
+    height={size || height}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.95 9.95 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.95 9.95 0 0 1 2.001 12c0-5.523 4.477-10 10-10M8.593 7.3l-.2.008a1 1 0 0 0-.372.1a1.3 1.3 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413c.409.902 1.082 1.857 1.97 2.742c.214.213.424.427.65.626a9.45 9.45 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a2 2 0 0 0 .833-.231a5 5 0 0 0 .383-.22q.001.002.125-.09c.135-.1.218-.171.33-.288q.126-.13.21-.302c.078-.163.156-.474.188-.733c.024-.198.017-.306.014-.373c-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.5.5 0 0 0-.176-.041a.48.48 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13a1.4 1.4 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6 6 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.3 6.3 0 0 1-1.02-1.268l-.059-.095a1 1 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373c.118-.19.155-.385.093-.536q-.42-1.026-.868-2.041c-.059-.134-.234-.23-.393-.249q-.081-.01-.162-.016a3 3 0 0 0-.403.004z"
+    />
+  </svg>
+);
--- a/components/landing/BannerHumas.tsx
+++ b/components/landing/BannerHumas.tsx
@ -8,10 +8,10 @@ export default function BannerHumas() {
      <img
        src="headerbanner1.png"
        alt="humasbanner"
-        className="w-full relative h-[33vh] lg:h-auto object-cover"
+        className="w-full relative h-[33vh] lg:h-[95vh] object-cover"
      />
-      <div className="absolute  top-1/2 left-1/2  transform -translate-x-1/2 -translate-y-1/2 text-center w-full lg:w-[75%]">
-        <p className="text-sm lg:text-[42px] lg:leading-10 font-bold pb-1 md:pb-5">
+      <div className="absolute lg:mt-[50px] top-1/2 left-1/2  transform -translate-x-1/2 -translate-y-1/2 text-center w-full lg:w-[75%]">
+        <p className="lg:text-[42px] lg:leading-10 font-bold pb-1 md:pb-5">
          {t("jumbotron")}
        </p>
        <p className="text-xs md:text-medium">{`"${t("phrase")}"`}</p>
--- a/components/landing/ENewsPolri.tsx
+++ b/components/landing/ENewsPolri.tsx
@ -28,8 +28,8 @@ export default function ENewsPolri() {
  }, []);

  return (
-    <div className="bg-[#1F1A17] text-center md:rounded-lg h-auto  flex py-4 flex-col justify-between items-center rounded-md">
-      <p className="text-white border-b-3 border-red-500 py-2 mb-3 text-xl">
+    <div className="bg-[#f0f0f0] dark:bg-[#1F1A17] text-center md:rounded-lg h-auto  flex py-4 flex-col justify-between items-center rounded-md">
+      <p className="text-black dark:text-white border-b-3 border-red-500 py-2 mb-3 text-xl">
        E-Majalah Polri
      </p>

@ -62,7 +62,7 @@ export default function ENewsPolri() {
                    className="h-[25vh] object-cover rounded-none"
                  />
                  <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute bottom-1 shadow-small z-10">
-                    <div className="text-black dark:text-white">
+                    <div className="text-white">
                      <Link href={`news/detail/${newsItem.id}`}>
                        <p className="text-left font-semibold text-sm">
                          {textEllipsis(newsItem.title, 40)}
@ -72,7 +72,7 @@ export default function ENewsPolri() {
                        {convertDateFormat(newsItem.createdAt)} WIB
                      </p>
                      <p className="flex items-center gap-1 text-sm">
-                        <EyeIcon className="text-black dark:text-white" />
+                        <EyeIcon className="text-white" />
                        {newsItem.viewCount === null ? 0 : newsItem.viewCount}
                      </p>
                    </div>
@ -84,7 +84,7 @@ export default function ENewsPolri() {
        </div>
      </div>
      <Link
-        className="flex items-center gap-2 text-[#DD8306]"
+        className="flex items-center gap-2 text-[#DD8306] mt-3"
        href="/e-majalah-polri/daftar-majalah"
      >
        Lihat Semua <ChevronRightIcon color="[#DD8306]" />
--- a/components/landing/Footer.tsx
+++ b/components/landing/Footer.tsx
@ -137,7 +137,7 @@ export default function Footer() {
          </Link>
        </div>
      </div>
-      <div className="grid grid-cols-2 justify-center md:hidden absolute top-0 left-0 w-full  gap-5 md:gap-4 px-2 md:px-10 lg:px-20 pt-5 md:pt-16 pb-5 md:pb-20 text-white">
+      <div className="grid grid-cols-2 justify-center md:hidden absolute top-0 left-0 w-full  gap-5 md:gap-4 px-5 md:px-10 lg:px-20 pt-5 md:pt-16 pb-5 md:pb-20 text-white">
        <div className="pb-2 md:pb-0 flex flex-col gap-2">
          <Link href="/">Berita Terkini</Link>
          <Link href="https://www.kpai.go.id/" target="_blank">
--- a/components/landing/HeaderNews.tsx
+++ b/components/landing/HeaderNews.tsx
@ -14,6 +14,7 @@ import { useEffect, useState } from "react";
 import { getListArticle } from "@/service/article";
 import { convertDateFormat, textEllipsis } from "@/utils/global";
 import { useTranslations } from "next-intl";
+import { data } from "autoprefixer";

 export default function HeaderNews() {
  const [article, setArticle] = useState<any>([]);
@ -29,15 +30,14 @@ export default function HeaderNews() {
  }, []);

  return (
-    <div className="bg-[#1F1A17] p-2 lg:p-8">
-      <div className="flex flex-col lg:flex-row gap-3 bg-white p-1 lg:p-3 rounded-lg lg:h-[70vh]">
+    <div className="flex flex-col lg:flex-row gap-3 bg-white  p-1 lg:p-8 lg:h-[70vh]">
      <div className="lg:hidden w-full h-full">
        <Swiper
          centeredSlides={true}
-            // autoplay={{
-            //   delay: 5000,
-            //   disableOnInteraction: false,
-            // }}
+          autoplay={{
+            delay: 5000,
+            disableOnInteraction: false,
+          }}
          navigation={true}
          modules={[Navigation]}
          className="mySwiper"
@ -52,7 +52,7 @@ export default function HeaderNews() {
                />
                <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
                  <div className="text-black dark:text-white">
-                      <Link href={`news/detail/${newsItem.id}`}>
+                    <Link href={`news/detail/${newsItem.id}-${newsItem?.slug}`}>
                      <p className="text-left font-semibold">
                        {textEllipsis(newsItem.title, 40)}
                      </p>
@ -71,12 +71,14 @@ export default function HeaderNews() {
          ))}
        </Swiper>
      </div>
-        <div className="w-auto lg:w-[25%] p-2 bg-[#020101] text-white rounded-lg mb-2 md:mb-0 h-[50vh] lg:h-[67vh]">
-          <p className="text-lg font-bold h-10 text-center">{t("berita")}</p>
-          <ScrollShadow hideScrollBar className="h-[34vh] lg:h-[53vh] gap-3">
+      <div className="w-auto lg:w-[25%] p-2 dark:bg-stone-800  bg-[#f0f0f0] shadow-lg dark:text-white text-black rounded-xl mb-2 md:mb-0 h-[50vh] lg:h-[67vh]">
+        <p className="text-lg font-bold h-10 text-center dark:text-white text-black">
+          {t("berita")}
+        </p>
+        <ScrollShadow hideScrollBar className="h-[34vh] lg:h-[53vh] ">
          {article?.map((data: any) => (
            <div
-                className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md flex flex-row gap-2"
+              className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md flex flex-row gap-2"
              key={data.id}
            >
              <img
@ -85,8 +87,21 @@ export default function HeaderNews() {
                className="object-cover w-[18%]"
              />
              <div>
-                  <p className="lg:hidden">{textEllipsis(data.title, 40)}</p>
-                  <p className="hidden lg:block">{data.title}</p>
+                <Link
+                  href={`/news/detail/${data?.id}-${data?.slug}`}
+                  key={data?.id}
+                  className="lg:hidden"
+                >
+                  {textEllipsis(data.title, 40)}
+                </Link>
+                <Link
+                  href={`/news/detail/${data?.id}-${data?.slug}`}
+                  key={data?.id}
+                  className="hidden lg:block"
+                >
+                  {data.title}{" "}
+                </Link>
+
                <p className="py-[2px]">
                  {convertDateFormat(data.createdAt)} WIB
                </p>
@ -110,9 +125,8 @@ export default function HeaderNews() {
        </div>
      </div>

-        <div className="hidden lg:block w-full lg:w-[50%] h-full">
+      <div className="hidden lg:block w-full lg:w-[50%] h-[67vh]">
        <Swiper
-            centeredSlides={true}
          autoplay={{
            delay: 5000,
            disableOnInteraction: false,
@ -122,16 +136,20 @@ export default function HeaderNews() {
          className="mySwiper"
        >
          {article?.map((newsItem: any) => (
-              <SwiperSlide key={newsItem.id}>
-                <Card isFooterBlurred radius="lg" className="border-none">
+            <SwiperSlide key={newsItem.id} className="h-[67vh]">
+              <Card
+                isFooterBlurred
+                radius="lg"
+                className="border-none h-[67vh]"
+              >
                <img
                  alt="headernews"
                  src="/headernews.png"
-                    className="h-[67vh] object-cover"
+                  className="w-full h-[67vh] object-cover"
                />
                <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
                  <div className="text-white">
-                      <Link href={`news/detail/${newsItem.id}`}>
+                    <Link href={`news/detail/${newsItem.id}-${newsItem?.slug}`}>
                      <p className="text-left font-semibold">
                        {newsItem.title}
                      </p>
@ -154,6 +172,5 @@ export default function HeaderNews() {
        <GPRKominfo />
      </div>
    </div>
-    </div>
  );
 }
--- a/components/landing/MediaSocial.tsx
+++ b/components/landing/MediaSocial.tsx
@ -52,7 +52,7 @@ export default function MediaSocial() {
  ];

  return (
-    <div className="space-y-5 md:space-y-7">
+    <div className="space-y-5 md:space-y-7 bg-white text-black rounded-lg ">
      <p className="text-xl border-b-3 border-red-500 py-2 w-fit font-semibold">
        MediaSocial
      </p>
@ -62,15 +62,6 @@ export default function MediaSocial() {
            <TwitterIcon color="#1DA1F2" />
            <p className="pl-2 text-xl">Twitter</p>
          </div>
-          <div className="text-xs text-[#DD8306]">
-            <Link
-              href="https://x.com/DivHumas_Polri"
-              target="_blank"
-              className="flex items-center"
-            >
-              Lihat Semua <ChevronRightIcon />
-            </Link>{" "}
-          </div>
        </div>
        <div>
          <TwitterWidget />
@ -82,15 +73,6 @@ export default function MediaSocial() {
            <IgIcon size={40} color="#1DA1F2" />
            <p className="pl-2 text-xl">Instagram</p>
          </div>
-          <div className="text-xs text-[#DD8306]">
-            <Link
-              href="https://www.instagram.com/divisihumaspolri/"
-              target="_blank"
-              className="flex items-center"
-            >
-              Lihat Semua <ChevronRightIcon />
-            </Link>{" "}
-          </div>
        </div>
        <div className="">
          <InstagramWidget />
@ -102,15 +84,6 @@ export default function MediaSocial() {
            <FbIcon color="#1DA1F2" />
            <p className="pl-2 text-xl">Facebook</p>
          </div>
-          <div className="text-xs text-[#DD8306] flex items-center">
-            <Link
-              href="https://www.facebook.com/DivHumasPolri"
-              target="_blank"
-              className="flex items-center"
-            >
-              Lihat Semua <ChevronRightIcon />
-            </Link>
-          </div>
        </div>
        <FacebookWidget />
      </div>
@ -120,15 +93,6 @@ export default function MediaSocial() {
            <TtIcon color="#1DA1F2" size={40} />
            <p className="pl-2 text-xl">Tiktok</p>
          </div>
-          <div className="text-xs text-[#DD8306] flex items-center">
-            <Link
-              href="https://www.tiktok.com/@divhumaspolriofficial"
-              target="_blank"
-              className="flex items-center"
-            >
-              Lihat Semua <ChevronRightIcon />
-            </Link>{" "}
-          </div>
        </div>
        <FacebookWidget />
      </div>
@ -138,15 +102,6 @@ export default function MediaSocial() {
            <YtIcon color="#1DA1F2" size={40} />
            <p className="text-xl pl-2">Youtube</p>
          </div>
-          <div className="text-xs text-[#DD8306]">
-            <Link
-              href="https://www.youtube.com/channel/UCPiCGqy-07vQJUySV5Gs-kA"
-              className="flex items-center"
-              target="_blank"
-            >
-              Lihat Semua <ChevronRightIcon />
-            </Link>
-          </div>
        </div>
        <div className=" rounded-md ">
          <YoutubeWidget />
--- a/components/landing/NewsTicker.tsx
+++ b/components/landing/NewsTicker.tsx
@ -46,13 +46,13 @@ export default function NewsTicker() {
  }, [article.length]);

  return (
-    <div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between bg-stone-800">
+    <div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between dark:bg-stone-800 bg-gray-50">
      <div className="relative px-4 py-2 font-semibold text-xs lg:text-sm flex items-center bg-amber-500 text-white w-[30%] lg:w-[10%]">
        <span className="mr-2"></span> BREAKING NEWS
        <div className="absolute right-0 top-0 h-full w-4 bg-amber-500 transform translate-x-full clip-path-triangle"></div>
      </div>
      <div
-        className={`w-full  text-white px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${
+        className={`w-full  px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${
          animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"
        }`}
      >
--- a/components/landing/SidebarNav.tsx
+++ b/components/landing/SidebarNav.tsx
@ -48,12 +48,12 @@ export default function SidebarNav() {
          </a>
        </div>
        {selectedTab === "media" ? (
-          <div className="h-[410px] p-2 bg-[#020101] text-white rounded-md border-2 border-white">
+          <div className="h-[410px] p-2 dark:bg-stone-800  bg-[#f0f0f0]  dark:text-white text-black rounded-lg">
            <ScrollShadow hideScrollBar className=" h-[345px]">
              {article?.map((list: any) => (
                <div
                  key={list.id}
-                  className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md"
+                  className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md"
                >
                  <Link href={`news/detail/${list?.id}`}>
                    <p className="text-left font-semibold">{list?.title}</p>
--- a/components/layout/navbar/NavbarHumas.tsx
+++ b/components/layout/navbar/NavbarHumas.tsx
@ -120,7 +120,7 @@ export default function NavbarHumas(props: { size: string }) {
    <Navbar
      isBordered
      maxWidth="full"
-      height={size === "sm" ? "4rem" : "8rem"}
+      height={size === "sm" ? "6rem" : "8rem"}
      className={`transition-all duration-300 ease-in-out backdrop-opacity-10 ${
        size === "sm"
          ? "lg:hidden !bg-white dark:!bg-black "
@ -129,14 +129,14 @@ export default function NavbarHumas(props: { size: string }) {
      classNames={{ wrapper: "px-0" }}
    >
      <div className="w-full h-full flex">
-        <div className="w-full hidden md:flex flex-row pt-3">
+        <div className="w-full hidden lg:flex flex-row">
          <div
            className={`flex flex-wrap items-center justify-between px-[50px] w-full ${
              isOpen ? "bg-white dark:bg-[#1F1A17]" : "bg-transparent"
            }`}
          >
            <Link href={"/"}>
-              <img src="/logohumas.png" alt="logo" className="w-[75px]" />
+              <img src="/logohumas.png" alt="logo" className="w-[95px]" />
            </Link>

            <Dropdown
@ -1089,10 +1089,10 @@ export default function NavbarHumas(props: { size: string }) {
            </div>
          </div>
        </div>
-        <NavbarContent className="lg:hidden basis-1 px-4">
+        <NavbarContent className="lg:hidden px-2">
          <div className="flex justify-between w-full">
            <Link href={"/"}>
-              <img src="/logohumas.png" alt="logo" className="w-[50px]" />
+              <img src="/logohumas.png" alt="logo" className="w-[78px]" />
            </Link>
            <div className="flex flex-row gap-3 items-center">
              <ThemeSwitch />
--- a/components/main/detail/comment.tsx
+++ b/components/main/detail/comment.tsx
@ -1,19 +1,38 @@
-import { Button } from '@nextui-org/button'
-import { Textarea } from '@nextui-org/input'
-import React from 'react'
+import { Button } from "@nextui-org/button";
+import { Textarea } from "@nextui-org/input";
+import React from "react";

 export default function Comment() {
  return (
-        <div className='p-1 md:p-3 lg:p-10 space-y-2 md:spacey-3 lg:space-y-5'>
-            <div><b>Berikan Komentar</b>  &#40;0 Komentar&#41;</div>
+    <div className="p-3 lg:p-10 space-y-2 md:spacey-3 lg:space-y-5">
+      <div>
+        <b>Berikan Komentar</b>
+      </div>
      <Textarea
-                variant='bordered'
+        variant="bordered"
        placeholder="Masukkan Komentar Anda di sini.."
-                className=""
+        className="text-black"
+        classNames={{
+          input: ["w-full", "bg-transparent", "!text-black"],
+          mainWrapper: ["w-full", "bg-transparent"],
+          innerWrapper: ["bg-transparent"],
+          inputWrapper: [
+            "bg-transparent",
+            "dark:bg-transparent",
+            "!border-1 border-gray-300",
+            "hover:bg-transparent",
+            "dark:hover:bg-transparent",
+            "group-data-[focused=true]:bg-transparent",
+            "dark:group-data-[focused=true]:bg-transaparent",
+            "group-data-[focused=false]:bg-transparent",
+            "focus-within:!bg-transparent",
+            "border-1",
+          ],
+        }}
      />
-            <Button className='bg-[#DD8306]'>
+      <Button className="bg-[#DD8306] text-white" radius="none">
        Kirim
      </Button>
    </div>
-    )
+  );
 }
--- a/components/main/detail/list-news.tsx
+++ b/components/main/detail/list-news.tsx
@ -4,158 +4,122 @@ import {
  Breadcrumbs,
  Button,
  Input,
-  Select,
-  SelectItem,
-  SelectSection,
-  Table,
-  TableBody,
-  TableCell,
-  TableColumn,
-  TableHeader,
-  TableRow,
+  Pagination,
 } from "@nextui-org/react";
-import { EyeFilledIcon, SearchIcon } from "../../icons";
+import {
+  CalendarIcon,
+  Calender,
+  ChevronRightIcon,
+  ClockIcon,
+  EyeFilledIcon,
+  SearchIcon,
+  UserIcon,
+} from "../../icons";
 import Link from "next/link";
+import { useEffect, useRef, useState } from "react";
+import { getListArticle } from "@/service/article";
+import { formatMonthString, htmlToString, textEllipsis } from "@/utils/global";

 export default function ListNews() {
-  const searchInput = (
+  const [article, setArticle] = useState<any>([]);
+  const [search, setSearch] = useState("");
+  const [page, setPage] = useState(1);
+  const [totalPage, setTotalPage] = useState(1);
+  const topRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    getArticle();
+  }, [page]);
+
+  async function getArticle() {
+    // loading();
+    topRef.current?.scrollIntoView({ behavior: "smooth" });
+
+    const req = { page: page, search: search, limit: "9" };
+    const response = await getListArticle(req);
+    setArticle(response?.data?.data);
+    setTotalPage(response?.data?.meta?.totalPage);
+    // close();
+  }
+
+  return (
+    <div className="bg-white" ref={topRef}>
+      <div className="text-black py-5 px-3 lg:w-[75vw] mx-auto bg-white">
+        <div className="flex flex-row gap-4">
+          <Link href="/" className="text-black font-semibold">
+            Beranda
+          </Link>
+          <ChevronRightIcon />
+          <p className="text-black">Berita</p>
+        </div>
+        <div className="py-5 lg:py-10 lg:px-24 ">
          <Input
            aria-label="Search"
            className="w-full"
            classNames={{
-        inputWrapper: "bg-white hover:!bg-gray-100",
-        input: "text-sm",
+              inputWrapper: "bg-white hover:!bg-gray-100 border-1",
+              input: "text-sm !text-black",
            }}
            labelPlacement="outside"
            placeholder="Search..."
-      startContent={
-        <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
-      }
+            value={search}
+            onValueChange={setSearch}
            endContent={
-        <Button size="sm" className="bg-[#DD8306] font-semibold">
-          Cari
+              <Button
+                onPress={getArticle}
+                size="sm"
+                className="bg-red-500 font-semibold"
+              >
+                <SearchIcon className="text-white" />
              </Button>
            }
            type="search"
          />
-  );
-
-  const listNews = [
-    {
-      id: 1,
-      thumnbnail: "/headernews.png",
-      title:
-        "Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara",
-      date: "06 Maret, 2024 16:14 HUMAS POLRI",
-      description:
-        "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!",
-    },
-    {
-      id: 2,
-      thumnbnail: "/headernews.png",
-      title:
-        "Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara",
-      date: "06 Maret, 2024 16:14 HUMAS POLRI",
-      description:
-        "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!",
-    },
-    {
-      id: 3,
-      thumnbnail: "/headernews.png",
-      title:
-        "Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara",
-      date: "06 Maret, 2024 16:14 HUMAS ",
-      description:
-        "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!",
-    },
-    {
-      id: 4,
-      thumnbnail: "/headernews.png",
-      title:
-        "Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara",
-      date: "06 Maret, 2024 16:14 HUMAS POLRI",
-      description:
-        "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!",
-    },
-    {
-      id: 5,
-      thumnbnail: "/headernews.png",
-      title:
-        "Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara",
-      date: "06 Maret, 2024 16:14 HUMAS POLRI",
-      description:
-        "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!",
-    },
-    {
-      id: 6,
-      thumnbnail: "/headernews.png",
-      title:
-        "Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara",
-      date: "06 Maret, 2024 16:14 HUMAS POLRI",
-      description:
-        "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!",
-    },
-    {
-      id: 7,
-      thumnbnail: "/headernews.png",
-      title:
-        "Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara",
-      date: "06 Maret, 2024 16:14 HUMAS POLRI",
-      description:
-        "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!",
-    },
-    {
-      id: 8,
-      thumnbnail: "/headernews.png",
-      title:
-        "Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara",
-      date: "06 Maret, 2024 16:14 HUMAS POLRI",
-      description:
-        "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!",
-    },
-    {
-      id: 9,
-      thumnbnail: "/headernews.png",
-      title:
-        "Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara",
-      date: "06 Maret, 2024 16:14 HUMAS POLRI",
-      description:
-        "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!",
-    },
-  ];
-
-  return (
-    <div className="self-center mx-auto text-black py-5">
-      <Breadcrumbs color="primary">
-        <BreadcrumbItem href="/">Beranda</BreadcrumbItem>
-        <BreadcrumbItem>Berita</BreadcrumbItem>
-      </Breadcrumbs>
-      <div className="flex-wrap grid  grid-cols-1 md:grid-cols-2 lg:grid-cols-3 pt-5 place-items-center gap-7">
-        {listNews.map((news) => (
-          <Link href={`/news/detail/${news.id}`} key={news.id}>
-            <div className="h-auto w-[300px] text-xs">
-              <div className="h-[50%]">
-                <img src={news.thumnbnail} alt="" className="w-max" />
        </div>
-              <div className="px-3 py-3">
-                <div className="font-medium text-sm leading-5 ">
-                  {news.title}
+        <section
+          id="content"
+          className=" grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7"
+        >
+          {article?.map((news: any) => (
+            <Link
+              href={`/news/detail/${news?.id}-${news?.slug}`}
+              key={news?.id}
+            >
+              <div className="">
+                <img src="/headernews.png" alt="thumbnail" />
              </div>
-                <div className="flex pb-1">
-                  <div className="text-xs">{news.date}</div>
-                  {/* <div>jam</div>
-                                <div>creator</div> */}
+              <div className="p-2 lg:p-5 bg-[#f0f0f0] h-[220px]">
+                <div className="font-semibold text-lg">{news?.title}</div>
+                <div className="flex flex-row items-center py-1 text-xs gap-2">
+                  <div className="flex flex-row items-center gap-1">
+                    <CalendarIcon size={18} />
+                    <p>{formatMonthString(news?.updatedAt)}</p>
                  </div>
-                <div className="text-clip">
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis
-                  est quas soluta deserunt ullam. Sapiente facilis modi vitae.
-                  Aspernatur excepturi quo amet omnis laudantium inventore
-                  praesentium illum hic reiciendis error.
+                  <div className="flex flex-row items-center">
+                    <ClockIcon size={18} />
+                    <p>{`${new Date(news?.updatedAt)
+                      .getHours()
+                      .toString()
+                      .padStart(2, "0")}:${new Date(news?.updatedAt)
+                      .getMinutes()
+                      .toString()
+                      .padStart(2, "0")}`}</p>
                  </div>
+                  <div className="flex flex-row items-center gap-1">
+                    <UserIcon size={14} />
+                    <p>DIVISI HUMAS POLRI</p>
+                  </div>
+                </div>
+                <div className="text-sm">
+                  {textEllipsis(htmlToString(news?.description), 165)}
                </div>
              </div>
            </Link>
          ))}
+        </section>
+        <div className="flex justify-center mt-5">
+          <Pagination page={page} total={totalPage} onChange={setPage} />
+        </div>
      </div>
    </div>
  );
--- a/components/main/detail/new-detail.tsx
+++ b/components/main/detail/new-detail.tsx
@ -6,10 +6,13 @@ import RelatedNews from "../../page/related-news";
 import Comment from "./comment";
 import { getArticleById } from "@/service/article";
 import { useParams } from "next/navigation";
+import Link from "next/link";
+import { ChevronLeftIcon, ChevronRightIcon } from "@/components/icons";
+import { close, loading } from "@/config/swal";

 export default function NewsDetailPage() {
  const params = useParams();
-  const id = params.id;
+  const id: any = params?.id;
  const [detailArticle, setDetailArticle] = useState();

  useEffect(() => {
@ -17,29 +20,40 @@ export default function NewsDetailPage() {
  }, []);

  const initFetch = async () => {
-    const res = await getArticleById(id);
+    loading();
+    const res = await getArticleById(id?.split("-")[0]);
    const data = res?.data?.data;
    setDetailArticle(data);
+    close();
  };
  return (
-    <>
-      <div className="text-black md:flex bg-white p-10">
-        <div className="w-auto md:w-[75%]">
-          <DetailNews data={detailArticle} />
+    <div className="bg-white">
+      <div className="px-5 lg:px-0 lg:w-[70vw] mx-auto py-8">
+        <div className="flex flex-row gap-4 items-end text-black">
+          <Link href="/" className=" font-semibold text-lg">
+            Beranda
+          </Link>
+          <ChevronRightIcon />
+          <p className=" text-lg">Berita</p>
        </div>
-        <div className="w-auto md:w-[25%] hidden md:block">
+        <div className="text-black lg:flex bg-white gap-4">
+          <DetailNews data={detailArticle} />
+          <div className="w-auto lg:w-[25%] hidden lg:block">
            <SidebarDetail />
          </div>
        </div>
-      <div className="bg-[#eeeeee] text-black h-auto my-2 md:my-5 lg:my-10 px-3 md:px-36">
+
+        <div className="bg-gray-50 text-black dark:bg-stone-900 dark:text-white h-auto my-2 md:my-5 lg:my-10 px-3 lg:px-36 rounded-lg shadow-md">
          <Comment />
        </div>
-      <div className="px-36">
+
+        <div className="bg-gray-50 text-black dark:bg-stone-900 dark:text-white lg:px-24 my-4 lg:my-8 pt-3 lg:pb-4 rounded-lg shadow-md h-fit">
          <RelatedNews />
        </div>
        <div className="md:hidden text-black">
          <SidebarDetail />
        </div>
-    </>
+      </div>
+    </div>
  );
 }
--- a/components/page/detail-news.tsx
+++ b/components/page/detail-news.tsx
@ -1,73 +1,171 @@
 "use client";
-import { convertDateFormat, formatTextToHtmlTag } from "@/utils/global";
+import {
+  convertDateFormat,
+  formatMonthString,
+  formatTextToHtmlTag,
+} from "@/utils/global";
 import Image from "next/image";
-import { EyeIcon, EyeIconMdi } from "../icons";
+import {
+  CalendarIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ClockIcon,
+  EyeIcon,
+  EyeIconMdi,
+  FacebookIcon,
+  SquareFacebookIcon,
+  SquareLinkedInIcon,
+  SquareWhatsappIcon,
+  SquareXIcon,
+  UserIcon,
+} from "../icons";
+import { Button } from "@nextui-org/button";
+import { usePathname } from "next/navigation";
+import Link from "next/link";

 export default function DetailNews(props: { data: any }) {
  const { data } = props;
+  const pathname = usePathname();
+  const shareText = "Cek situs ini!";
+
+  const handleShare = (platform: string) => {
+    let shareLink = "";
+    const urls = "https://kontenhumas.com/" + pathname;
+
+    switch (platform) {
+      case "facebook":
+        shareLink = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
+          urls
+        )}`;
+        break;
+      case "x":
+        shareLink = `https://x.com/intent/tweet?url=${encodeURIComponent(
+          urls
+        )}&text=${encodeURIComponent(shareText)}`;
+        break;
+      case "linkedin":
+        shareLink = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(
+          urls
+        )}`;
+        break;
+      case "whatsapp":
+        shareLink = `https://wa.me/?text=${encodeURIComponent(
+          shareText + " " + urls
+        )}`;
+        break;
+      default:
+        break;
+    }
+
+    const popupWidth = 800;
+    const popupHeight = 600;
+    const left = window.screenX + (window.innerWidth - popupWidth) / 2;
+    const top = window.screenY + (window.innerHeight - popupHeight) / 2;
+
+    window.open(
+      shareLink,
+      "_blank",
+      `width=${popupWidth},height=${popupHeight},top=${top},left=${left},resizable=no,scrollbars=no,toolbar=no,menubar=no,status=no`
+    );
+  };
  return (
-    <div className="px-3 md:px-36">
-      <div className=" px-1 md:px-3">
-        <Image
-          width={1100}
-          height={500}
-          alt="NextUI hero Image"
-          src="/detail.png"
-        />
+    <div className="flex flex-col gap-2 py-4">
+      <p className="font-semibold text-xl lg:text-3xl">{data?.title}</p>
+      <div className="flex flex-row items-center py-1 text-xs lg:text-lg gap-2 lg:gap-4">
+        <div className="flex flex-row items-center gap-1">
+          <UserIcon size={16} className="lg:hidden" />
+          <UserIcon size={22} className="hidden lg:block" />
+          <p className="uppercase">{data?.createdByName}</p>
+        </div>
+        <div className="flex flex-row items-center gap-1">
+          <CalendarIcon size={16} className="lg:hidden" />
+          <CalendarIcon size={24} className="hidden lg:block" />
+          <p>{formatMonthString(data?.updatedAt)}</p>
+        </div>
+        <div className="flex flex-row items-center">
+          <ClockIcon size={16} className="lg:hidden" />
+          <ClockIcon size={24} className="hidden lg:block" />
+          <p>{`${new Date(data?.updatedAt)
+            .getHours()
+            .toString()
+            .padStart(2, "0")}:${new Date(data?.updatedAt)
+            .getMinutes()
+            .toString()
+            .padStart(2, "0")}`}</p>
        </div>
-      <div>
-        <div className="md:flex px-1 md:px-6 text-xs lg:text-medium gap-3">
-          <p>
-            Oleh <b className="capitalize">{data?.createdByName}</b>
-          </p>
-          <p className="hidden md:block">|</p>
-          <p>Diupdate pada {convertDateFormat(data?.createdAt)} WIB</p>
-          <p className="hidden md:block">|</p>
        <p className="flex items-center gap-1">
-            <EyeIconMdi />
+          <EyeIconMdi size={16} className="lg:hidden" />
+          <EyeIconMdi size={16} className="hidden lg:block" />
          {data?.viewCount === null ? 0 : data?.viewCount}
        </p>
-          <div className="flex gap-2 md:hidden">
-            <div>
-              <Image height={185} width={185} src="/fb.png" alt="medsos" />
      </div>
-            <div>
-              <Image height={185} width={185} src="/twitter.png" alt="medsos" />
-            </div>
-            <div>
-              <Image
-                height={185}
-                width={185}
-                src="/linkedin.png"
-                alt="medsos"
+      <div className="flex justify-center my-2 lg:my-5">
+        <img
+          alt="NextUI hero Image"
+          src="/detail.png"
+          className="object-cover w-[80%]"
        />
      </div>
-            <div>
-              <Image height={185} width={185} src="/wa.png" alt="medsos" />
-            </div>
-          </div>
-        </div>
-        <div className="px-1 md:px-5 text-sm md:text-medium space-y-3 py-2">
-          <p className="font-bold text-lg">{data?.title}</p>
      <div
        dangerouslySetInnerHTML={formatTextToHtmlTag(data?.htmlDescription)}
+        className="text-sm lg:text-xl lg:leading-8"
      />
+
+      <div className="grid grid-cols-2  md:grid-cols-4 gap-5 my-8">
+        <Button
+          variant="solid"
+          radius="none"
+          onPress={() => handleShare("facebook")}
+          className="w-[80%] bg-[#3b5998] text-white px-4 py-2 flex flex-row"
+        >
+          <div className="w-1/4 ">
+            <SquareFacebookIcon />
          </div>
-        <div className="hidden sm:grid grid-cols-5 px-1 md:px-3 pt-10">
-          <div>
-            <Image height={185} width={185} src="/fb.png" alt="medsos" />
+          <div className="w-3/4 text-xl ">Facebook</div>
+        </Button>
+        <Button
+          variant="solid"
+          radius="none"
+          onPress={() => handleShare("x")}
+          className="w-[80%] bg-black text-white px-4 py-2 flex flex-row"
+        >
+          <div className="w-1/4 ">
+            <SquareXIcon />
          </div>
-          <div>
-            <Image height={185} width={185} src="/twitter.png" alt="medsos" />
-          </div>
-          <div>
-            <Image height={185} width={185} src="/linkedin.png" alt="medsos" />
-          </div>
-          <div>
-            <Image height={185} width={185} src="/wa.png" alt="medsos" />
+          <div className="w-3/4 text-xl ">X</div>
+        </Button>
+        <Button
+          variant="solid"
+          radius="none"
+          onPress={() => handleShare("linkedin")}
+          className="w-[80%] bg-[#0E76A8] text-white px-4 py-2 flex flex-row"
+        >
+          <div className="w-1/4 ">
+            <SquareLinkedInIcon />
          </div>
+          <div className="w-3/4 text-xl ">LinkedIn</div>
+        </Button>
+        <Button
+          variant="solid"
+          radius="none"
+          onPress={() => handleShare("whatsapp")}
+          className="w-[80%] bg-[#25D366] text-white px-4 py-2 flex flex-row"
+        >
+          <div className="w-1/4 ">
+            <SquareWhatsappIcon />
          </div>
+          <div className="w-3/4 text-xl ">Whatsapp</div>
+        </Button>
      </div>
+      {/* <div className="flex justify-between text-black">
+        <Link href={`#`} className="flex flex-row itesm-center gap-3 w-fit">
+          <ChevronLeftIcon /> Sebelumnya
+        </Link>
+        <Link href={`#`} className="flex flex-row itesm-center gap-3 w-fit">
+          <ChevronRightIcon /> Selanjutnya
+        </Link>
+        <Link href={`#`}></Link>
+      </div> */}
    </div>
  );
 }
--- a/components/page/related-news.tsx
+++ b/components/page/related-news.tsx
@ -1,78 +1,83 @@
 "use client";
 import { Card, CardBody, CardFooter, Image } from "@nextui-org/react";
-import React from "react";
-import { UnderLine } from "../icons";
+import React, { useEffect, useState } from "react";
+import { EyeIcon, UnderLine } from "../icons";
+import { getListArticle } from "@/service/article";
+import { Autoplay, Pagination, Navigation } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/effect-fade";
+import "swiper/css/navigation";
+import Link from "next/link";
+import { convertDateFormat, textEllipsis } from "@/utils/global";

 export default function RelatedNews() {
-  const list = [
-    {
-      title:
-        "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
-      img: "/relatedNews.png",
-      desc: "$5.50",
-    },
-    {
-      title:
-        "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
-      img: "/headernews.png",
-      price: "$3.00",
-    },
-    {
-      title:
-        "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
-      img: "/relatedNews.png",
-      desc: "$5.50",
-    },
-    {
-      title:
-        "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
-      img: "/relatedNews.png",
-      desc: "$5.50",
-    },
-    {
-      title:
-        "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
-      img: "/headernews.png",
-      price: "$3.00",
-    },
-  ];
+  const [article, setArticle] = useState<any>([]);
+
+  useEffect(() => {
+    async function getArticle() {
+      const req = { page: 1, search: "", limit: "10" };
+
+      const response = await getListArticle(req);
+      setArticle(response?.data?.data);
+    }
+    getArticle();
+  }, []);
  return (
-    <div className="text-black flex flex-col items-center my-10">
-      <div className="text-2xl font-bold flex flex-col items-center">
-        <div>Kategori Satker</div>
+    <div className="flex flex-col items-center">
+      <div className="text-2xl font-bold flex flex-col items-center mb-3">
+        <div>Berita Terkait</div>
        <div>
          <UnderLine />
        </div>
      </div>
-      <div className="w-full bg-white rounded-lg">
-        <div className="gap-4 grid grid-cols-1 sm:grid-cols-5 w-full bg-white rounded-lg">
-          {list.map((item, index) => (
-            <Card
-              className="bg-white text-black"
-              shadow="sm"
-              key={index}
-              isPressable
-              onPress={() => console.log("item pressed")}
+      <div className="w-[90vw] lg:w-full bg-[#f0f0f0]">
+        <div>
+          <Swiper
+            centeredSlides={false}
+            spaceBetween={10}
+            autoplay={{
+              delay: 5000,
+              disableOnInteraction: false,
+            }}
+            navigation={true}
+            modules={[Autoplay, Navigation]}
+            className="mySwiper"
+            slidesPerView={1}
+            breakpoints={{
+              // When the window width is less than 640px
+              720: {
+                slidesPerView: 4, // Set slidesPerView to 1 on mobile
+              },
+            }}
          >
-              <CardBody className="overflow-visible p-2">
-                <Image
-                  // shadow="sm"
-                  radius="lg"
-                  width="100%"
-                  alt={item.title}
-                  className="w-full object-cover h-[260px]"
-                  src={item.img}
+            {article?.map((newsItem: any) => (
+              <SwiperSlide key={newsItem.id}>
+                <Card isFooterBlurred radius="lg" className="border-none">
+                  <img
+                    alt="headernews"
+                    src="/headernews.png"
+                    className="h-[25vh] object-cover rounded-none"
                  />
-                <p className="text-xs pt-2 pl-1">24/01/2024 14:08 WIB</p>
-              </CardBody>
-              <CardFooter className="text-small text-left p-1 flex flex-col items-start">
-                <b>{item.title}</b>
-                <p className="text-xs  py-2 text-blue-700">
-                  Lihat Selengkapnya
+                  <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute bottom-1 shadow-small z-10">
+                    <div className="text-black dark:text-white lg:text-white">
+                      <Link
+                        href={`/news/detail/${newsItem.id}-${newsItem.slug}`}
+                      >
+                        <p className="text-left font-semibold text-sm">
+                          {textEllipsis(newsItem.title, 40)}
                        </p>
+                      </Link>
+                      <p className="py-[2px] text-left text-sm">
+                        {convertDateFormat(newsItem.createdAt)} WIB
+                      </p>
+                    </div>
                  </CardFooter>
                </Card>
+              </SwiperSlide>
            ))}
+          </Swiper>
        </div>
      </div>
    </div>
--- a/components/page/sidebar-detail.tsx
+++ b/components/page/sidebar-detail.tsx
@ -1,45 +1,130 @@
-import React from 'react'
-import { UnderLine } from '../icons'
+"use client";
+import React, { useEffect, useState } from "react";
+import { UnderLine } from "../icons";
+import { Autoplay, Pagination, Navigation, Mousewheel } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/effect-fade";
+import "swiper/css/pagination";
+import Link from "next/link";
+import { getListArticle } from "@/service/article";
+import { Card, CardFooter } from "@nextui-org/react";
+import { convertDateFormat, textEllipsis } from "@/utils/global";

 export default function SidebarDetail() {
-    return (
-        <div className='mt-2 space-y-5'>
-            <div className='font-semibold flex flex-col items-center space-y-5'>
-                <div className='flex  flex-col items-center'>
-                    <div>Humas <b>MABES POLRI</b></div>
-                    <div><UnderLine /></div>
-                </div>
-                <div className='bg-[#F2F2F2] p-3 flex flex-col items-center w-auto lg:w-[310px]'>
-                    <img src="/detailmabes.png" alt="detail" className=' h-[110px]' />
-                    <p className='text-sm'>Depan Jamaah Habib Syech, Kaops NCS Polri Serukan Jaga Pemilu 2024 Aman dan Damai</p>
-                </div>
-                <div className='bg-[#F2F2F2] p-3 flex flex-col items-center  w-auto lg:w-[310px]'>
-                    <img src="/detailmabes.png" alt="detail" className=' h-[110px]' />
-                    <p className='text-sm'>Depan Jamaah Habib Syech, Kaops NCS Polri Serukan Jaga Pemilu 2024 Aman dan Damai</p>
-                </div>
-                <div className='bg-[#F2F2F2] p-3 flex flex-col items-center w-auto lg:w-[310px]'>
-                    <img src="/detailmabes.png" alt="detail" className=' h-[110px]' />
-                    <p className='text-sm'>Depan Jamaah Habib Syech, Kaops NCS Polri Serukan Jaga Pemilu 2024 Aman dan Damai</p>
-                </div>
-            </div>
-            <div className='font-semibold flex flex-col items-center space-y-5'>
-                <div className='flex  flex-col items-center'>
-                    <div>Humas <b>POLDA</b></div>
-                    <div><UnderLine /></div>
-                </div>
-                <div className='bg-[#F2F2F2] p-3 flex flex-col items-center w-auto lg:w-[310px]'>
-                    <img src="/detailmabes.png" alt="detail" className=' h-[110px]' />
-                    <p className='text-sm'>Depan Jamaah Habib Syech, Kaops NCS Polri Serukan Jaga Pemilu 2024 Aman dan Damai</p>
-                </div>
-                <div className='bg-[#F2F2F2] p-3 flex flex-col items-center  w-auto lg:w-[310px]'>
-                    <img src="/detailmabes.png" alt="detail" className=' h-[110px]' />
-                    <p className='text-sm'>Depan Jamaah Habib Syech, Kaops NCS Polri Serukan Jaga Pemilu 2024 Aman dan Damai</p>
-                </div>
-                <div className='bg-[#F2F2F2] p-3 flex flex-col items-center w-auto lg:w-[310px]'>
-                    <img src="/detailmabes.png" alt="detail" className=' h-[110px]' />
-                    <p className='text-sm'>Depan Jamaah Habib Syech, Kaops NCS Polri Serukan Jaga Pemilu 2024 Aman dan Damai</p>
-                </div>
-            </div>
-        </div>
-    )
+  const [article, setArticle] = useState<any>([]);
+
+  useEffect(() => {
+    async function getArticle() {
+      const req = { page: 1, search: "", limit: "10" };
+
+      const response = await getListArticle(req);
+      setArticle(response?.data?.data);
+    }
+    getArticle();
+  }, []);
+  return (
+    <div className="mt-2 space-y-5">
+      <div className="font-semibold flex flex-col items-center space-y-5">
+        <div className="flex  flex-col items-center">
+          <div>
+            Humas <b>MABES POLRI</b>
+          </div>
+          <div>
+            <UnderLine />
+          </div>
+        </div>
+        <div className="w-full lg:w-[300px] h-[400px] lg:p-4">
+          <Swiper
+            direction={"vertical"}
+            centeredSlides={false}
+            spaceBetween={10}
+            mousewheel={true}
+            autoplay={{
+              delay: 5000,
+              disableOnInteraction: false,
+            }}
+            pagination={{
+              clickable: true,
+            }}
+            modules={[Autoplay, Pagination, Mousewheel]}
+            className="mySwiper"
+            slidesPerView={2}
+          >
+            {article?.map((newsItem: any) => (
+              <SwiperSlide key={newsItem.id}>
+                <div className="h-[230px] lg:h-[180px] flex flex-col gap-2 bg-gray-50 dark:bg-stone-900 p-5">
+                  <img
+                    alt="headernews"
+                    src="/headernews.png"
+                    className="object-cover !h-[70%]"
+                  />
+                  <div className="text-black dark:text-white flex flex-col">
+                    <Link href={`/news/detail/${newsItem.id}-${newsItem.slug}`}>
+                      <p className="text-left font-semibold text-xs">
+                        {textEllipsis(newsItem.title, 40)}
+                      </p>
+                    </Link>
+                    <p className="py-[2px] text-left text-xs">
+                      {convertDateFormat(newsItem.createdAt)} WIB
+                    </p>
+                  </div>
+                </div>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </div>
+      </div>
+      <div className="font-semibold flex flex-col items-center space-y-5">
+        <div className="flex  flex-col items-center">
+          <div>
+            Humas <b>POLDA</b>
+          </div>
+          <div>
+            <UnderLine />
+          </div>
+        </div>
+        <div className="w-full lg:w-[300px] h-[500px] lg:h-[400px] lg:p-4">
+          <Swiper
+            direction={"vertical"}
+            centeredSlides={false}
+            spaceBetween={10}
+            mousewheel={true}
+            autoplay={{
+              delay: 5000,
+              disableOnInteraction: false,
+            }}
+            pagination={{
+              clickable: true,
+            }}
+            modules={[Autoplay, Pagination, Mousewheel]}
+            className="mySwiper"
+            slidesPerView={2}
+          >
+            {article?.map((newsItem: any) => (
+              <SwiperSlide key={newsItem.id}>
+                <div className="h-[230px] lg:h-[180px] flex flex-col gap-2 bg-gray-50 dark:bg-stone-900 p-5">
+                  <img
+                    alt="headernews"
+                    src="/headernews.png"
+                    className="object-cover !h-[70%]"
+                  />
+                  <div className="text-black dark:text-white flex flex-col">
+                    <Link href={`/news/detail/${newsItem.id}-${newsItem.slug}`}>
+                      <p className="text-left font-semibold text-xs">
+                        {textEllipsis(newsItem.title, 40)}
+                      </p>
+                    </Link>
+                    <p className="py-[2px] text-left text-xs">
+                      {convertDateFormat(newsItem.createdAt)} WIB
+                    </p>
+                  </div>
+                </div>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </div>
+      </div>
+    </div>
+  );
 }
--- a/components/ui/social-media/gpr-kominfo.tsx
+++ b/components/ui/social-media/gpr-kominfo.tsx
@ -16,7 +16,7 @@ const GPRKominfo = () => {

  return (
    <>
-      <div id="gpr-kominfo-widget-header" className=""></div>
+      <div id="gpr-kominfo-widget-header"></div>
      <div id="gpr-kominfo-widget-body"></div>
      <div id="gpr-kominfo-widget-footer"></div>
    </>
--- a/service/article.ts
+++ b/service/article.ts
@ -14,7 +14,9 @@ export async function getListArticle(props: PaginationRequest) {
    "content-type": "application/json",
  };
  return await httpGet(
-    `/articles?limit=${limit}&page=${page}&title=${search}&startDate=${startDate}&endDate=${endDate}`,
+    `/articles?limit=${limit}&page=${page}&title=${search}&startDate=${
+      startDate || ""
+    }&endDate=${endDate || ""}`,
    headers
  );
 }
--- a/utils/global.tsx
+++ b/utils/global.tsx
@ -92,3 +92,49 @@ export function textEllipsis(
  }
  return str;
 }
+
+export function htmlToString(str: string) {
+  if (str == undefined || str == null) {
+    return "";
+  }
+  return (
+    str
+      .replaceAll(/<style[^>]*>.*<\/style>/gm, "")
+      // Remove script tags and content
+      .replaceAll(/<script[^>]*>.*<\/script>/gm, "")
+      // Replace &nbsp,&ndash
+      .replaceAll("&nbsp;", "")
+      .replaceAll("&ndash;", "-")
+      // Replace quotation mark
+      .replaceAll("&ldquo;", '"')
+      .replaceAll("&rdquo;", '"')
+      // Remove all opening, closing and orphan HTML tags
+      .replaceAll(/<[^>]+>/gm, "")
+      // Remove leading spaces and repeated CR/LF
+      .replaceAll(/([\n\r]+ +)+/gm, "")
+  );
+}
+
+export function formatMonthString(dateString: string) {
+  const months = [
+    "Januari",
+    "Februari",
+    "Maret",
+    "April",
+    "Mei",
+    "Juni",
+    "Juli",
+    "Agustus",
+    "September",
+    "Oktober",
+    "November",
+    "Desember",
+  ];
+
+  const date = new Date(dateString); // Konversi string ke objek Date
+  const day = date.getDate(); // Ambil tanggal
+  const month = months[date.getMonth()]; // Ambil nama bulan
+  const year = date.getFullYear(); // Ambil tahun
+
+  return `${day} ${month} ${year}`;
+}