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]/(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/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..7d1b26ae --- /dev/null +++ b/components/landing-page/area-coverage-and-work-units.tsx @@ -0,0 +1,69 @@ +"use client"; + +import React from "react"; +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 ( +
+

+ Liputan Wilayah & Satker +

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

Polda Jajaran

+ + + + +

Polda Jajaran

+ + +
+ + + +
+ + + +
+ + + + {/* SATKER */} + + + polri +

Satuan Kerja Polri

+ + + + +

Satuan Kerja Polri

+ + +
+ + + +
+ + + +
+ + +
+
+ ); +}; + +export default 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 2d4cf257..a7795f32 100644 --- a/components/landing-page/coverage.tsx +++ b/components/landing-page/coverage.tsx @@ -5,43 +5,44 @@ 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" }, - { name: "Polda Jawa Barat", slug: "jawa-barat", logo: "/assets/polda/polda-jabar.png" }, - { name: "Polda Banten", slug: "banten", logo: "/assets/polda/polda-banten.png" }, - { name: "Polda Jawa Tengah", slug: "jawa-tengah", logo: "/assets/polda/polda-jateng.png" }, - { name: "Polda D.I Yogyakarta", slug: "di-yogyakarta", logo: "/assets/polda/polda-diy.png" }, - { name: "Polda Jawa Timur", slug: "jawa-timur", logo: "/assets/polda/polda-jatim.png" }, - { name: "Polda Aceh", slug: "aceh", logo: "/assets/polda/polda-aceh.png" }, - { name: "Polda Sumatera Utara", slug: "sumatera-utara", logo: "/assets/polda/polda-sumut.png" }, - { name: "Polda Sumatera Barat", slug: "sumatera-barat", logo: "/assets/polda/polda-sumbar.png" }, - { name: "Polda Riau", slug: "riau", logo: "/assets/polda/polda-riau.png" }, - { name: "Polda Kep. Riau", slug: "kepulauan-riau", logo: "/assets/polda/polda-kepri.png" }, - { name: "Polda Jambi", slug: "jambi", logo: "/assets/polda/polda-jambi.png" }, - { name: "Polda Sumatera Selatan", slug: "sumatera-selatan", logo: "/assets/polda/polda-sumsel.png" }, - { name: "Polda Kep. Bangka Belitung", slug: "bangka-belitung", logo: "/assets/polda/polda-bangkabelitung.png" }, - { name: "Polda Bengkulu", slug: "bengkulu", logo: "/assets/polda/polda-bengkulu.png" }, - { name: "Polda Lampung", slug: "lampung", logo: "/assets/polda/polda-lampung.png" }, - { name: "Polda Nusa Tenggara Barat", slug: "ntb", logo: "/assets/polda/polda-ntb.png" }, - { name: "Polda Nusa Tenggara Timur", slug: "ntt", logo: "/assets/polda/polda-ntt.png" }, - { name: "Polda Bali", slug: "bali", logo: "/assets/polda/polda-bali.png" }, - { name: "Polda Kalimantan Barat", slug: "kalimantan-barat", logo: "/assets/polda/polda-kalbar.png" }, - { 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 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" }, - { name: "Polda Sulawesi Barat", slug: "sulawesi-barat", logo: "/assets/polda/polda-sulbar.png" }, - { name: "Polda Sulawesi Selatan", slug: "sulawesi-selatan", logo: "/assets/polda/polda-sulsel.png" }, - { name: "Polda Sulawesi Tenggara", slug: "sulawesi-tenggara", logo: "/assets/polda/polda-sultenggara.png" }, - { name: "Polda Maluku Utara", slug: "maluku-utara", logo: "/assets/polda/polda-malut.png" }, - { name: "Polda Maluku", slug: "maluku", logo: "/assets/polda/polda-maluku.png" }, - { name: "Polda Papua Barat", slug: "papua-barat", logo: "/assets/polda/polda-papbar.png" }, - { name: "Polda Papua", slug: "papua", logo: "/assets/polda/polda-papua.png" }, - { name: "Satuan Kerja POLRI", slug: "satker-polri", logo: "/assets/polda/polda-satker.jpeg" }, + { name: "Polda Metro Jaya", slug: "metro-jaya", logo: "/logo/polda/polda-metro.png" }, + { name: "Polda Jawa Barat", slug: "jawa-barat", logo: "/logo/polda/polda-jawabarat.png" }, + { name: "Polda Banten", slug: "banten", logo: "/logo/polda/polda-banten.png" }, + { name: "Polda Jawa Tengah", slug: "jawa-tengah", logo: "/logo/polda/polda-jawatengah.png" }, + { name: "Polda D.I Yogyakarta", slug: "di-yogyakarta", logo: "/logo/polda/polda-jogja.png" }, + { name: "Polda Jawa Timur", slug: "jawa-timur", logo: "/logo/polda/polda-jawatimur.png" }, + { name: "Polda Aceh", slug: "aceh", logo: "/logo/polda/polda-aceh.png" }, + { name: "Polda Sumatera Utara", slug: "sumatera-utara", logo: "/logo/polda/polda-sumut.png" }, + { name: "Polda Sumatera Barat", slug: "sumatera-barat", logo: "/logo/polda/polda-sumatera-barat.png" }, + { name: "Polda Riau", slug: "riau", logo: "/logo/polda/polda-riau.png" }, + { name: "Polda Kep. Riau", slug: "kepulauan-riau", logo: "/logo/polda/polda-kepri.png" }, + { name: "Polda Jambi", slug: "jambi", logo: "/logo/polda/polda-jambi.png" }, + { name: "Polda Sumatera Selatan", slug: "sumatera-selatan", logo: "/logo/polda/polda-sumsel.png" }, + { name: "Polda Kep. Bangka Belitung", slug: "bangka-belitung", logo: "/logo/polda/polda-bangkabelitung.png" }, + { name: "Polda Bengkulu", slug: "bengkulu", logo: "/logo/polda/polda-bengkulu.png" }, + { name: "Polda Lampung", slug: "lampung", logo: "/logo/polda/polda-lampung.png" }, + { name: "Polda Nusa Tenggara Barat", slug: "ntb", logo: "/logo/polda/polda-ntb.png" }, + { name: "Polda Nusa Tenggara Timur", slug: "ntt", logo: "/logo/polda/polda-ntt.png" }, + { name: "Polda Bali", slug: "bali", logo: "/logo/polda/polda-bali.png" }, + { name: "Polda Kalimantan Barat", slug: "kalimantan-barat", logo: "/logo/polda/polda-kalbar.png" }, + { name: "Polda Kalimantan Tengah", slug: "kalimantan-tengah", logo: "/logo/polda/polda-kalteng.png" }, + { name: "Polda Kalimantan Selatan", slug: "kalimantan-selatan", logo: "/logo/polda/polda-kalsel.png" }, + { name: "Polda Kalimantan Timur", slug: "kalimantan-timur", logo: "/logo/polda/polda-kaltim.png" }, + { name: "Polda Kalimantan Utara", slug: "kaltara", logo: "/logo/polda/polda-kaltara.png" }, + { name: "Polda Sulawesi Tengah", slug: "sulawesi-tengah", logo: "/logo/polda/polda-sulawesi-tengah.png" }, + { name: "Polda Sulawesi Utara", slug: "sulawesi-utara", logo: "/logo/polda/polda-sulawesi-utara.png" }, + { name: "Polda Gorontalo", slug: "gorontalo", logo: "/logo/polda/polda-gorontalo.png" }, + { name: "Polda Sulawesi Barat", slug: "sulawesi-barat", logo: "/logo/polda/polda-sulbar.png" }, + { name: "Polda Sulawesi Selatan", slug: "sulawesi-selatan", logo: "/logo/polda/polda-sulsel.png" }, + { name: "Polda Sulawesi Tenggara", slug: "sulawesi-tenggara", logo: "/logo/polda/polda-sulawesi-tenggara.png" }, + { name: "Polda Maluku Utara", slug: "maluku-utara", logo: "/logo/polda/polda-maluku-utara.png" }, + { name: "Polda Maluku", slug: "maluku", logo: "/logo/polda/polda-maluku.png" }, + { name: "Polda Papua Barat", slug: "papua-barat", logo: "/logo/polda/polda-papua-barat.png" }, + { name: "Polda Papua", slug: "papua", logo: "/logo/polda/polda-papua.png" }, + { name: "Satuan Kerja POLRI", slug: "satker-polri", logo: "/logo/satker/SATUAN-KERJA-POLRI.png" }, { name: "Internasional", slug: "internasional", logo: "/assets/polda/internasional.png" }, ]; @@ -59,81 +60,72 @@ const Coverage: React.FC = () => { setFilteredList(filtered); }; - return ( -
- - {/* Header */} -

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

+ 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" ? ( + <> + {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..ab5fe9af 100644 --- a/components/landing-page/division.tsx +++ b/components/landing-page/division.tsx @@ -5,46 +5,47 @@ 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" }, - { name: "DIVKUM", slug: "divkum", logo: "/assets/satker/divkum.png" }, - { name: "PUSKEU", slug: "puskeu", logo: "/assets/satker/puskeu.png" }, - { name: "YANMA", slug: "yanma", logo: "/assets/satker/logo-yanma.png" }, - { name: "SSDM", slug: "ssdm", logo: "/assets/satker/ssdm.png" }, - { name: "ITWASUM", slug: "itwasum", logo: "/assets/satker/itwasum.png" }, - { name: "STIK-PTIK", slug: "stik-ptik", logo: "/assets/satker/stik-ptik.png" }, - { name: "SATUAN KERJA POLRI", slug: "satuan-kerja-polri", logo: "/assets/satker/satuan-kerja-polri.png" }, - { name: "BRIMOB", slug: "brimob", logo: "/assets/satker/brimob.png" }, - { name: "DIV HUMAS", slug: "div-humas", logo: "/assets/satker/div-humas.png" }, - { name: "PUSLITBANG", slug: "puslitbang", logo: "/assets/satker/puslitbang.png" }, - { name: "BINMAS", slug: "binmas", logo: "/assets/satker/binmas.png" }, - { name: "DIV TIK", slug: "div-tik", logo: "/assets/satker/div-tik.png" }, - { name: "SPRIPIM", slug: "spripim", logo: "/assets/satker/spripim.png" }, - { name: "DIVPROPRAM", slug: "divpropram", logo: "/assets/satker/div-propram.png" }, - { name: "KORPS SABHARA BAHARKAM", slug: "korps-sabhara-baharkam", logo: "/assets/satker/khorp-sabhara-baharkam.png" }, - { name: "PUSDOKKES", slug: "pusdokkes", logo: "/assets/satker/pusdokkes.png" }, - { name: "BAHARKAM", slug: "baharkam", logo: "/assets/satker/baharkam.png" }, - { name: "POLAIRUD", slug: "polairud", logo: "/assets/satker/polairud.png" }, - { name: "POLAIR", slug: "polair", logo: "/assets/satker/polair.png" }, - { name: "POLUDARA", slug: "poludara", logo: "/assets/satker/poludara.png" }, - { name: "LEMDIKLAT", slug: "lemdiklat", logo: "/assets/satker/lemdiklat.png" }, - { name: "AKPOL", slug: "akpol", logo: "/assets/satker/akpol.png" }, - { name: "KORLANTAS", slug: "korlantas", logo: "/assets/satker/korlantas.png" }, - { name: "PUSINAFIS", slug: "pusinafis", logo: "/assets/satker/pusinafis.png" }, - { name: "PUSJARAH", slug: "pusjarah", logo: "/assets/satker/pusjarah.png" }, - { name: "PUSIKNAS", slug: "pusiknas", logo: "/assets/satker/pusiknas.png" }, - { name: "SLOG", slug: "slog", logo: "/assets/satker/slog.png" }, - { name: "BAINTELKAM", slug: "baintelkam", logo: "/assets/satker/baintelkam.jpg" }, - { name: "BARESKRIM", slug: "bareskrim", logo: "/assets/satker/bareskrim.png" }, - { name: "DIVHUBINTER", slug: "divhubinter", logo: "/assets/satker/divhubinter.png" }, - { name: "SETUM", slug: "setum", logo: "/assets/satker/setum.png" }, + { name: "SIBER", slug: "siber", logo: "/logo/satker/SIBER.png" }, + { name: "DIVKUM", slug: "divkum", logo: "/logo/satker/DIVKUM.png" }, + { name: "PUSKEU", slug: "puskeu", logo: "/logo/satker/PUSKEU.png" }, + { name: "YANMA", slug: "yanma", logo: "/logo/satker/YANMA.png" }, + { name: "SSDM", slug: "ssdm", logo: "/logo/satker/SSDM.png" }, + { name: "ITWASUM", slug: "itwasum", logo: "/logo/satker/ITWASUM.png" }, + { name: "STIK-PTIK", slug: "stik-ptik", logo: "/logo/satker/STIK-PTIK.png" }, + { name: "SATUAN KERJA POLRI", slug: "satuan-kerja-polri", logo: "/logo/satker/SATUAN-KERJA-POLRI.png" }, + { name: "BRIMOB", slug: "brimob", logo: "/logo/satker/BRIMOB.png" }, + { name: "DIV HUMAS", slug: "div-humas", logo: "/logo/satker/DIV-HUMAS.png" }, + { name: "PUSLITBANG", slug: "puslitbang", logo: "/logo/satker/PUSLITBANG.png" }, + { name: "BINMAS", slug: "binmas", logo: "/logo/satker/BINMAS.png" }, + { name: "DIV TIK", slug: "div-tik", logo: "/logo/satker/DIV-TIK.png" }, + { name: "SPRIPIM", slug: "spripim", logo: "/logo/satker/SPRIPIM.png" }, + { name: "DIVPROPRAM", slug: "divpropram", logo: "/logo/satker/DIVPROPAM.png" }, + { name: "KORPS SABHARA BAHARKAM", slug: "korps-sabhara-baharkam", logo: "/logo/satker/KORPS-SABHARA-BAHARKAM.png" }, + { name: "PUSDOKKES", slug: "pusdokkes", logo: "/logo/satker/PUSDOKKES.png" }, + { name: "BAHARKAM", slug: "baharkam", logo: "/logo/satker/BAHARKAM.png" }, + { name: "POLAIRUD", slug: "polairud", logo: "/logo/satker/POLAIRUD.png" }, + { name: "POLAIR", slug: "polair", logo: "/logo/satker/POLAIR.png" }, + { name: "POLUDARA", slug: "poludara", logo: "/logo/satker/POLUDARA.png" }, + { name: "LEMDIKLAT", slug: "lemdiklat", logo: "/logo/satker/LEMDIKLAT.png" }, + { name: "AKPOL", slug: "akpol", logo: "/logo/satker/AKPOL.png" }, + { name: "KORLANTAS", slug: "korlantas", logo: "/logo/satker/KORLANTAS.png" }, + { name: "PUSINAFIS", slug: "pusinafis", logo: "/logo/satker/PUSINAFIS.png" }, + { name: "PUSJARAH", slug: "pusjarah", logo: "/logo/satker/PUSJARAH.png" }, + { name: "PUSIKNAS", slug: "pusiknas", logo: "/logo/satker/PUSKINAS.png" }, + { name: "SLOG", slug: "slog", logo: "/logo/satker/SLOG.png" }, + { name: "BAINTELKAM", slug: "baintelkam", logo: "/logo/satker/BAINTELKAM.png" }, + { name: "BARESKRIM", slug: "bareskrim", logo: "/logo/satker/BARESKRIM.png" }, + { name: "DIVHUBINTER", slug: "divhubinter", logo: "/logo/satker/DIVHUBINTER.png" }, + { name: "SETUM", slug: "setum", logo: "/logo/satker/SETUM.png" }, { name: "PUSLABFOR", slug: "puslabfor", logo: "/assets/satker/puslabfor.png" }, - { name: "DENSUS 88", slug: "densus-88", logo: "/assets/satker/densus88.png" }, - { name: "SAHLI KAPOLRI", slug: "sahli-kapolri", logo: "/assets/satker/sahli-kapolri.png" }, - { name: "SOPS", slug: "sops", logo: "/assets/satker/sops.png" }, - { name: "SRENA", slug: "srena", logo: "/assets/satker/srena.png" }, - { name: "SESPIM POLRI", slug: "sespim-polri", logo: "/assets/satker/sespim-polri.png" }, + { name: "DENSUS 88", slug: "densus-88", logo: "/logo/satker/DENSUS88.png" }, + { name: "SAHLI KAPOLRI", slug: "sahli-kapolri", logo: "/logo/satker/STAFAHLI.png" }, + { name: "SOPS", slug: "sops", logo: "/logo/satker/SOPS.png" }, + { name: "SRENA", slug: "srena", logo: "/logo/satker/SRENA.png" }, + { name: "SESPIM POLRI", slug: "sespim-polri", logo: "/logo/satker/SESPIM-POLRI.png" }, { name: "SETUPA POLRI", slug: "setupa-polri", logo: "/assets/satker/setupa-polri.png" }, ]; @@ -62,11 +63,27 @@ 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 */} - -

+ {/* */} + {/*

{pathname?.split("/")[1] == "in" ? ( <> {t("coverageOnly")} {t("division")}{" "} @@ -77,54 +94,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 b42518bf..2158b29f 100644 --- a/components/landing-page/hero.tsx +++ b/components/landing-page/hero.tsx @@ -1,5 +1,4 @@ -"use client"; -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"; @@ -72,6 +71,25 @@ 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 */} @@ -94,18 +112,22 @@ const Hero: React.FC = () => { alt="gambar-utama" width={1920} height={1080} + placeholder={`data:image/svg+xml;base64,${toBase64( + shimmer(700, 475) + )}`} className="w-full lg:w-[850px] h-[310px] lg:h-[420px] rounded-lg object-cover" /> +
{list?.categoryName} -

+

{list?.title}

-

+

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

) : ( -
-
- - - Nasional - Polda - Satker - - - - - -
-
    - {heroData?.map((item: any) => ( -
  • -
    - {item?.title} -
    -
    - - {item?.categoryName} - - -

    - {item?.title} -

    - -

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

    -
    -
    • - ))} -
-
+
    + {heroData?.map((item: any) => ( +
  • +
    + {item?.title} +
    +
    + + {item?.categoryName} + + +

    + {item?.title} +

    + +

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

    +
    +
    • + ))} +
)}
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/landing-page/news-tickers.tsx b/components/landing-page/news-tickers.tsx index 85d00090..c28be857 100644 --- a/components/landing-page/news-tickers.tsx +++ b/components/landing-page/news-tickers.tsx @@ -5,13 +5,11 @@ import { formatDateToIndonesian, textEllipsis } from "@/utils/globals"; import { useEffect, useState } from "react"; import { Icon } from "../ui/icon"; import { useTranslations } from "next-intl"; - export default function NewsTicker() { const [article, setArticle] = useState([]); const [currentNewsIndex, setCurrentNewsIndex] = useState(0); const [animate, setAnimate] = useState(false); const t = useTranslations("LandingPage"); - useEffect(() => { async function getArticle() { const response = await getHeroData(); @@ -19,7 +17,6 @@ export default function NewsTicker() { } getArticle(); }, []); - const triggerAnimation = (newIndex: number) => { setAnimate(true); setTimeout(() => { @@ -27,70 +24,78 @@ export default function NewsTicker() { setAnimate(false); }, 300); }; - const handlePrev = () => { - const newIndex = (currentNewsIndex - 1 + article.length) % article.length; + const newIndex = (currentNewsIndex - 1 + article?.length) % article?.length; triggerAnimation(newIndex); }; - const handleNext = () => { - const newIndex = (currentNewsIndex + 1) % article.length; + const newIndex = (currentNewsIndex + 1) % article?.length; triggerAnimation(newIndex); }; - - // useEffect(() => { - // const interval = setInterval(() => { - // triggerAnimation((currentNewsIndex + 1) % article.length); - // }, 7000); - - // return () => clearInterval(interval); - // }, [article?.length]); - + useEffect(() => { + const interval = setInterval(() => { + triggerAnimation((currentNewsIndex + 1) % article?.length); + }, 7000); + return () => clearInterval(interval); + }, [article?.length]); return ( -

+
+ {" "}
- {t("breakingNews")} -
-
- {/*
{t("breakingNews")}{" "} +
{" "} +
{" "} +
- -

- {article[currentNewsIndex]?.title} -

- - -

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

- -

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

-
*/} + {" "} + {article?.length > 0 && ( + <> + {" "} + + {" "} +

+ {article[currentNewsIndex]?.title} +

{" "} + {" "} + + {" "} +

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

{" "} + {" "} +

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

{" "} + + )}{" "} +
{" "}
+ {" "} handlePrev()} > - - + {" "} + {" "} + {" "} handleNext()} > - - -
+ {" "} + {" "} + {" "} +
{" "}
); } 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/public/assets/indo.png b/public/assets/indo.png new file mode 100644 index 00000000..042288fd Binary files /dev/null and b/public/assets/indo.png differ diff --git a/public/assets/logo-polri.png b/public/assets/logo-polri.png new file mode 100644 index 00000000..e68a5334 Binary files /dev/null and b/public/assets/logo-polri.png differ diff --git a/public/logo/polda/polda-aceh.png b/public/logo/polda/polda-aceh.png new file mode 100644 index 00000000..16f42a4d Binary files /dev/null and b/public/logo/polda/polda-aceh.png differ diff --git a/public/logo/polda/polda-bali.png b/public/logo/polda/polda-bali.png new file mode 100644 index 00000000..945846ce Binary files /dev/null and b/public/logo/polda/polda-bali.png differ diff --git a/public/logo/polda/polda-bangkabelitung.png b/public/logo/polda/polda-bangkabelitung.png new file mode 100644 index 00000000..133d149b Binary files /dev/null and b/public/logo/polda/polda-bangkabelitung.png differ diff --git a/public/logo/polda/polda-banten.png b/public/logo/polda/polda-banten.png new file mode 100644 index 00000000..20c17573 Binary files /dev/null and b/public/logo/polda/polda-banten.png differ diff --git a/public/logo/polda/polda-bengkulu.png b/public/logo/polda/polda-bengkulu.png new file mode 100644 index 00000000..89084719 Binary files /dev/null and b/public/logo/polda/polda-bengkulu.png differ diff --git a/public/logo/polda/polda-gorontalo.png b/public/logo/polda/polda-gorontalo.png new file mode 100644 index 00000000..0173d964 Binary files /dev/null and b/public/logo/polda/polda-gorontalo.png differ diff --git a/public/logo/polda/polda-jambi.png b/public/logo/polda/polda-jambi.png new file mode 100644 index 00000000..eb196666 Binary files /dev/null and b/public/logo/polda/polda-jambi.png differ diff --git a/public/logo/polda/polda-jawabarat.png b/public/logo/polda/polda-jawabarat.png new file mode 100644 index 00000000..237acb4a Binary files /dev/null and b/public/logo/polda/polda-jawabarat.png differ diff --git a/public/logo/polda/polda-jawatengah.png b/public/logo/polda/polda-jawatengah.png new file mode 100644 index 00000000..ef73271f Binary files /dev/null and b/public/logo/polda/polda-jawatengah.png differ diff --git a/public/logo/polda/polda-jawatimur.png b/public/logo/polda/polda-jawatimur.png new file mode 100644 index 00000000..9574523c Binary files /dev/null and b/public/logo/polda/polda-jawatimur.png differ diff --git a/public/logo/polda/polda-jogja.png b/public/logo/polda/polda-jogja.png new file mode 100644 index 00000000..b68f7bc9 Binary files /dev/null and b/public/logo/polda/polda-jogja.png differ diff --git a/public/logo/polda/polda-kalbar.png b/public/logo/polda/polda-kalbar.png new file mode 100644 index 00000000..59b5439c Binary files /dev/null and b/public/logo/polda/polda-kalbar.png differ diff --git a/public/logo/polda/polda-kalsel.png b/public/logo/polda/polda-kalsel.png new file mode 100644 index 00000000..6417f8b1 Binary files /dev/null and b/public/logo/polda/polda-kalsel.png differ diff --git a/public/logo/polda/polda-kaltara.png b/public/logo/polda/polda-kaltara.png new file mode 100644 index 00000000..acc0a0ab Binary files /dev/null and b/public/logo/polda/polda-kaltara.png differ diff --git a/public/logo/polda/polda-kalteng.png b/public/logo/polda/polda-kalteng.png new file mode 100644 index 00000000..4fb4994b Binary files /dev/null and b/public/logo/polda/polda-kalteng.png differ diff --git a/public/logo/polda/polda-kaltim.png b/public/logo/polda/polda-kaltim.png new file mode 100644 index 00000000..ef5c4a58 Binary files /dev/null and b/public/logo/polda/polda-kaltim.png differ diff --git a/public/logo/polda/polda-kepri.png b/public/logo/polda/polda-kepri.png new file mode 100644 index 00000000..885af9ff Binary files /dev/null and b/public/logo/polda/polda-kepri.png differ diff --git a/public/logo/polda/polda-lampung.png b/public/logo/polda/polda-lampung.png new file mode 100644 index 00000000..871037c3 Binary files /dev/null and b/public/logo/polda/polda-lampung.png differ diff --git a/public/logo/polda/polda-maluku-utara.png b/public/logo/polda/polda-maluku-utara.png new file mode 100644 index 00000000..d2622805 Binary files /dev/null and b/public/logo/polda/polda-maluku-utara.png differ diff --git a/public/logo/polda/polda-maluku.png b/public/logo/polda/polda-maluku.png new file mode 100644 index 00000000..12d2c98f Binary files /dev/null and b/public/logo/polda/polda-maluku.png differ diff --git a/public/logo/polda/polda-metro.png b/public/logo/polda/polda-metro.png new file mode 100644 index 00000000..e8378600 Binary files /dev/null and b/public/logo/polda/polda-metro.png differ diff --git a/public/logo/polda/polda-ntb.png b/public/logo/polda/polda-ntb.png new file mode 100644 index 00000000..baa9294a Binary files /dev/null and b/public/logo/polda/polda-ntb.png differ diff --git a/public/logo/polda/polda-ntt.png b/public/logo/polda/polda-ntt.png new file mode 100644 index 00000000..4e7c80b4 Binary files /dev/null and b/public/logo/polda/polda-ntt.png differ diff --git a/public/logo/polda/polda-papua-barat.png b/public/logo/polda/polda-papua-barat.png new file mode 100644 index 00000000..33fec0a0 Binary files /dev/null and b/public/logo/polda/polda-papua-barat.png differ diff --git a/public/logo/polda/polda-papua.png b/public/logo/polda/polda-papua.png new file mode 100644 index 00000000..fa581a7a Binary files /dev/null and b/public/logo/polda/polda-papua.png differ diff --git a/public/logo/polda/polda-riau.png b/public/logo/polda/polda-riau.png new file mode 100644 index 00000000..77982a0a Binary files /dev/null and b/public/logo/polda/polda-riau.png differ diff --git a/public/logo/polda/polda-sulawesi-tengah.png b/public/logo/polda/polda-sulawesi-tengah.png new file mode 100644 index 00000000..bf7e56f3 Binary files /dev/null and b/public/logo/polda/polda-sulawesi-tengah.png differ diff --git a/public/logo/polda/polda-sulawesi-tenggara.png b/public/logo/polda/polda-sulawesi-tenggara.png new file mode 100644 index 00000000..0851f856 Binary files /dev/null and b/public/logo/polda/polda-sulawesi-tenggara.png differ diff --git a/public/logo/polda/polda-sulawesi-utara.png b/public/logo/polda/polda-sulawesi-utara.png new file mode 100644 index 00000000..9d4cc056 Binary files /dev/null and b/public/logo/polda/polda-sulawesi-utara.png differ diff --git a/public/logo/polda/polda-sulbar.png b/public/logo/polda/polda-sulbar.png new file mode 100644 index 00000000..dfe07d47 Binary files /dev/null and b/public/logo/polda/polda-sulbar.png differ diff --git a/public/logo/polda/polda-sulsel.png b/public/logo/polda/polda-sulsel.png new file mode 100644 index 00000000..f80fbb0a Binary files /dev/null and b/public/logo/polda/polda-sulsel.png differ diff --git a/public/logo/polda/polda-sumatera-barat.png b/public/logo/polda/polda-sumatera-barat.png new file mode 100644 index 00000000..d98e8a28 Binary files /dev/null and b/public/logo/polda/polda-sumatera-barat.png differ diff --git a/public/logo/polda/polda-sumsel.png b/public/logo/polda/polda-sumsel.png new file mode 100644 index 00000000..a7d43e93 Binary files /dev/null and b/public/logo/polda/polda-sumsel.png differ diff --git a/public/logo/polda/polda-sumut.png b/public/logo/polda/polda-sumut.png new file mode 100644 index 00000000..55ddcd86 Binary files /dev/null and b/public/logo/polda/polda-sumut.png differ diff --git a/public/logo/satker/AKPOL.png b/public/logo/satker/AKPOL.png new file mode 100644 index 00000000..eb00247e Binary files /dev/null and b/public/logo/satker/AKPOL.png differ diff --git a/public/logo/satker/BAHARKAM.png b/public/logo/satker/BAHARKAM.png new file mode 100644 index 00000000..6fa39cce Binary files /dev/null and b/public/logo/satker/BAHARKAM.png differ diff --git a/public/logo/satker/BAINTELKAM.png b/public/logo/satker/BAINTELKAM.png new file mode 100644 index 00000000..d19103cd Binary files /dev/null and b/public/logo/satker/BAINTELKAM.png differ diff --git a/public/logo/satker/BARESKRIM.png b/public/logo/satker/BARESKRIM.png new file mode 100644 index 00000000..6487409e Binary files /dev/null and b/public/logo/satker/BARESKRIM.png differ diff --git a/public/logo/satker/BINMAS.png b/public/logo/satker/BINMAS.png new file mode 100644 index 00000000..a6c7f0e1 Binary files /dev/null and b/public/logo/satker/BINMAS.png differ diff --git a/public/logo/satker/BRIMOB.png b/public/logo/satker/BRIMOB.png new file mode 100644 index 00000000..07199e6f Binary files /dev/null and b/public/logo/satker/BRIMOB.png differ diff --git a/public/logo/satker/DENSUS88.png b/public/logo/satker/DENSUS88.png new file mode 100644 index 00000000..b47eadcf Binary files /dev/null and b/public/logo/satker/DENSUS88.png differ diff --git a/public/logo/satker/DIV-HUMAS.png b/public/logo/satker/DIV-HUMAS.png new file mode 100644 index 00000000..fd21b2b2 Binary files /dev/null and b/public/logo/satker/DIV-HUMAS.png differ diff --git a/public/logo/satker/DIV-TIK.png b/public/logo/satker/DIV-TIK.png new file mode 100644 index 00000000..29b325fe Binary files /dev/null and b/public/logo/satker/DIV-TIK.png differ diff --git a/public/logo/satker/DIVHUBINTER-1.png b/public/logo/satker/DIVHUBINTER-1.png new file mode 100644 index 00000000..a1ccc6ae Binary files /dev/null and b/public/logo/satker/DIVHUBINTER-1.png differ diff --git a/public/logo/satker/DIVHUBINTER.png b/public/logo/satker/DIVHUBINTER.png new file mode 100644 index 00000000..9dbf794f Binary files /dev/null and b/public/logo/satker/DIVHUBINTER.png differ diff --git a/public/logo/satker/DIVKUM.png b/public/logo/satker/DIVKUM.png new file mode 100644 index 00000000..fdbed67a Binary files /dev/null and b/public/logo/satker/DIVKUM.png differ diff --git a/public/logo/satker/DIVPROPAM.png b/public/logo/satker/DIVPROPAM.png new file mode 100644 index 00000000..8f26e469 Binary files /dev/null and b/public/logo/satker/DIVPROPAM.png differ diff --git a/public/logo/satker/ITWASUM.png b/public/logo/satker/ITWASUM.png new file mode 100644 index 00000000..1e0b8c4e Binary files /dev/null and b/public/logo/satker/ITWASUM.png differ diff --git a/public/logo/satker/KORLANTAS.png b/public/logo/satker/KORLANTAS.png new file mode 100644 index 00000000..014f88e3 Binary files /dev/null and b/public/logo/satker/KORLANTAS.png differ diff --git a/public/logo/satker/KORPS-SABHARA-BAHARKAM.png b/public/logo/satker/KORPS-SABHARA-BAHARKAM.png new file mode 100644 index 00000000..4de4ca4c Binary files /dev/null and b/public/logo/satker/KORPS-SABHARA-BAHARKAM.png differ diff --git a/public/logo/satker/LEMDIKLAT.png b/public/logo/satker/LEMDIKLAT.png new file mode 100644 index 00000000..225c6f34 Binary files /dev/null and b/public/logo/satker/LEMDIKLAT.png differ diff --git a/public/logo/satker/LOGO SETUKPA POLRI.png b/public/logo/satker/LOGO SETUKPA POLRI.png new file mode 100644 index 00000000..228a4d7f Binary files /dev/null and b/public/logo/satker/LOGO SETUKPA POLRI.png differ diff --git a/public/logo/satker/POLAIR.png b/public/logo/satker/POLAIR.png new file mode 100644 index 00000000..288ffc1a Binary files /dev/null and b/public/logo/satker/POLAIR.png differ diff --git a/public/logo/satker/POLAIRUD.png b/public/logo/satker/POLAIRUD.png new file mode 100644 index 00000000..fdc203a9 Binary files /dev/null and b/public/logo/satker/POLAIRUD.png differ diff --git a/public/logo/satker/POLUDARA.png b/public/logo/satker/POLUDARA.png new file mode 100644 index 00000000..009ad7d9 Binary files /dev/null and b/public/logo/satker/POLUDARA.png differ diff --git a/public/logo/satker/PUSDOKKES.png b/public/logo/satker/PUSDOKKES.png new file mode 100644 index 00000000..c24c5a10 Binary files /dev/null and b/public/logo/satker/PUSDOKKES.png differ diff --git a/public/logo/satker/PUSINAFIS.png b/public/logo/satker/PUSINAFIS.png new file mode 100644 index 00000000..b5201138 Binary files /dev/null and b/public/logo/satker/PUSINAFIS.png differ diff --git a/public/logo/satker/PUSJARAH.png b/public/logo/satker/PUSJARAH.png new file mode 100644 index 00000000..69797794 Binary files /dev/null and b/public/logo/satker/PUSJARAH.png differ diff --git a/public/logo/satker/PUSKEU.png b/public/logo/satker/PUSKEU.png new file mode 100644 index 00000000..c8e2eea3 Binary files /dev/null and b/public/logo/satker/PUSKEU.png differ diff --git a/public/logo/satker/PUSKINAS.png b/public/logo/satker/PUSKINAS.png new file mode 100644 index 00000000..fc12685c Binary files /dev/null and b/public/logo/satker/PUSKINAS.png differ diff --git a/public/logo/satker/PUSLITBANG.png b/public/logo/satker/PUSLITBANG.png new file mode 100644 index 00000000..acbf6486 Binary files /dev/null and b/public/logo/satker/PUSLITBANG.png differ diff --git a/public/logo/satker/SATUAN-KERJA-POLRI.png b/public/logo/satker/SATUAN-KERJA-POLRI.png new file mode 100644 index 00000000..31bc7d7c Binary files /dev/null and b/public/logo/satker/SATUAN-KERJA-POLRI.png differ diff --git a/public/logo/satker/SESPIM-POLRI.png b/public/logo/satker/SESPIM-POLRI.png new file mode 100644 index 00000000..37bd475e Binary files /dev/null and b/public/logo/satker/SESPIM-POLRI.png differ diff --git a/public/logo/satker/SETUM.png b/public/logo/satker/SETUM.png new file mode 100644 index 00000000..72f4fb19 Binary files /dev/null and b/public/logo/satker/SETUM.png differ diff --git a/public/logo/satker/SIBER.png b/public/logo/satker/SIBER.png new file mode 100644 index 00000000..e58c1336 Binary files /dev/null and b/public/logo/satker/SIBER.png differ diff --git a/public/logo/satker/SLOG.png b/public/logo/satker/SLOG.png new file mode 100644 index 00000000..bb4a534c Binary files /dev/null and b/public/logo/satker/SLOG.png differ diff --git a/public/logo/satker/SOPS.png b/public/logo/satker/SOPS.png new file mode 100644 index 00000000..47dbec55 Binary files /dev/null and b/public/logo/satker/SOPS.png differ diff --git a/public/logo/satker/SPRIPIM.png b/public/logo/satker/SPRIPIM.png new file mode 100644 index 00000000..9e42c17f Binary files /dev/null and b/public/logo/satker/SPRIPIM.png differ diff --git a/public/logo/satker/SRENA.png b/public/logo/satker/SRENA.png new file mode 100644 index 00000000..7849f61c Binary files /dev/null and b/public/logo/satker/SRENA.png differ diff --git a/public/logo/satker/SSDM.png b/public/logo/satker/SSDM.png new file mode 100644 index 00000000..8fb1b82c Binary files /dev/null and b/public/logo/satker/SSDM.png differ diff --git a/public/logo/satker/STAFAHLI.png b/public/logo/satker/STAFAHLI.png new file mode 100644 index 00000000..5a0f5818 Binary files /dev/null and b/public/logo/satker/STAFAHLI.png differ diff --git a/public/logo/satker/STIK-PTIK.png b/public/logo/satker/STIK-PTIK.png new file mode 100644 index 00000000..dac52725 Binary files /dev/null and b/public/logo/satker/STIK-PTIK.png differ diff --git a/public/logo/satker/YANMA.png b/public/logo/satker/YANMA.png new file mode 100644 index 00000000..a701258e Binary files /dev/null and b/public/logo/satker/YANMA.png differ 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));