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..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" }, @@ -30,7 +31,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" }, @@ -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..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,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 8ae450cb..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"; @@ -52,7 +52,23 @@ const Hero: React.FC = () => { console.log(response); 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,13 +86,21 @@ const Hero: React.FC = () => { {heroData?.map((list: any) => (
- gambar-utama + gambar-utama +
{list?.categoryName} -

{list?.title}

+

{list?.title}

-

+

{formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone ? list?.timezone : "WIB"}|{" "} { {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/landing-page/news-tickers.tsx b/components/landing-page/news-tickers.tsx index 72b01cdc..ac3e8f2f 100644 --- a/components/landing-page/news-tickers.tsx +++ b/components/landing-page/news-tickers.tsx @@ -47,7 +47,7 @@ export default function NewsTicker() { }, [article?.length]); return ( -

    +
    {t("breakingNews")}
    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/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));