diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/layout.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/layout.tsx index fab820cf..2a601604 100644 --- a/app/[locale]/(public)/(polda)/polda/[polda_name]/layout.tsx +++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/layout.tsx @@ -1,3 +1,5 @@ +"use client"; + import LayoutProvider from "@/providers/layout.provider"; import LayoutContentProvider from "@/providers/content.provider"; import DashCodeSidebar from "@/components/partials/sidebar"; @@ -8,9 +10,15 @@ import DashCodeHeader from "@/components/partials/header"; import { redirect } from "@/components/navigation"; import Footer from "@/components/landing-page/footer"; import Navbar from "@/components/landing-page/navbar"; +import NavbarKaltara from "@/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara"; +import { useParams } from "next/navigation"; -const layout = async ({ children }: { children: React.ReactNode }) => { - return ( +const layout = ({ children }: { children: React.ReactNode }) => { + const params = useParams(); + const poldaName: any = params?.polda_name; + return poldaName === "kaltara" ? ( + children + ) : ( <> {children} diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx index 0de775b9..4f18ade0 100644 --- a/app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx +++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx @@ -5,9 +5,29 @@ import HeaderBanner from "@/components/landing-page/header-banner"; import NewContent from "@/components/landing-page/new-content"; import WelcomePolda from "@/components/landing-page/welcome-polda"; import React from "react"; +import { useParams } from "next/navigation"; +import NavbarKaltara from "@/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara"; +import HeaderBannerKaltara from "@/components/landing-page/landing-polda-kaltara/header-banner-kaltara"; +import SearchSectionKaltara from "@/components/landing-page/landing-polda-kaltara/search-section-kaltara"; +import LatestContentKaltara from "@/components/landing-page/landing-polda-kaltara/latest-content-kaltara"; +import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara"; +import NewsTickerKaltara from "../../tbnews/[polda_name]/components/news-tickers-kaltara"; const page = () => { - return ( + const params = useParams(); + const poldaName: any = params?.polda_name; + return poldaName === "kaltara" ? ( +
+ + + + + + + + +
+ ) : (
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 index 9067dd2d..7aaf9114 100644 --- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx +++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx @@ -114,7 +114,7 @@ const HeroKaltara = () => { return ( <> -
+
{isBannerLoading ? (
@@ -126,19 +126,19 @@ const HeroKaltara = () => { ) : (
{content?.map((row: any, index: number) => ( -
+
- gambar-utama + gambar-utama -

{row.title}

+

{row.title}

-

{row?.categoryName}

-

- {getPublicLocaleTimestamp(new Date(row?.createdAt))} +

{row?.categoryName}

+

+ {getPublicLocaleTimestamp(new Date(row?.createdAt))} {/* {row?.createdAt} */}

-

+

))}
@@ -183,17 +183,17 @@ const HeroKaltara = () => {
) : ( -
+
{newContent?.slice(1).map((item: any, index: number) => ( -
+
- +
-
-

{item?.title}

+
+

{item?.title}

-

{item?.categoryName}

-

+

{item?.categoryName}

+

{/* {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"} */} {item?.createdAt}

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 index 15420056..a8349ced 100644 --- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/latest-news.tsx +++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/latest-news.tsx @@ -151,16 +151,16 @@ const LatestNews = (props: { type: string }) => { ) : (
{newContent?.slice(0, 1).map((row: any) => ( -
- gambar-utama

{row?.title}

-
-

{row?.categoryName}

-

+

+ gambar-utama

{row?.title}

+
+

{row?.categoryName}

+

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

-

{row?.description}

+

{row?.description}

))}
@@ -205,17 +205,17 @@ const LatestNews = (props: { type: string }) => {
) : ( -
+
{newContent?.slice(1).map((item: any) => (
{/*
*/} -
-

{item?.title}

+
+

{item?.title}

-

{item?.categoryName}

-

+

{item?.categoryName}

+

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

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 index aee57687..85a067be 100644 --- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/national-news.tsx +++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/national-news.tsx @@ -148,16 +148,16 @@ const NationalNews = () => { ) : (
{newContent?.slice(0, 1).map((row: any) => ( -
- gambar-utama

{row?.title}

-
-

{row?.categoryName}

-

+

+ gambar-utama

{row?.title}

+
+

{row?.categoryName}

+

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

-

{row?.description}

+

{row?.description}

))}
@@ -202,17 +202,17 @@ const NationalNews = () => {
) : ( -
+
{newContent?.slice(1).map((item: any) => (
{/*
*/} -
-

{item?.title}

+
+

{item?.title}

-

{item?.categoryName}

-

+

{item?.categoryName}

+

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

diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx index b63c339d..0a41be1c 100644 --- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx +++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx @@ -53,7 +53,7 @@ const NavbarKaltara = () => { return (
- + image
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/news-tickers-kaltara.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/news-tickers-kaltara.tsx index 7739d122..9cd499d7 100644 --- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/news-tickers-kaltara.tsx +++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/news-tickers-kaltara.tsx @@ -1,10 +1,11 @@ "use client"; import { Link } from "@/i18n/routing"; -import { getHeroData, listCarousel } from "@/service/landing/landing"; +import { getHeroData, listCarousel, listData } from "@/service/landing/landing"; import { formatDateToIndonesian, textEllipsis } from "@/utils/globals"; import { useEffect, useState } from "react"; import { useTranslations } from "next-intl"; import { Icon } from "@/components/ui/icon"; +import { useParams } from "next/navigation"; export default function NewsTickerKaltara() { const [article, setArticle] = useState([]); @@ -12,6 +13,11 @@ export default function NewsTickerKaltara() { const [animate, setAnimate] = useState(false); const [tanggal, setTanggal] = useState(""); const t = useTranslations("LandingPage"); + const [content, setContent] = useState([]); + const [isBannerLoading, setIsBannerLoading] = useState(true); + const [centerPadding, setCenterPadding] = useState(); + const params = useParams(); + const poldaName: any = params?.polda_name; useEffect(() => { const options: Intl.DateTimeFormatOptions = { @@ -25,12 +31,63 @@ export default function NewsTickerKaltara() { }, []); useEffect(() => { - async function getArticle() { - const response = await getHeroData(); - setArticle(response?.data?.data?.content); + // 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"); } - getArticle(); - }, []); + + 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, + }, + }, + ], + }; + + // useEffect(() => { + // async function getArticle() { + // const response = await getHeroData(); + // setArticle(response?.data?.data?.content); + // } + // getArticle(); + // }, []); const triggerAnimation = (newIndex: number) => { setAnimate(true); @@ -41,22 +98,22 @@ export default function NewsTickerKaltara() { }; const handlePrev = () => { - const newIndex = (currentNewsIndex - 1 + article.length) % article.length; + const newIndex = (currentNewsIndex - 1 + content.length) % content.length; triggerAnimation(newIndex); }; const handleNext = () => { - const newIndex = (currentNewsIndex + 1) % article.length; + const newIndex = (currentNewsIndex + 1) % content.length; triggerAnimation(newIndex); }; useEffect(() => { const interval = setInterval(() => { - triggerAnimation((currentNewsIndex + 1) % article.length); + triggerAnimation((currentNewsIndex + 1) % content.length); }, 7000); return () => clearInterval(interval); - }, [article?.length]); + }, [content?.length]); return (
@@ -66,13 +123,13 @@ export default function NewsTickerKaltara() {
{t("breakingNews")} :
- -

{article[currentNewsIndex]?.title}

+ +

{content[currentNewsIndex]?.title}

- -

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

+ +

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

-

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

+

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

handlePrev()}> 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 index dfdd98f4..a81bd11e 100644 --- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx +++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx @@ -141,16 +141,16 @@ const RegionalNews = () => { ) : (
{newContent?.slice(0, 1).map((row: any) => ( -
- gambar-utama

{row?.title}

+
+ gambar-utama

{row?.title}

-

{row?.categoryName}

-

+

{row?.categoryName}

+

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

-

{row?.description}

+

{row?.description}

))}
@@ -201,11 +201,11 @@ const RegionalNews = () => { {/*
*/} -
-

{item?.title}

+
+

{item?.title}

-

{item?.categoryName}

-

+

{item?.categoryName}

+

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

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 index 22fb1726..394f1031 100644 --- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx +++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx @@ -22,28 +22,28 @@ const SocialMedia = () => { > X{" "} -
|
+
|
Instagram -
|
+
|
Facebook -
|
+
|
Tiktok -
|
+
|
{
-
+
{selectedTab == "x" ? ( -
-
+
+
{" "} @@ -79,14 +79,13 @@ const SocialMedia = () => {

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et - dolor ut ullam tempora deserunt dolore consequatur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati sint et sunt quis, eius fuga aliquid, officia possimus quidem adipisci repudiandae voluptate - deserunt dolores dolor minima, earum similique eligendi quaerat. + dolor ut ullam tempora deserunt dolore consequatur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati sint et sunt quis, eius fuga aliquid

- {" "} + {" "}
-
+
{" "} @@ -94,215 +93,220 @@ const SocialMedia = () => {
-

Humas_PoldaKaltara

- - - +

Humas_PoldaKaltara

+ + + +
+

@HumasKaltara

-

@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! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima repellat corrupti ipsa cumque obcaecati sed ipsum libero, excepturi officia amet, sequi ullam - dolores accusantium vero suscipit aut vel temporibus fugit. -

- {" "} -
-
-
-
-
-
- {" "} - -
-
-
-

Humas_PoldaKaltara

- - - +
+
+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et + dolor ut ullam tempora deserunt dolore consequatur! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima repellat corrupti ipsa cumque obcaecati sed ipsum libero +

+ {" "}
-

@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! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem, eveniet sint modi, cupiditate pariatur quod voluptas minus commodi molestiae, natus dolores - asperiores debitis provident error odio eaque id? Iste, enim? -

- {" "} -
-
-
-
-
-
- {" "} - -
-
-
-

Humas_PoldaKaltara

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

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! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem, eveniet sint modi, cupiditate pariatur quod voluptas minus +

+ {" "}
-

@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! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore quibusdam doloribus magni nisi consectetur reiciendis cumque eius exercitationem. Adipisci ipsam - dolor accusamus quibusdam. -

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

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! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore quibusdam doloribus magni nisi +

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

TBNews Mabes Polri

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

TBNews Mabes Polri

+ + + +
+

@TBNewsMabes

+
-

@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

- - - +
+
+

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

+ {" "} +
-

@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

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

TBNews Mabes Polri

+ + + +
+

@TBNewsMabes

+
-

@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

- - - +
+
+

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

+ {" "} +
-

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

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

- empty -

- )} -
+ ) : 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 diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx index ba10a66c..6ffd9dc2 100644 --- a/app/[locale]/layout.tsx +++ b/app/[locale]/layout.tsx @@ -30,13 +30,16 @@ export default async function RootLayout({ const direction = getLangDir(locale); return ( + + + + + - - {children} - + {children} diff --git a/components/landing-page/landing-polda-kaltara/contact-us-kaltara.tsx b/components/landing-page/landing-polda-kaltara/contact-us-kaltara.tsx new file mode 100644 index 00000000..7423ba3b --- /dev/null +++ b/components/landing-page/landing-polda-kaltara/contact-us-kaltara.tsx @@ -0,0 +1,133 @@ +import { Link } from "@/i18n/routing"; +import { Icon } from "@iconify/react/dist/iconify.js"; +import Image from "next/image"; +import React from "react"; + +const ContactUsKaltara = () => { + return ( + + ); +}; + +export default ContactUsKaltara; diff --git a/components/landing-page/landing-polda-kaltara/content-category-kaltara.tsx b/components/landing-page/landing-polda-kaltara/content-category-kaltara.tsx new file mode 100644 index 00000000..d0608437 --- /dev/null +++ b/components/landing-page/landing-polda-kaltara/content-category-kaltara.tsx @@ -0,0 +1,116 @@ +import { getCategoryData, getPublicCategoryData } from "@/service/landing/landing"; +import Link from "next/link"; +import React, { useEffect, useState } from "react"; +import { useTranslations } from "next-intl"; +import { usePathname } from "next/navigation"; +import { useParams } from "next/navigation"; +import Image from "next/image"; +import { Reveal } from "../Reveal"; +import { Button } from "@/components/ui/button"; + +const ContentCategory = (props: { group?: string }) => { + const [categories, setCategories] = useState(); + const t = useTranslations("LandingPage"); + const params = useParams(); + const locale = params?.locale; + const poldaName = params?.polda_name; + const satkerName = params?.satker_name; + const [searchTerm, setSearchTerm] = useState(""); + const [seeAllValue, setSeeAllValue] = useState(false); + const pathname = usePathname(); + + useEffect(() => { + initFetch(); + }, []); + const initFetch = async () => { + const response = await getPublicCategoryData( + props.group == "mabes" ? "" : props.group == "polda" && poldaName && String(poldaName)?.length > 1 ? poldaName : props.group == "satker" && satkerName && String(satkerName)?.length > 1 ? "satker-" + satkerName : "", + "", + locale == "en" ? true : false + ); + console.log("category", response); + setCategories(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 ( +
+ +

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

+
+ +
+ {categories?.map((category: any, index: number) => + !seeAllValue ? ( + index < 4 ? ( + + category +
+

{category?.name}

+
+ + ) : ( + "" + ) + ) : ( + + category +
+

{category?.name}

+
+ + ) + )} +
+
+ +
+ +
+ ); +}; + +export default ContentCategory; diff --git a/components/landing-page/landing-polda-kaltara/header-banner-kaltara.tsx b/components/landing-page/landing-polda-kaltara/header-banner-kaltara.tsx new file mode 100644 index 00000000..22de2f5e --- /dev/null +++ b/components/landing-page/landing-polda-kaltara/header-banner-kaltara.tsx @@ -0,0 +1,187 @@ +"use client"; +import { listData } from "@/service/landing/landing"; +import { useParams } from "next/navigation"; +import React, { useEffect, useState } from "react"; +import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; +import { formatDateToIndonesian, getPublicLocaleTimestamp, textEllipsis } from "@/utils/globals"; +import { Icon } from "@iconify/react/dist/iconify.js"; +import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"; +import Image from "next/image"; +import { useRouter } from "@/i18n/routing"; +import { Reveal } from "../Reveal"; + +const HeaderBannerKaltara = () => { + const router = useRouter(); + const params = useParams(); + const poldaName: any = params?.polda_name; + const [content, setContent] = useState([]); + const [isBannerLoading, setIsBannerLoading] = useState(true); + const [centerPadding, setCenterPadding] = useState(); + const satkerName = params?.satker_name; + + let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/"; + + 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"); + } + + 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 ( + <> + + {/* Header Left */} +
+ {isBannerLoading ? ( +
+ +
+ + +
+
+ ) : ( + + + {content?.map((row: any) => ( + +
+ +
+ {row?.categoryName} +
router.push(prefixPath + `/image/detail/${row?.slug}`)} className="cursor-pointer"> +

{row.title}

+
+

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

+
+
+ + ))} + + + + + )} + + {/* Header Right */} +
+ {isBannerLoading ? ( + <> +
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+ + ) : ( +
    + {content?.map((item: any) => ( +
  • +
    + {item?.title} +
    +
    + {item?.categoryName} +
    router.push(prefixPath + `/image/detail/${item?.slug}`)} className="cursor-pointer"> +

    {textEllipsis(item?.title, 30)}

    +
    +

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

    +
    +
    • + ))} +
+ )} +
+
+ + + ); +}; + +export default HeaderBannerKaltara; diff --git a/components/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx b/components/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx new file mode 100644 index 00000000..c933d755 --- /dev/null +++ b/components/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx @@ -0,0 +1,311 @@ +"use client"; + +import React, { useEffect, useState } from "react"; +import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"; +import Image from "next/image"; +import { Skeleton } from "@/components/ui/skeleton"; +import { formatDateToIndonesian, secondToTimes } from "@/utils/globals"; +import { useParams } from "next/navigation"; +import { listData } from "@/service/landing/landing"; +import { useRouter } from "@/i18n/routing"; +import { Icon } from "@iconify/react/dist/iconify.js"; +import { useTranslations } from "next-intl"; +import { Reveal } from "../Reveal"; + +const LatestContentKaltara = (props: { group: string; type: string }) => { + const [selectedTab, setSelectedTab] = useState("video"); + const [isLoading, setIsLoading] = useState(true); + const params = useParams(); + const poldaName: any = params?.polda_name; + const satkerName = params?.satker_name; + const [content, setContent] = useState([]); + const [isBannerLoading, setIsBannerLoading] = useState(true); + const [centerPadding, setCenterPadding] = useState(); + const router = useRouter(); + const t = useTranslations("LandingPage"); + + let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/"; + + 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"); + } + + fetchData(); + }, [params?.page]); + + useEffect(() => { + const timer = setTimeout(() => { + setIsLoading(false); + }, 3000); + + return () => clearTimeout(timer); + }, []); + + const shimmer = (w: number, h: number) => ` + + + + + + + + + + + + `; + + const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str)); + + return ( + <> + +
+
Berita {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"}
+
+ + + + Audio Visual + +
|
+ + + Audio + +
|
+ + + Foto + +
|
+ + + Teks + + + +
+ + {isLoading ? ( +
+ + + +
+ ) : ( +
+ {selectedTab == "image" ? ( + content?.length > 0 ? ( + + + {content?.map((video: any) => ( + +
router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden"> + {/* Gambar */} + video + + {/* Kategori - Sekarang Berada di Atas */} + {video?.categoryName} + + {/* Overlay Konten (Informasi di Bawah) */} +
+ {/* Judul */} +

{video?.title}

+ + {/* Info Tambahan */} + {/*

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

*/} +
+
+ + ))} + + + + + ) : ( +

+ empty +

+ ) + ) : selectedTab == "audio" ? ( + content?.length > 0 ? ( + + + {content?.map((audio: any) => ( + +
+
router.push(prefixPath + `/audio/detail/${audio?.slug}`)} className="cursor-pointer flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 gap-4 w-full"> +
+ + + +
+ +
+
+ {formatDateToIndonesian(new Date(audio?.createdAt))} {audio?.timezone ? audio?.timezone : "WIB"} |  +   {audio?.clickCount}{" "} +
+
{audio?.title}
+

{audio?.duration ? secondToTimes(Number(audio?.duration)) : "00:00:00"}

+
+
+
+ + ))} + + + + + ) : ( +

+ empty +

+ ) + ) : selectedTab == "video" ? ( + content?.length > 0 ? ( + + + {content?.map((video: any) => ( + +
router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-lg overflow-hidden"> + {/* Gambar */} + video + + {/* Kategori - Sekarang Berada di Atas */} + {video?.categoryName} + + {/* Overlay Konten (Informasi di Bawah) */} +
+ {/* Judul */} +

{video?.title}

+ + {/* Info Tambahan */} + {/*

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

*/} +
+
+ + ))} + + + + + ) : ( +

+ empty +

+ ) + ) : content.length > 0 ? ( + + + {content?.map((text: any) => ( + +
+
router.push(prefixPath + `/document/detail/${text?.slug}`)} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4"> +
+ + + +
+ +
+
+ {formatDateToIndonesian(new Date(text?.createdAt))} + {text?.timezone ? text?.timezone : "WIB"}| + + {text?.clickCount} +
+
{text?.title}
+
+ + + + Download {t("document")} +
+
+
+
+ + ))} + + + + + ) : ( +

+ empty +

+ )} +
+ )} + +
+
router.push(prefixPath + `/${selectedTab}/filter?sortBy=${props.type}`)} className="cursor-pointer border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523]"> + {t("seeAll")} +
+
+
+ + + ); +}; + +export default LatestContentKaltara; diff --git a/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara.tsx b/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara.tsx new file mode 100644 index 00000000..6f215b79 --- /dev/null +++ b/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara.tsx @@ -0,0 +1,191 @@ +"use client"; + +import { Link, useRouter } from "@/i18n/routing"; +import Image from "next/image"; +import { useParams, usePathname } from "next/navigation"; +import React, { useState } from "react"; +import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu"; +import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi"; +import { useTranslations } from "next-intl"; +import LocalSwitcher from "@/components/partials/header/locale-switcher"; +import ThemeSwitcher from "@/components/partials/header/theme-switcher"; +import { Button } from "@/components/ui/button"; +import { Icon } from "@iconify/react/dist/iconify.js"; + +const NavbarKaltara = () => { + const params = useParams(); + const router = useRouter(); + const pathname = usePathname(); + const [menuOpen, setMenuOpen] = useState(false); + const [onSearch, setOnSearch] = useState(""); + const locale = params?.locale; + const poldaName = params?.polda_name; + const satkerName = params?.satker_name; + const t = useTranslations("LandingPage"); + + let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/"; + return ( +
+
+
+ + Media Hub Logo + + +
+ + + + + {/* */} + {/* + + */} + {t("content")} + {/* */} + + + router.push(prefixPath + "/image/filter")} className="flex place-items-start gap-1.5 p-2 w-36"> +

+ + {t("image")} +

+ + router.push(prefixPath + "/video/filter")} className="flex items-start gap-1.5 p-2 "> + {pathname?.split("/")[1] == "in" ? ( + <> +

+ + {t("video")} +

+ + ) : ( + <> +

+ + {t("video")} +

+ + )} + + router.push(prefixPath + "/document/filter")} className="flex place-items-start gap-1.5 p-2"> +

+ + {t("text")} +

+ + router.push(prefixPath + "/audio/filter")} className="flex place-items-start gap-1.5 p-2 "> +

+ + {t("audio")}{" "} +

+ + + + + + + {/* + + + + */} + {t("schedule")} + + + + + + + {/* + + + + */} + {t("index")} + + + + + +
+
+ + {/* Mobile Menu Toggle */} + + +
+ + TBNews + + +
+ + polritv + +
+ + {/* Languange */} +
+ +
+ +
+ setOnSearch(e.target.value)} + onKeyPress={() => router.push(`/all/filter?title=${onSearch}`)} + type="text" + placeholder={t("search")} + className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white" + /> + + + + + +
+ + {/* Dark Mode */} + + + {/* login */} + + + +
+
+
+ ); +}; + +export default NavbarKaltara; diff --git a/components/landing-page/landing-polda-kaltara/search-section-kaltara.tsx b/components/landing-page/landing-polda-kaltara/search-section-kaltara.tsx new file mode 100644 index 00000000..4a24908d --- /dev/null +++ b/components/landing-page/landing-polda-kaltara/search-section-kaltara.tsx @@ -0,0 +1,34 @@ +import { Input } from "@/components/ui/input"; +import { useRouter } from "@/i18n/routing"; +import { useTranslations } from "next-intl"; +import React, { useState } from "react"; +import { Reveal } from "../Reveal"; + +const SearchSectionKaltara = () => { + const [search, setSearch] = useState(""); + const router = useRouter(); + const t = useTranslations("LandingPage"); + + return ( + <> + +
+ {/* Heading */} +

Liputan apa yang sedang anda cari?

+

Liputan terkini yang bersumber langsung dari kegiatan Polri di Mabes, Polda dan Polres di seluruh Indonesia

+ + {/* Subjudul */} +

Temukan Liputan Anda

+ + {/* Search Bar */} +
+ + +
+
+ + + ); +}; + +export default SearchSectionKaltara; diff --git a/public/assets/polda/globe.png b/public/assets/polda/globe.png new file mode 100644 index 00000000..404dbc5f Binary files /dev/null and b/public/assets/polda/globe.png differ diff --git a/public/assets/polda/logo-kontak.png b/public/assets/polda/logo-kontak.png new file mode 100644 index 00000000..f2794c0a Binary files /dev/null and b/public/assets/polda/logo-kontak.png differ diff --git a/style/global.css b/style/global.css new file mode 100644 index 00000000..5a22a31a --- /dev/null +++ b/style/global.css @@ -0,0 +1,2 @@ +/* @import url("https://fonts.googleapis.com/css2?family=Bytesized&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); */ +@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"); diff --git a/tailwind.config.ts b/tailwind.config.ts index 086adf1d..d2de0029 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,14 +1,8 @@ -import type { Config } from "tailwindcss" +import type { Config } from "tailwindcss"; const config = { darkMode: ["class"], - content: [ - './pages/**/*.{ts,tsx}', - './components/**/*.{js,ts,tsx}', - './providers/**/*.{ts,tsx}', - './app/**/*.{ts,tsx}', - './src/**/*.{ts,tsx}', - ], + content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{js,ts,tsx}", "./providers/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], prefix: "", theme: { container: { @@ -19,11 +13,14 @@ const config = { }, }, extend: { - colors: { + fontFamily: { + sans: ["DM Sans", "sans-serif"], + }, + colors: { border: "hsl(var(--border))", - 'menu-arrow': "hsl(var(--menu-arrow))", - 'menu-arrow-active': "hsl(var(--menu-arrow-active))", - 'menu-menu-foreground': "hsl(var(--menu-foreground))", + "menu-arrow": "hsl(var(--menu-arrow))", + "menu-arrow-active": "hsl(var(--menu-arrow-active))", + "menu-menu-foreground": "hsl(var(--menu-foreground))", default: { 50: "hsl(var(--default-50) / )", 100: "hsl(var(--default-100) / )", @@ -65,11 +62,9 @@ const config = { }, sidebar: { DEFAULT: "hsl(var(--sidebar))", - }, header: { DEFAULT: "hsl(var(--header))", - }, destructive: { DEFAULT: "hsl(var(--destructive))", @@ -106,7 +101,7 @@ const config = { foreground: "hsl(var(--card-foreground))", }, }, - + borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", @@ -121,7 +116,7 @@ const config = { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, - zoom: { + zoom: { "0%, 100%": { transform: "scale(0.5)" }, "50%": { transform: "scale(1)" }, }, @@ -141,8 +136,7 @@ const config = { }, boxShadow: { base: "0px 0px 1px rgba(40, 41, 61, 0.08), 0px 0.5px 2px rgba(96, 97, 112, 0.16)", - base2: - "0px 2px 4px rgba(40, 41, 61, 0.04), 0px 8px 16px rgba(96, 97, 112, 0.16)", + base2: "0px 2px 4px rgba(40, 41, 61, 0.04), 0px 8px 16px rgba(96, 97, 112, 0.16)", base3: "16px 10px 40px rgba(15, 23, 42, 0.22)", deep: "-2px 0px 8px rgba(0, 0, 0, 0.16)", dropdown: "0px 4px 8px rgba(0, 0, 0, 0.08)", @@ -154,11 +148,11 @@ const config = { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", zoom: "zoom 1s ease-in-out infinite", - tada: "tada 1.5s ease-in-out infinite", + tada: "tada 1.5s ease-in-out infinite", }, }, }, plugins: [require("tailwindcss-animate")], -} satisfies Config +} satisfies Config; -export default config \ No newline at end of file +export default config;