From 06ad352c8912057479b7d92c66b74a762fe4c79f Mon Sep 17 00:00:00 2001 From: Sabda Yagra Date: Wed, 5 Mar 2025 17:05:44 +0700 Subject: [PATCH 1/2] fix:polda and satker section --- .../components/contact-us.tsx | 0 .../[polda_name]/components/hero-kaltara.tsx | 171 +++++++++++++ .../[polda_name]/components/latest-news.tsx | 189 +++++++++++++++ .../[polda_name]/components/national-news.tsx | 186 +++++++++++++++ .../components/navbar-kaltara.tsx | 34 +-- .../components/news-tickers-kaltara.tsx | 18 +- .../components/popular-news.tsx | 0 .../[polda_name]/components/regional-news.tsx | 188 +++++++++++++++ .../[polda_name]/components/social-media.tsx | 224 ++++++++++++++++++ .../{polda-kaltara => [polda_name]}/page.tsx | 5 +- .../polda-kaltara/components/hero-kaltara.tsx | 161 ------------- .../polda-kaltara/components/latest-news.tsx | 168 ------------- .../components/national-news.tsx | 168 ------------- .../components/regional-news.tsx | 168 ------------- .../polda-kaltara/components/social-media.tsx | 219 ----------------- app/[locale]/page.tsx | 6 +- .../area-coverage-and-work-units.tsx | 68 ++++++ components/landing-page/coverage.tsx | 113 ++++----- components/landing-page/division.tsx | 59 ++--- components/landing-page/hero.tsx | 6 +- components/landing-page/news-tickers.tsx | 2 +- public/assets/indo.png | Bin 0 -> 4651 bytes public/assets/logo-polri.png | Bin 0 -> 10103 bytes 23 files changed, 1130 insertions(+), 1023 deletions(-) rename app/[locale]/(public)/(polda)/tbnews/{polda-kaltara => [polda_name]}/components/contact-us.tsx (100%) create mode 100644 app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx create mode 100644 app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/latest-news.tsx create mode 100644 app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/national-news.tsx rename app/[locale]/(public)/(polda)/tbnews/{polda-kaltara => [polda_name]}/components/navbar-kaltara.tsx (73%) rename app/[locale]/(public)/(polda)/tbnews/{polda-kaltara => [polda_name]}/components/news-tickers-kaltara.tsx (68%) rename app/[locale]/(public)/(polda)/tbnews/{polda-kaltara => [polda_name]}/components/popular-news.tsx (100%) create mode 100644 app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx create mode 100644 app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx rename app/[locale]/(public)/(polda)/tbnews/{polda-kaltara => [polda_name]}/page.tsx (88%) delete mode 100644 app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/hero-kaltara.tsx delete mode 100644 app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/latest-news.tsx delete mode 100644 app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/national-news.tsx delete mode 100644 app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/regional-news.tsx delete mode 100644 app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/social-media.tsx create mode 100644 components/landing-page/area-coverage-and-work-units.tsx create mode 100644 public/assets/indo.png create mode 100644 public/assets/logo-polri.png diff --git a/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/contact-us.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/contact-us.tsx similarity index 100% rename from app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/contact-us.tsx rename to app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/contact-us.tsx diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx new file mode 100644 index 00000000..5cd55cb9 --- /dev/null +++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx @@ -0,0 +1,171 @@ +"use client"; + +import { Reveal } from "@/components/landing-page/Reveal"; +import { Icon } from "@/components/ui/icon"; +import { Skeleton } from "@/components/ui/skeleton"; +import { listData } from "@/service/landing/landing"; +import { formatDateToIndonesian, getPublicLocaleTimestamp } from "@/utils/globals"; +import Image from "next/image"; +import { useParams } from "next/navigation"; +import React, { useEffect, useState } from "react"; + +const HeroKaltara = () => { + const params = useParams(); + const poldaName: any = params?.polda_name; + const [content, setContent] = useState([]); + const [centerPadding, setCenterPadding] = useState(); + const [isBannerLoading, setIsBannerLoading] = useState(true); + + useEffect(() => { + // async function initState() { + // const res = await listCarousel(); + // setContent(res?.data?.data); + // setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`); + // } + + async function fetchData() { + const res = await listData("1", "", "", 5, 0, "createdAt", "", "", poldaName); + let data = res?.data?.data?.content; + setContent(data); + setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`); + setIsBannerLoading(false); + console.log("Done", poldaName); + } + + fetchData(); + }, [params?.page]); + + const settings = { + className: "center", + // centerMode: true, + infinite: true, + centerPadding, + slidesToShow: 2, + autoplay: true, + speed: 1500, + autoplaySpeed: 15_000, + focusOnSelect: true, + responsive: [ + { + breakpoint: 768, + settings: { + arrows: false, + centerMode: true, + centerPadding: "60px", + slidesToShow: 1, + }, + }, + { + breakpoint: 480, + settings: { + arrows: false, + centerMode: true, + centerPadding: "20px", + slidesToShow: 1, + }, + }, + ], + }; + + return ( + <> + +
+ {isBannerLoading ? ( +
+ +
+ + +
+
+ ) : ( +
+ {content?.map((row: any) => ( +
+ gambar-utama

{row.title}

+
+

{row?.categoryName}

+

+ {getPublicLocaleTimestamp(new Date(row?.createdAt))} WIB {" | "} + {row?.clickCount} +

+
+

{row?.description}

+
+ ))} +
+ )} + + {isBannerLoading ? ( +
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ ) : ( +
+ {content?.map((item: any) => ( +
+
+ +
+
+

{item?.title}

+
+

{item?.categoryName}

+

+ {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "} + + + {" "} + {item?.clickCount}{" "} +

+
+
+
+ ))} +
+ )} +
+ + + ); +}; + +export default HeroKaltara; diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/latest-news.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/latest-news.tsx new file mode 100644 index 00000000..5bc1fbcf --- /dev/null +++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/latest-news.tsx @@ -0,0 +1,189 @@ +"use client"; + +import { Reveal } from "@/components/landing-page/Reveal"; +import { Skeleton } from "@/components/ui/skeleton"; +import { listData } from "@/service/landing/landing"; +import { formatDateToIndonesian } from "@/utils/globals"; +import { useTranslations } from "next-intl"; +import Image from "next/image"; +import { useParams } from "next/navigation"; +import React, { useEffect, useState } from "react"; + +const LatestNews = (props: { type: string }) => { + const [isLoading, setIsLoading] = useState(true); + const params = useParams(); + const [content, setContent] = useState([]); + const [centerPadding, setCenterPadding] = useState(); + const [isBannerLoading, setIsBannerLoading] = useState(true); + const poldaName: any = params?.polda_name; + const t = useTranslations("LandingPage"); + + useEffect(() => { + const timer = setTimeout(() => { + setIsLoading(false); + }, 3000); + + return () => clearTimeout(timer); + }, []); + + // useEffect(() => { + // async function fetchCategories() { + // const url = "https://netidhub.com/api/csrf"; + + // try { + // const response = await fetch(url); + + // if (!response.ok) { + // throw new Error(`HTTP error! status: ${response.status}`); + // } + + // const data = await response.json(); + // return data; // Menampilkan data yang diterima dari API + // } catch (error) { + // console.error("Fetch error: ", error); + // } + // } + + // fetchCategories(); + // initFetch(); + // }, []); + + // const initFetch = async () => { + // const response = await getHeroData(); + // console.log(response); + // setHeroData(response?.data?.data?.content); + // }; + + useEffect(() => { + // async function initState() { + // const res = await listCarousel(); + // setContent(res?.data?.data); + // setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`); + // } + + async function fetchData() { + const sortBy = poldaName === "popular" ? "clickCount" : "createdAt"; + const res = await listData("1", "", "", 5, 0, sortBy, "", "", poldaName); + let data = res?.data?.data?.content; + setContent(data); + setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`); + setIsBannerLoading(false); + console.log("Done", poldaName); + } + + fetchData(); + }, [params?.page]); + + return ( + <> + +
+
+

Berita {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"}

+
+
+
+ {isLoading ? ( +
+ +
+ + +
+
+ ) : ( +
+ {content?.map((row: any) => ( +
+ gambar-utama

{row?.title}

+
+

{row?.categoryName}

+

+ {formatDateToIndonesian(new Date(row?.createdAt))} {row?.timezone ? row?.timezone : "WIB"}|{" "} + + + {" "} + {row?.clickCount}{" "} +

+
+

{row?.description}

+
+ ))} +
+ )} + + {isLoading ? ( +
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ ) : ( +
+ {content?.map((item: any) => ( +
+ {/*
+ +
*/} +
+

{item?.title}

+
+

{item?.categoryName}

+

+ {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "} + + + {" "} + {item?.clickCount}{" "} +

+
+
+
+ ))} +
+ )} +
+ + + ); +}; + +export default LatestNews; diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/national-news.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/national-news.tsx new file mode 100644 index 00000000..fda14bf1 --- /dev/null +++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/national-news.tsx @@ -0,0 +1,186 @@ +"use client"; + +import { Reveal } from "@/components/landing-page/Reveal"; +import { Skeleton } from "@/components/ui/skeleton"; +import { getHeroData, listData } from "@/service/landing/landing"; +import { formatDateToIndonesian } from "@/utils/globals"; +import Image from "next/image"; +import { useParams } from "next/navigation"; +import React, { useEffect, useState } from "react"; + +const NationalNews = () => { + const [isLoading, setIsLoading] = useState(true); + const params = useParams(); + const poldaName: any = params?.polda_name; + const [content, setContent] = useState([]); + const [centerPadding, setCenterPadding] = useState(); + const [isBannerLoading, setIsBannerLoading] = useState(true); + + useEffect(() => { + const timer = setTimeout(() => { + setIsLoading(false); + }, 3000); + + return () => clearTimeout(timer); + }, []); + + // useEffect(() => { + // async function fetchCategories() { + // const url = "https://netidhub.com/api/csrf"; + + // try { + // const response = await fetch(url); + + // if (!response.ok) { + // throw new Error(`HTTP error! status: ${response.status}`); + // } + + // const data = await response.json(); + // return data; // Menampilkan data yang diterima dari API + // } catch (error) { + // console.error("Fetch error: ", error); + // } + // } + + // fetchCategories(); + // initFetch(); + // }, []); + + useEffect(() => { + // async function initState() { + // const res = await listCarousel(); + // setContent(res?.data?.data); + // setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`); + // } + + async function fetchData() { + const res = await listData("1", "", "", 5, 0, "createdAt", "", "", poldaName); + let data = res?.data?.data?.content; + setContent(data); + setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`); + setIsBannerLoading(false); + console.log("Done", poldaName); + } + + fetchData(); + }, [params?.page]); + + // const initFetch = async () => { + // const response = await getHeroData(); + // console.log(response); + // setHeroData(response?.data?.data?.content); + // }; + + return ( + <> + +
+
+

Berita Nasional

+
+
+
+ {isLoading ? ( +
+ +
+ + +
+
+ ) : ( +
+ {content?.map((row: any) => ( +
+ gambar-utama

{row?.title}

+
+

{row?.categoryName}

+

+ {formatDateToIndonesian(new Date(row?.createdAt))} {row?.timezone ? row?.timezone : "WIB"}|{" "} + + + {" "} + {row?.clickCount}{" "} +

+
+

{row?.description}

+
+ ))} +
+ )} + + {isLoading ? ( +
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ ) : ( +
+ {content?.map((item: any) => ( +
+ {/*
+ +
*/} +
+

{item?.title}

+
+

{item?.categoryName}

+

+ {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "} + + + {" "} + {item?.clickCount}{" "} +

+
+
+
+ ))} +
+ )} +
+ + + ); +}; + +export default NationalNews; diff --git a/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/navbar-kaltara.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx similarity index 73% rename from app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/navbar-kaltara.tsx rename to app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx index 8b335174..c0e91c70 100644 --- a/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/navbar-kaltara.tsx +++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx @@ -36,12 +36,12 @@ const category = [ ]; const categoryLinks: any = { - Nasional: "/news/nasional", - Kaltara: "/news/kaltara", - Keamanan: "/security", - Kesehatan: "/health", - Olahraga: "/sports", - PPA: "/ppa", + Nasional: "https://tribratanews.kaltara.polri.go.id/category/nasional/", + Kaltara: "https://tribratanews.kaltara.polri.go.id/category/kaltara/", + Keamanan: "https://tribratanews.kaltara.polri.go.id/category/keamanan/", + Kesehatan: "https://tribratanews.kaltara.polri.go.id/category/kesehatan/", + Olahraga: "https://tribratanews.kaltara.polri.go.id/category/olahraga/", + PPA: "https://tribratanews.kaltara.polri.go.id/category/ppa/", MediaHub: "https://mediahub.polri.go.id/", }; @@ -59,10 +59,12 @@ const NavbarKaltara = () => { ))} - + + + {/* Mobile Menu Toggle */} @@ -80,7 +82,7 @@ const NavbarKaltara = () => { {/* Mobile Menu */} {menuOpen && ( -
+
{category?.map((data: any) => ( @@ -88,10 +90,12 @@ const NavbarKaltara = () => { ))}
- + + +
)}
diff --git a/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/news-tickers-kaltara.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/news-tickers-kaltara.tsx similarity index 68% rename from app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/news-tickers-kaltara.tsx rename to app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/news-tickers-kaltara.tsx index 26a18c7c..7739d122 100644 --- a/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/news-tickers-kaltara.tsx +++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/news-tickers-kaltara.tsx @@ -60,25 +60,25 @@ export default function NewsTickerKaltara() { return (
-
- {tanggal} +
+ {tanggal}
-
{t("breakingNews")} :
-
+
{t("breakingNews")} :
+
-

{article[currentNewsIndex]?.title}

+

{article[currentNewsIndex]?.title}

-

{textEllipsis(article[currentNewsIndex]?.title, 28)}

+

{textEllipsis(article[currentNewsIndex]?.title, 28)}

-

{formatDateToIndonesian(article[currentNewsIndex]?.createdAt)}

+

{formatDateToIndonesian(article[currentNewsIndex]?.createdAt)}

diff --git a/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/popular-news.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/popular-news.tsx similarity index 100% rename from app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/popular-news.tsx rename to app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/popular-news.tsx diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx new file mode 100644 index 00000000..3cddef02 --- /dev/null +++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx @@ -0,0 +1,188 @@ +"use client"; + +import { Reveal } from "@/components/landing-page/Reveal"; +import { Skeleton } from "@/components/ui/skeleton"; +import { getHeroData, listData } from "@/service/landing/landing"; +import { formatDateToIndonesian } from "@/utils/globals"; +import Image from "next/image"; +import { useParams } from "next/navigation"; +import React, { useEffect, useState } from "react"; + +const RegionalNews = () => { + const [isLoading, setIsLoading] = useState(true); + const params = useParams(); + const locale = params?.locale; + const [heroData, setHeroData] = useState(); + const poldaName: any = params?.polda_name; + const [content, setContent] = useState([]); + const [centerPadding, setCenterPadding] = useState(); + const [isBannerLoading, setIsBannerLoading] = useState(true); + + useEffect(() => { + const timer = setTimeout(() => { + setIsLoading(false); + }, 3000); + + return () => clearTimeout(timer); + }, []); + + // useEffect(() => { + // async function fetchCategories() { + // const url = "https://netidhub.com/api/csrf"; + + // try { + // const response = await fetch(url); + + // if (!response.ok) { + // throw new Error(`HTTP error! status: ${response.status}`); + // } + + // const data = await response.json(); + // return data; // Menampilkan data yang diterima dari API + // } catch (error) { + // console.error("Fetch error: ", error); + // } + // } + + // fetchCategories(); + // initFetch(); + // }, []); + + // const initFetch = async () => { + // const response = await getHeroData(); + // console.log(response); + // setHeroData(response?.data?.data?.content); + // }; + + useEffect(() => { + // async function initState() { + // const res = await listCarousel(); + // setContent(res?.data?.data); + // setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`); + // } + + async function fetchData() { + const res = await listData("1", "", "", 5, 0, "createdAt", "", "", poldaName); + let data = res?.data?.data?.content; + setContent(data); + setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`); + setIsBannerLoading(false); + console.log("Done", poldaName); + } + + fetchData(); + }, [params?.page]); + + return ( + <> + +
+
+

Berita Wilayah

+
+
+
+ {isLoading ? ( +
+ +
+ + +
+
+ ) : ( +
+ {content?.map((row: any) => ( +
+ gambar-utama

{row?.title}

+
+

{row?.categoryName}

+

+ {formatDateToIndonesian(new Date(row?.createdAt))} {row?.timezone ? row?.timezone : "WIB"}|{" "} + + + {" "} + {row?.clickCount}{" "} +

+
+

{row?.description}

+
+ ))} +
+ )} + + {isLoading ? ( +
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ ) : ( +
+ {content?.map((item: any) => ( +
+ {/*
+ +
*/} +
+

{item?.title}

+
+

{item?.categoryName}

+

+ {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "} + + + {" "} + {item?.clickCount}{" "} +

+
+
+
+ ))} +
+ )} +
+ + + ); +}; + +export default RegionalNews; diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx new file mode 100644 index 00000000..9a3e2dad --- /dev/null +++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx @@ -0,0 +1,224 @@ +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"; + +const SocialMedia = () => { + const [selectedTab, setSelectedTab] = useState("x"); + + return ( + <> + +
+
Media Sosial
+
+ + + + X{" "} + +
|
+ + Instagram + +
|
+ + Facebook + +
|
+ + Tiktok + +
|
+ + Youtube + + + +
+
+ {selectedTab == "x" ? ( +
+
+
+ {" "} + +
+
+
+

Humas_PoldaKaltara

+ + + +
+

@HumasKaltara

+
+
+
+
+

+ 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! +

+ {" "} +
+
+
+ ) : selectedTab == "instagram" ? ( +
+
+
+ {" "} + +
+
+
+

TBNews Mabes Polri

+ + + +
+

@TBNewsMabes

+
+
+
+
+

+ 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! +

+ {" "} +
+
+
+ ) : selectedTab == "facebook" ? ( +
+
+
+ {" "} + +
+
+
+

TBNews Mabes Polri

+ + + +
+

@TBNewsMabes

+
+
+
+
+

+ 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! +

+ {" "} +
+
+
+ ) : selectedTab == "tiktok" ? ( +
+
+
+ {" "} + +
+
+
+

TBNews Mabes Polri

+ + + +
+

@TBNewsMabes

+
+
+
+
+

+ 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! +

+ {" "} +
+
+
+ ) : selectedTab == "youtube" ? ( +
+
+
+ {" "} + +
+
+
+

TBNews Mabes Polri

+ + + +
+

@TBNewsMabes

+
+
+
+
+

+ 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! +

+ {" "} +
+
+
+ ) : ( +

+ empty +

+ )} +
+
+ + Lihat Semua + +
+
+ + + ); +}; + +export default SocialMedia; diff --git a/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/page.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/page.tsx similarity index 88% rename from app/[locale]/(public)/(polda)/tbnews/polda-kaltara/page.tsx rename to app/[locale]/(public)/(polda)/tbnews/[polda_name]/page.tsx index 25d49596..79e1ab0f 100644 --- a/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/page.tsx +++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/page.tsx @@ -16,8 +16,9 @@ const PoldaKaltara = () => {
- - + + + {/* */} diff --git a/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/hero-kaltara.tsx b/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/hero-kaltara.tsx deleted file mode 100644 index 1feef348..00000000 --- a/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/hero-kaltara.tsx +++ /dev/null @@ -1,161 +0,0 @@ -"use client"; - -import { Skeleton } from "@/components/ui/skeleton"; -import { getHeroData } from "@/service/landing/landing"; -import { formatDateToIndonesian } from "@/utils/globals"; -import Image from "next/image"; -import { useParams } from "next/navigation"; -import React, { useEffect, useState } from "react"; - -const HeroKaltara = () => { - const [isLoading, setIsLoading] = useState(true); - const params = useParams(); - const locale = params?.locale; - const [heroData, setHeroData] = useState(); - - useEffect(() => { - const timer = setTimeout(() => { - setIsLoading(false); - }, 3000); - - return () => clearTimeout(timer); - }, []); - - useEffect(() => { - async function fetchCategories() { - const url = "https://netidhub.com/api/csrf"; - - try { - const response = await fetch(url); - - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - - const data = await response.json(); - return data; // Menampilkan data yang diterima dari API - } catch (error) { - console.error("Fetch error: ", error); - } - } - - fetchCategories(); - initFetch(); - }, []); - - const initFetch = async () => { - const response = await getHeroData(); - console.log(response); - setHeroData(response?.data?.data?.content); - }; - - return ( -
- {isLoading ? ( -
- -
- - -
-
- ) : ( -
- {heroData?.length > 0 && ( -
- gambar-utama{" "} -

{heroData[0]?.title}

-
-

{heroData[0]?.categoryName}

-

- {formatDateToIndonesian(new Date(heroData[0]?.createdAt))} {heroData[0]?.timezone ? heroData[0]?.timezone : "WIB"}|{" "} - - - {" "} - {heroData[0]?.clickCount}{" "} -

-
-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae eum consectetur cum placeat non aperiam suscipit libero ipsa commodi. Quam dicta eligendi voluptate, ab sunt ratione accusamus esse animi vel libero veniam - nulla tenetur ipsum provident minus. Error ad eligendi quasi autem neque ex, iste perspiciatis magnam. Magni, quos sequi. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit rem veniam doloribus saepe atque quia - ut quaerat fugit harum. Velit quia quisquam consectetur blanditiis porro itaque perferendis. Voluptatibus fuga ipsam maxime, hic doloribus inventore, odio eos molestiae velit cum placeat! Est nostrum quas veritatis deserunt - itaque illum alias. Assumenda deleniti similique id. -

-
- )} -
- )} - - {isLoading ? ( -
-
- -
- - -
-
-
- -
- - -
-
-
- -
- - -
-
-
- -
- - -
-
-
- -
- - -
-
-
- ) : ( -
- {heroData?.slice(0, 3).map((item: any) => ( -
-
- -
-
-

{item?.title}

-
-

{item?.categoryName}

-

- {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "} - - - {" "} - {item?.clickCount}{" "} -

-
-
-
- ))} -
- )} -
- ); -}; - -export default HeroKaltara; diff --git a/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/latest-news.tsx b/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/latest-news.tsx deleted file mode 100644 index ca0ce048..00000000 --- a/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/latest-news.tsx +++ /dev/null @@ -1,168 +0,0 @@ -"use client"; - -import { Skeleton } from "@/components/ui/skeleton"; -import { getHeroData } from "@/service/landing/landing"; -import { formatDateToIndonesian } from "@/utils/globals"; -import Image from "next/image"; -import { useParams } from "next/navigation"; -import React, { useEffect, useState } from "react"; - -const LatestNews = () => { - const [isLoading, setIsLoading] = useState(true); - const params = useParams(); - const locale = params?.locale; - const [heroData, setHeroData] = useState(); - - useEffect(() => { - const timer = setTimeout(() => { - setIsLoading(false); - }, 3000); - - return () => clearTimeout(timer); - }, []); - - useEffect(() => { - async function fetchCategories() { - const url = "https://netidhub.com/api/csrf"; - - try { - const response = await fetch(url); - - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - - const data = await response.json(); - return data; // Menampilkan data yang diterima dari API - } catch (error) { - console.error("Fetch error: ", error); - } - } - - fetchCategories(); - initFetch(); - }, []); - - const initFetch = async () => { - const response = await getHeroData(); - console.log(response); - setHeroData(response?.data?.data?.content); - }; - - return ( - <> -
-
-

Berita Terbaru

-
-
-
- {isLoading ? ( -
- -
- - -
-
- ) : ( -
- {heroData?.length > 0 && ( -
- gambar-utama{" "} -

{heroData[0]?.title}

-
-

{heroData[0]?.categoryName}

-

- {formatDateToIndonesian(new Date(heroData[0]?.createdAt))} {heroData[0]?.timezone ? heroData[0]?.timezone : "WIB"}|{" "} - - - {" "} - {heroData[0]?.clickCount}{" "} -

-
-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae eum consectetur cum placeat non aperiam suscipit libero ipsa commodi. Quam dicta eligendi voluptate, ab sunt ratione accusamus esse animi vel libero - veniam nulla tenetur ipsum provident minus. Error ad eligendi quasi autem neque ex, iste perspiciatis magnam. Magni, quos sequi. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit rem veniam doloribus saepe - atque quia ut quaerat fugit harum. Velit quia quisquam consectetur blanditiis porro itaque perferendis. Voluptatibus fuga ipsam maxime, hic doloribus inventore, odio eos molestiae velit cum placeat! Est nostrum quas - veritatis deserunt itaque illum alias. Assumenda deleniti similique id. -

-
- )} -
- )} - - {isLoading ? ( -
-
- -
- - -
-
-
- -
- - -
-
-
- -
- - -
-
-
- -
- - -
-
-
- -
- - -
-
-
- ) : ( -
- {heroData?.map((item: any) => ( -
- {/*
- -
*/} -
-

{item?.title}

-
-

{item?.categoryName}

-

- {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "} - - - {" "} - {item?.clickCount}{" "} -

-
-
-
- ))} -
- )} -
- - ); -}; - -export default LatestNews; diff --git a/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/national-news.tsx b/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/national-news.tsx deleted file mode 100644 index 02fa936a..00000000 --- a/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/national-news.tsx +++ /dev/null @@ -1,168 +0,0 @@ -"use client"; - -import { Skeleton } from "@/components/ui/skeleton"; -import { getHeroData } from "@/service/landing/landing"; -import { formatDateToIndonesian } from "@/utils/globals"; -import Image from "next/image"; -import { useParams } from "next/navigation"; -import React, { useEffect, useState } from "react"; - -const NationalNews = () => { - const [isLoading, setIsLoading] = useState(true); - const params = useParams(); - const locale = params?.locale; - const [heroData, setHeroData] = useState(); - - useEffect(() => { - const timer = setTimeout(() => { - setIsLoading(false); - }, 3000); - - return () => clearTimeout(timer); - }, []); - - useEffect(() => { - async function fetchCategories() { - const url = "https://netidhub.com/api/csrf"; - - try { - const response = await fetch(url); - - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - - const data = await response.json(); - return data; // Menampilkan data yang diterima dari API - } catch (error) { - console.error("Fetch error: ", error); - } - } - - fetchCategories(); - initFetch(); - }, []); - - const initFetch = async () => { - const response = await getHeroData(); - console.log(response); - setHeroData(response?.data?.data?.content); - }; - - return ( - <> -
-
-

Berita Nasional

-
-
-
- {isLoading ? ( -
- -
- - -
-
- ) : ( -
- {heroData?.length > 0 && ( -
- gambar-utama{" "} -

{heroData[0]?.title}

-
-

{heroData[0]?.categoryName}

-

- {formatDateToIndonesian(new Date(heroData[0]?.createdAt))} {heroData[0]?.timezone ? heroData[0]?.timezone : "WIB"}|{" "} - - - {" "} - {heroData[0]?.clickCount}{" "} -

-
-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae eum consectetur cum placeat non aperiam suscipit libero ipsa commodi. Quam dicta eligendi voluptate, ab sunt ratione accusamus esse animi vel libero - veniam nulla tenetur ipsum provident minus. Error ad eligendi quasi autem neque ex, iste perspiciatis magnam. Magni, quos sequi. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit rem veniam doloribus saepe - atque quia ut quaerat fugit harum. Velit quia quisquam consectetur blanditiis porro itaque perferendis. Voluptatibus fuga ipsam maxime, hic doloribus inventore, odio eos molestiae velit cum placeat! Est nostrum quas - veritatis deserunt itaque illum alias. Assumenda deleniti similique id. -

-
- )} -
- )} - - {isLoading ? ( -
-
- -
- - -
-
-
- -
- - -
-
-
- -
- - -
-
-
- -
- - -
-
-
- -
- - -
-
-
- ) : ( -
- {heroData?.map((item: any) => ( -
- {/*
- -
*/} -
-

{item?.title}

-
-

{item?.categoryName}

-

- {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "} - - - {" "} - {item?.clickCount}{" "} -

-
-
-
- ))} -
- )} -
- - ); -}; - -export default NationalNews; diff --git a/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/regional-news.tsx b/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/regional-news.tsx deleted file mode 100644 index 93601642..00000000 --- a/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/regional-news.tsx +++ /dev/null @@ -1,168 +0,0 @@ -"use client"; - -import { Skeleton } from "@/components/ui/skeleton"; -import { getHeroData } from "@/service/landing/landing"; -import { formatDateToIndonesian } from "@/utils/globals"; -import Image from "next/image"; -import { useParams } from "next/navigation"; -import React, { useEffect, useState } from "react"; - -const RegionalNews = () => { - const [isLoading, setIsLoading] = useState(true); - const params = useParams(); - const locale = params?.locale; - const [heroData, setHeroData] = useState(); - - useEffect(() => { - const timer = setTimeout(() => { - setIsLoading(false); - }, 3000); - - return () => clearTimeout(timer); - }, []); - - useEffect(() => { - async function fetchCategories() { - const url = "https://netidhub.com/api/csrf"; - - try { - const response = await fetch(url); - - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - - const data = await response.json(); - return data; // Menampilkan data yang diterima dari API - } catch (error) { - console.error("Fetch error: ", error); - } - } - - fetchCategories(); - initFetch(); - }, []); - - const initFetch = async () => { - const response = await getHeroData(); - console.log(response); - setHeroData(response?.data?.data?.content); - }; - - return ( - <> -
-
-

Berita Wilayah

-
-
-
- {isLoading ? ( -
- -
- - -
-
- ) : ( -
- {heroData?.length > 0 && ( -
- gambar-utama{" "} -

{heroData[0]?.title}

-
-

{heroData[0]?.categoryName}

-

- {formatDateToIndonesian(new Date(heroData[0]?.createdAt))} {heroData[0]?.timezone ? heroData[0]?.timezone : "WIB"}|{" "} - - - {" "} - {heroData[0]?.clickCount}{" "} -

-
-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae eum consectetur cum placeat non aperiam suscipit libero ipsa commodi. Quam dicta eligendi voluptate, ab sunt ratione accusamus esse animi vel libero - veniam nulla tenetur ipsum provident minus. Error ad eligendi quasi autem neque ex, iste perspiciatis magnam. Magni, quos sequi. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit rem veniam doloribus saepe - atque quia ut quaerat fugit harum. Velit quia quisquam consectetur blanditiis porro itaque perferendis. Voluptatibus fuga ipsam maxime, hic doloribus inventore, odio eos molestiae velit cum placeat! Est nostrum quas - veritatis deserunt itaque illum alias. Assumenda deleniti similique id. -

-
- )} -
- )} - - {isLoading ? ( -
-
- -
- - -
-
-
- -
- - -
-
-
- -
- - -
-
-
- -
- - -
-
-
- -
- - -
-
-
- ) : ( -
- {heroData?.map((item: any) => ( -
- {/*
- -
*/} -
-

{item?.title}

-
-

{item?.categoryName}

-

- {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "} - - - {" "} - {item?.clickCount}{" "} -

-
-
-
- ))} -
- )} -
- - ); -}; - -export default RegionalNews; diff --git a/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/social-media.tsx b/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/social-media.tsx deleted file mode 100644 index 43426d80..00000000 --- a/app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/social-media.tsx +++ /dev/null @@ -1,219 +0,0 @@ -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"; - -const SocialMedia = () => { - const [selectedTab, setSelectedTab] = useState("x"); - - return ( -
-
Media Sosial
-
- - - - X{" "} - -
|
- - Instagram - -
|
- - Facebook - -
|
- - Tiktok - -
|
- - Youtube - - - -
-
- {selectedTab == "x" ? ( -
-
-
- {" "} - -
-
-
-

Humas_PoldaKaltara

- - - -
-

@HumasKaltara

-
-
-
-
-

- 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! -

- {" "} -
-
-
- ) : selectedTab == "instagram" ? ( -
-
-
- {" "} - -
-
-
-

TBNews Mabes Polri

- - - -
-

@TBNewsMabes

-
-
-
-
-

- 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! -

- {" "} -
-
-
- ) : selectedTab == "facebook" ? ( -
-
-
- {" "} - -
-
-
-

TBNews Mabes Polri

- - - -
-

@TBNewsMabes

-
-
-
-
-

- 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! -

- {" "} -
-
-
- ) : selectedTab == "tiktok" ? ( -
-
-
- {" "} - -
-
-
-

TBNews Mabes Polri

- - - -
-

@TBNewsMabes

-
-
-
-
-

- 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! -

- {" "} -
-
-
- ) : selectedTab == "youtube" ? ( -
-
-
- {" "} - -
-
-
-

TBNews Mabes Polri

- - - -
-

@TBNewsMabes

-
-
-
-
-

- 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! -

- {" "} -
-
-
- ) : ( -

- empty -

- )} -
-
- - Lihat Semua - -
-
- ); -}; - -export default SocialMedia; diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx index a9562683..54bbe7c3 100644 --- a/app/[locale]/page.tsx +++ b/app/[locale]/page.tsx @@ -12,6 +12,7 @@ import Navbar from "@/components/landing-page/navbar"; import { ReactLenis } from "@studio-freight/react-lenis"; import MountedProvider from "@/providers/mounted.provider"; import NewsTicker from "@/components/landing-page/news-tickers"; +import AreaCoverageWorkUnits from "@/components/landing-page/area-coverage-and-work-units"; const Home = ({ params: { locale } }: { params: { locale: string } }) => { return ( @@ -25,8 +26,9 @@ const Home = ({ params: { locale } }: { params: { locale: string } }) => { {/* */} - - + {/* */} + {/* */} +
diff --git a/components/landing-page/area-coverage-and-work-units.tsx b/components/landing-page/area-coverage-and-work-units.tsx new file mode 100644 index 00000000..748a6bae --- /dev/null +++ b/components/landing-page/area-coverage-and-work-units.tsx @@ -0,0 +1,68 @@ +"use client"; + +import React from "react"; +import { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; +import Image from "next/image"; +import Coverage from "./coverage"; + +const AreaCoverageWorkUnits = () => { + return ( +
+

+ Liputan Wilayah & Satker +

+
+
+ {/* POLDA */} + + + indo +

Polda Jajaran

+ + + + +

Polda Jajaran

+ + +
+ + + +
+ + + +
+ + + + {/* SATKER */} + + + indo +

Polda Jajaran

+ + + + +

Satuan Kerja Polri

+ + +
+ + + +
+ + + +
+ + +
+
+ ); +}; + +export default AreaCoverageWorkUnits; diff --git a/components/landing-page/coverage.tsx b/components/landing-page/coverage.tsx index 2d4cf257..93a2027f 100644 --- a/components/landing-page/coverage.tsx +++ b/components/landing-page/coverage.tsx @@ -30,7 +30,7 @@ const regions = [ { name: "Polda Kalimantan Tengah", slug: "kalimantan-tengah", logo: "/assets/polda/polda-kalteng.png" }, { name: "Polda Kalimantan Selatan", slug: "kalimantan-selatan", logo: "/assets/polda/polda-kalsel.png" }, { name: "Polda Kalimantan Timur", slug: "kalimantan-timur", logo: "/assets/polda/polda-kaltim.png" }, - { name: "Polda Kalimantan Utara", slug: "kalimantan-utara", logo: "/assets/polda/polda-kalut.png" }, + { name: "Polda Kalimantan Utara", slug: "kaltara", logo: "/assets/polda/polda-kalut.png" }, { name: "Polda Sulawesi Tengah", slug: "sulawesi-tengah", logo: "/assets/polda/polda-sulteng.png" }, { name: "Polda Sulawesi Utara", slug: "sulawesi-utara", logo: "/assets/polda/polda-sulut.png" }, { name: "Polda Gorontalo", slug: "gorontalo", logo: "/assets/polda/polda-gorontalo.png" }, @@ -60,80 +60,55 @@ const Coverage: React.FC = () => { }; return ( -
- - {/* Header */} -

- {pathname?.split("/")[1] == "in" ? ( - <> - {t("coverageOnly")} {t("area")}{" "} - - ) : ( - <> - {t("area")}  - {t("coverageOnly")} - - )} -

+
+ {/* Header */} + {/*

+ {pathname?.split("/")[1] == "in" ? ( + <> + {t("coverageOnly")} {t("area")}{" "} + + ) : ( + <> + {t("area")}  + {t("coverageOnly")} + + )} +

*/} - {/*

+ {/*

Liputan Wilayah

*/} -
+ {/*
*/} - {/* Pencarian */} -
- setSearchTerm(e.target.value)} type="text" placeholder={t("search")} className="w-4/5 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#bb3523] focus:outline-none" /> - + {/* Pencarian */} + {/*
+ setSearchTerm(e.target.value)} type="text" placeholder={t("search")} className="w-4/5 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#bb3523] focus:outline-none" /> + +
*/} + + {/* Grid Wilayah */} +
+ {filteredList?.map((region: any) => ( + +
+ {region.name} +
+

{region.name}

+ + ))} +
+ + {/* {filteredList && filteredList.length > 9 && ( +
+
- - {/* Grid Wilayah */} -
-
- - polda-kaltara - -

Polda Kalimantan Utara

-
- {filteredList && filteredList.length > 0 ? ( - filteredList.map((region, index) => - !seeAllValue ? ( - index < 8 ? ( - -
- {region.name} -
-

{region.name}

- - ) : ( - "" - ) - ) : ( - -
- {region.name} -
-

{region.name}

- - ) - ) - ) : ( -

{t("notFound")}

- )} -
- - {filteredList && filteredList.length > 8 && ( -
- -
- )} - + )} */}
); }; diff --git a/components/landing-page/division.tsx b/components/landing-page/division.tsx index 714a3d5b..f4479d11 100644 --- a/components/landing-page/division.tsx +++ b/components/landing-page/division.tsx @@ -65,8 +65,8 @@ const Division = () => { return (
{/* Header */} - -

+ {/* */} + {/*

{pathname?.split("/")[1] == "in" ? ( <> {t("coverageOnly")} {t("division")}{" "} @@ -77,54 +77,37 @@ const Division = () => { {t("coverageOnly")} )} -

-
+

*/} + {/*
*/} - {/* Pencarian */} -
+ {/* Pencarian */} + {/*
setSearchTerm(e.target.value)} type="text" placeholder={t("search")} className="w-4/5 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#bb3523] focus:outline-none" /> -
+
*/} - {/* Grid Wilayah */} -
- {filteredList && filteredList.length > 0 ? ( - filteredList.map((region, index) => - !seeAllValue ? ( - index < 7 ? ( - -
- {region.name} -
-

{region.name}

- - ) : ( - "" - ) - ) : ( - -
- {region.name} -
-

{region.name}

- - ) - ) - ) : ( -

Satker Tidak Ditemukan

- )} -
- {filteredList && filteredList.length > 9 && ( + {/* Grid Wilayah */} +
+ {filteredList?.map((region: any) => ( + +
+ {region.name} +
+

{region.name}

+ + ))} +
+ {/* {filteredList && filteredList.length > 9 && (
- )} - + )} */} + {/* */}
); }; diff --git a/components/landing-page/hero.tsx b/components/landing-page/hero.tsx index 8ae450cb..b23dfcbe 100644 --- a/components/landing-page/hero.tsx +++ b/components/landing-page/hero.tsx @@ -52,7 +52,7 @@ const Hero: React.FC = () => { console.log(response); setHeroData(response?.data?.data?.content); }; - + return (
{/* Section Gambar Utama */} @@ -74,9 +74,9 @@ const Hero: React.FC = () => {
{list?.categoryName} -

{list?.title}

+

{list?.title}

-

+

{formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone ? list?.timezone : "WIB"}|{" "} +

{t("breakingNews")}
diff --git a/public/assets/indo.png b/public/assets/indo.png new file mode 100644 index 0000000000000000000000000000000000000000..042288fde2a22b4d64dd3cb8f706aa23cd2de212 GIT binary patch literal 4651 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 LD2i8!8VCFz`vUT~ literal 0 HcmV?d00001 From 976661c963efb31a9c458f4882876c0c3a90d362 Mon Sep 17 00:00:00 2001 From: Sabda Yagra Date: Fri, 7 Mar 2025 19:32:47 +0700 Subject: [PATCH 2/2] add shimmer in all image --- .../(public)/image/detail/[slug]/page.tsx | 27 +++++++++-- app/[locale]/(public)/image/filter/page.tsx | 16 +++++++ .../(public)/indeks/detail/[slug]/page.tsx | 33 +++++++++++-- app/[locale]/(public)/indeks/page.tsx | 23 +++++++-- .../(public)/video/detail/[slug]/page.tsx | 22 +++++++-- .../area-coverage-and-work-units.tsx | 13 ++--- components/landing-page/content-category.tsx | 21 +++++++- components/landing-page/coverage.tsx | 29 ++++++++--- components/landing-page/division.tsx | 29 ++++++++--- components/landing-page/hero.tsx | 30 ++++++++++-- components/landing-page/new-content.tsx | 27 ++++++++++- components/shimmer/page.tsx | 39 +++++++++++++++ components/view-source/view-source.module.css | 48 +++++++++++++++++++ components/view-source/view-source.tsx | 17 +++++++ utils/globals.tsx | 16 +++++++ 15 files changed, 349 insertions(+), 41 deletions(-) create mode 100644 components/shimmer/page.tsx create mode 100644 components/view-source/view-source.module.css create mode 100644 components/view-source/view-source.tsx diff --git a/app/[locale]/(public)/image/detail/[slug]/page.tsx b/app/[locale]/(public)/image/detail/[slug]/page.tsx index 04149204..4062fcf3 100644 --- a/app/[locale]/(public)/image/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/image/detail/[slug]/page.tsx @@ -464,6 +464,23 @@ const DetailInfo = () => { }); }; + const shimmer = (w: number, h: number) => ` + + + + + + + + + + + + `; + + const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str)); + + return ( <>
@@ -477,7 +494,7 @@ const DetailInfo = () => {
) : (
- Main + Main
)} @@ -493,7 +510,7 @@ const DetailInfo = () => {
{detailDataImage?.files?.map((file: any, index: number) => ( setSelectedImage(index)} key={file?.id}> - image-small + image-small ))}
@@ -650,7 +667,7 @@ const DetailInfo = () => { {listSuggestion?.map((data: any) => (
- +

{Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname} @@ -699,7 +716,7 @@ const DetailInfo = () => { ? data.children?.map((child1: any) => (

- +

{" "} @@ -754,7 +771,7 @@ const DetailInfo = () => { ? child1.children?.map((child2: any) => (

- +

{" "} diff --git a/app/[locale]/(public)/image/filter/page.tsx b/app/[locale]/(public)/image/filter/page.tsx index e6b30eac..d1684afb 100644 --- a/app/[locale]/(public)/image/filter/page.tsx +++ b/app/[locale]/(public)/image/filter/page.tsx @@ -367,6 +367,22 @@ const FilterPage = () => { clearTimeout(typingTimer); }; + const shimmer = (w: number, h: number) => ` + + + + + + + + + + + + `; + + const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str)); + return (

{/* Header */} diff --git a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx index a9842038..e3a2a563 100644 --- a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx @@ -152,6 +152,22 @@ const IndeksDetail = () => { console.log(dataId); }; + const shimmer = (w: number, h: number) => ` + + + + + + + + + + + + `; + + const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str)); + return ( <>
@@ -162,7 +178,7 @@ const IndeksDetail = () => {
{/* Gambar Utama */}
- Main + Main
{/* Footer Informasi */}
@@ -196,7 +212,7 @@ const IndeksDetail = () => { {listComments?.map((data: any) => (
- # + #

{Number(data.commentFrom?.roleId) == 2 || Number(data.commentFrom?.roleId) == 3 || Number(data.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : data.commentFrom?.fullname} @@ -234,7 +250,7 @@ const IndeksDetail = () => { ? data.children?.map((child1: any) => (

- # + #

{Number(child1.commentFrom?.roleId) == 2 || Number(child1.commentFrom?.roleId) == 3 || Number(child1.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.commentFrom?.fullname} @@ -274,7 +290,7 @@ const IndeksDetail = () => { ? child1.children?.map((child2: any) => (

- # + #

{Number(child2.commentFrom?.roleId) == 2 || Number(child2.commentFrom?.roleId) == 3 || Number(child2.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.commentFrom?.fullname} @@ -329,7 +345,14 @@ const IndeksDetail = () => { {indexData?.map((relate: any) => ( - +

{relate?.categoryName}

{relate?.title}

diff --git a/app/[locale]/(public)/indeks/page.tsx b/app/[locale]/(public)/indeks/page.tsx index e45c6537..0e0a18f7 100644 --- a/app/[locale]/(public)/indeks/page.tsx +++ b/app/[locale]/(public)/indeks/page.tsx @@ -40,6 +40,23 @@ const Indeks: React.FC = () => { setIndeksData(response?.data?.data?.content); }; + const shimmer = (w: number, h: number) => ` + + + + + + + + + + + + `; + + const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str)); + + return (
{/* Hero Left */} @@ -54,7 +71,7 @@ const Indeks: React.FC = () => { (indeks: any, index: number) => index == count && (
- image + image
{indeks?.categoryName} @@ -92,7 +109,7 @@ const Indeks: React.FC = () => { (indeksRight: any, index: number) => (index == count + 1 || index == count + 2) && (
- image + image
{indeksRight?.categoryName} @@ -149,7 +166,7 @@ const Indeks: React.FC = () => { (indeksBottom: any, index: number) => index < 3 && (
- +

{indeksBottom?.date}

diff --git a/app/[locale]/(public)/video/detail/[slug]/page.tsx b/app/[locale]/(public)/video/detail/[slug]/page.tsx index 21cd37eb..a02a0e84 100644 --- a/app/[locale]/(public)/video/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/video/detail/[slug]/page.tsx @@ -417,6 +417,22 @@ const DetailVideo = () => { } }; + const shimmer = (w: number, h: number) => ` + + + + + + + + + + + + `; + + const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str)); + return ( <>
@@ -596,7 +612,7 @@ const DetailVideo = () => { {listSuggestion?.map((data: any) => (
- +

{Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname} @@ -645,7 +661,7 @@ const DetailVideo = () => { ? data.children?.map((child1: any) => (

- +

{" "} @@ -699,7 +715,7 @@ const DetailVideo = () => { ? child1.children?.map((child2: any) => (

- +

{" "} diff --git a/components/landing-page/area-coverage-and-work-units.tsx b/components/landing-page/area-coverage-and-work-units.tsx index 748a6bae..7d1b26ae 100644 --- a/components/landing-page/area-coverage-and-work-units.tsx +++ b/components/landing-page/area-coverage-and-work-units.tsx @@ -1,9 +1,10 @@ "use client"; import React from "react"; -import { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; +import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; import Image from "next/image"; import Coverage from "./coverage"; +import Division from "./division"; const AreaCoverageWorkUnits = () => { return ( @@ -19,7 +20,7 @@ const AreaCoverageWorkUnits = () => { indo

Polda Jajaran

- +

Polda Jajaran

@@ -40,10 +41,10 @@ const AreaCoverageWorkUnits = () => { {/* SATKER */} - indo -

Polda Jajaran

+ polri +

Satuan Kerja Polri

 - +

Satuan Kerja Polri

@@ -52,7 +53,7 @@ const AreaCoverageWorkUnits = () => {
- +
diff --git a/components/landing-page/content-category.tsx b/components/landing-page/content-category.tsx index 4d3bd048..100d4ddb 100644 --- a/components/landing-page/content-category.tsx +++ b/components/landing-page/content-category.tsx @@ -33,6 +33,23 @@ const ContentCategory = (props: { group?: string }) => { const [seeAllValue, setSeeAllValue] = useState(false); const pathname = usePathname(); + const shimmer = (w: number, h: number) => ` + + + + + + + + + + + + `; + + const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str)); + + return (
@@ -56,7 +73,7 @@ const ContentCategory = (props: { group?: string }) => { !seeAllValue ? ( index < 4 ? ( - category + category

{category?.name}

@@ -66,7 +83,7 @@ const ContentCategory = (props: { group?: string }) => { ) ) : ( - category + category

{category?.name}

diff --git a/components/landing-page/coverage.tsx b/components/landing-page/coverage.tsx index 93a2027f..72ffc667 100644 --- a/components/landing-page/coverage.tsx +++ b/components/landing-page/coverage.tsx @@ -5,6 +5,7 @@ import { Icon } from "@iconify/react/dist/iconify.js"; import { Link } from "@/i18n/routing"; import { useTranslations } from "next-intl"; import { usePathname } from "next/navigation"; +import Image from "next/image"; const regions = [ { name: "Polda Metro Jaya", slug: "metro-jaya", logo: "/assets/polda/polda-metro.png" }, @@ -59,8 +60,24 @@ const Coverage: React.FC = () => { setFilteredList(filtered); }; + const shimmer = (w: number, h: number) => ` + + + + + + + + + + + +`; + + const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str)); + return ( -
+
{/* Header */} {/*

{pathname?.split("/")[1] == "in" ? ( @@ -91,13 +108,13 @@ const Coverage: React.FC = () => {

*/} {/* Grid Wilayah */} -
+
{filteredList?.map((region: any) => ( - -
- {region.name} + +
+ {region.name}
-

{region.name}

+

{region.name}

))}
diff --git a/components/landing-page/division.tsx b/components/landing-page/division.tsx index f4479d11..0bfdc73d 100644 --- a/components/landing-page/division.tsx +++ b/components/landing-page/division.tsx @@ -5,6 +5,7 @@ import { Icon } from "@iconify/react/dist/iconify.js"; import { Link } from "@/i18n/routing"; import { useTranslations } from "next-intl"; import { usePathname } from "next/navigation"; +import Image from "next/image"; const regions = [ { name: "SIBER", slug: "siber", logo: "/assets/satker/siber.png" }, @@ -62,8 +63,24 @@ const Division = () => { setFilteredList(filtered); }; + const shimmer = (w: number, h: number) => ` + + + + + + + + + + + +`; + + const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str)); + return ( -
+
{/* Header */} {/* */} {/*

@@ -90,13 +107,13 @@ const Division = () => {

*/} {/* Grid Wilayah */} -
+
{filteredList?.map((region: any) => ( - -
- {region.name} + +
+ {region.name}
-

{region.name}

+

{region.name}

))}
diff --git a/components/landing-page/hero.tsx b/components/landing-page/hero.tsx index b23dfcbe..6a09dfd0 100644 --- a/components/landing-page/hero.tsx +++ b/components/landing-page/hero.tsx @@ -1,4 +1,4 @@ -import { formatDateToIndonesian, textEllipsis } from "@/utils/globals"; +import { formatDateToIndonesian, shimmer, toBase64 } from "@/utils/globals"; import React, { useEffect, useState } from "react"; import "swiper/css/bundle"; import "swiper/css/navigation"; @@ -53,6 +53,22 @@ const Hero: React.FC = () => { setHeroData(response?.data?.data?.content); }; + const shimmer = (w: number, h: number) => ` + + + + + + + + + + + +`; + + const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str)); + return (
{/* Section Gambar Utama */} @@ -70,7 +86,15 @@ const Hero: React.FC = () => { {heroData?.map((list: any) => (
- gambar-utama + gambar-utama +
{list?.categoryName} @@ -141,7 +165,7 @@ const Hero: React.FC = () => { {heroData?.map((item: any) => (
  • - {item?.title} + {item?.title}
    {item?.categoryName} diff --git a/components/landing-page/new-content.tsx b/components/landing-page/new-content.tsx index e9d467ce..551c1684 100644 --- a/components/landing-page/new-content.tsx +++ b/components/landing-page/new-content.tsx @@ -54,6 +54,22 @@ const NewContent = (props: { group: string; type: string }) => { setNewContent(response?.data?.data?.content); }; + const shimmer = (w: number, h: number) => ` + + + + + + + + + + + + `; + + const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str)); + return (
    @@ -120,7 +136,14 @@ const NewContent = (props: { group: string; type: string }) => { {newContent?.map((image: any) => (
    router.push(prefixPath + `/image/detail/${image?.slug}`)} className="cursor-pointer relative group overflow-hidden shadow-md hover:shadow-lg"> - image + image

    {image?.title}

    @@ -184,7 +207,7 @@ const NewContent = (props: { group: string; type: string }) => { {newContent?.map((video: any) => (

    router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg"> - video + video

    {video?.title}

    diff --git a/components/shimmer/page.tsx b/components/shimmer/page.tsx new file mode 100644 index 00000000..a4e0e0d2 --- /dev/null +++ b/components/shimmer/page.tsx @@ -0,0 +1,39 @@ +import Image from "next/image"; +import ViewSource from "../view-source/view-source"; + + +const shimmer = (w: number, h: number) => ` + + + + + + + + + + + +`; + +const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str)); + +const Shimmer = () => ( +

    + +

    Image Component With Shimmer Data URL

    + Mountains +
    +); + +export default Shimmer; diff --git a/components/view-source/view-source.module.css b/components/view-source/view-source.module.css new file mode 100644 index 00000000..2ec16794 --- /dev/null +++ b/components/view-source/view-source.module.css @@ -0,0 +1,48 @@ +.svg { + position: absolute; + top: 0; + right: 0; +} +.arm { + transform-origin: 130px 106px; +} + +.svg:hover .arm { + animation: wave 560ms ease-in-out; +} + +@keyframes wave { + 0% { + transform: rotate(0deg); + } + + 20% { + transform: rotate(-25deg); + } + + 40% { + transform: rotate(10deg); + } + + 60% { + transform: rotate(-25deg); + } + + 80% { + transform: rotate(10deg); + } + + 100% { + transform: rotate(0deg); + } +} + +@media (max-width: 500px) { + .svg:hover .arm { + animation: none; + } + + .svg:hover .arm { + animation: wave 560ms ease-in-out; + } +} \ No newline at end of file diff --git a/components/view-source/view-source.tsx b/components/view-source/view-source.tsx new file mode 100644 index 00000000..14838de1 --- /dev/null +++ b/components/view-source/view-source.tsx @@ -0,0 +1,17 @@ +import styles from "./view-source.module.css"; + +type ViewSourceProps = { + pathname: string; +}; + +const ViewSource = ({ pathname }: ViewSourceProps) => ( + + + + + + + +); + +export default ViewSource; diff --git a/utils/globals.tsx b/utils/globals.tsx index 6f8deb30..11019f6d 100644 --- a/utils/globals.tsx +++ b/utils/globals.tsx @@ -137,3 +137,19 @@ export function checkMaliciousText(str: any) { return ""; } } + +export const shimmer = (w: number, h: number) => ` + + + + + + + + + + + +`; + +export const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));