mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixing tbnews polda kaltara

This commit is contained in:
Sabda Yagra 2025-04-24 15:40:01 +07:00
parent f726345640
commit 2ac4283a1c
14 changed files with 152 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx
View File

@ -20,7 +20,8 @@ const page = () => {
<div> <div>
<NavbarKaltara /> <NavbarKaltara />
<HeaderBannerKaltara /> <HeaderBannerKaltara />
<SearchSectionKaltara /> {/* <SearchSectionKaltara /> */}
<WelcomePolda />
<LatestContentKaltara group="polda" type="latest" /> <LatestContentKaltara group="polda" type="latest" />
<LatestContentKaltara group="polda" type="popular" /> <LatestContentKaltara group="polda" type="popular" />
<ContentCategory group="polda" /> <ContentCategory group="polda" />

2
app/[locale]/layout.tsx
View File

@ -13,6 +13,7 @@ import { NextIntlClientProvider } from "next-intl";
import { getMessages } from "next-intl/server"; import { getMessages } from "next-intl/server";
import DirectionProvider from "@/providers/direction-provider"; import DirectionProvider from "@/providers/direction-provider";
import AuthProvider from "@/providers/auth.provider"; import AuthProvider from "@/providers/auth.provider";
import LoadScript from "@/utils/globals";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Media Hub | POLRI", title: "Media Hub | POLRI",
@ -34,6 +35,7 @@ export default async function RootLayout({
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet" />
<LoadScript />
</head> </head>
<body className={`${inter.className} dashcode-app`}> <body className={`${inter.className} dashcode-app`}>
<NextIntlClientProvider messages={messages} locale={locale}> <NextIntlClientProvider messages={messages} locale={locale}>

9
components/landing-page/content-category.tsx
View File

@ -52,8 +52,8 @@ const ContentCategory = (props: { group?: string }) => {
return ( return (
<div className="px-4 lg:px-24 py-10"> <div className="px-4 lg:px-24 py-10">
<Reveal> <Reveal>
<h2 className="bg-[#c03724] rounded-md p-3 w-fit text-white"> <h2 className="text-center text-xl lg:text-3xl font-bold text-[#bb3523] mb-4">
{/* {pathname?.split("/")[1] == "in" ? ( {pathname?.split("/")[1] == "in" ? (
<> <>
<span className="text-black dark:text-white">{t("category")}&nbsp;</span> <span className="text-black dark:text-white">{t("category")}&nbsp;</span>
{t("content")} {t("content")}
@ -63,10 +63,9 @@ const ContentCategory = (props: { group?: string }) => {
<span className="text-black dark:text-white">{t("content")}&nbsp;</span> <span className="text-black dark:text-white">{t("content")}&nbsp;</span>
{t("category")} {t("category")}
</> </>
)} */} )}
Kategori Konten
</h2> </h2>
{/* <div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div> */} <div className="h-1 w-52 bg-[#bb3523] mx-auto mb-6 rounded"></div>
<div className="grid my-8 grid-cols-1 lg:grid-cols-4 gap-4"> <div className="grid my-8 grid-cols-1 lg:grid-cols-4 gap-4">
{categories?.map((category: any, index: number) => {categories?.map((category: any, index: number) =>

71
components/landing-page/landing-polda-kaltara/contact-us-kaltara.tsx
View File

@ -1,17 +1,72 @@
import { Button } from "@/components/ui/button";
import { Link } from "@/i18n/routing"; import { Link } from "@/i18n/routing";
import { Icon } from "@iconify/react/dist/iconify.js"; import { Icon } from "@iconify/react/dist/iconify.js";
import Image from "next/image"; import Image from "next/image";
import React from "react"; import React from "react";
type Channel = {
name: string;
logo: string;
url: string;
};
const channels: Channel[] = [
{
name: "Divisi Humas Polri",
logo: "/assets/portal-humas.png",
url: "https://portal.humas.polri.go.id/",
},
{
name: "Media Hub",
logo: "/assets/mediahub-logo.gif",
url: "/polda/kaltara",
},
{
name: "SPIT",
logo: "/assets/logo-spit.png",
url: "https://spit.humas.polri.go.id/",
},
{
name: "Polri TV",
logo: "/assets/polriTv.png",
url: "https://tvradio.polri.go.id/",
},
{
name: "TBNews",
logo: "/assets/img/logo-tbn.png",
url: "/tbnews/polda-kaltara",
},
{
name: "INP",
logo: "/assets/logo-inp.png",
url: "https://inp.polri.go.id/",
},
];
const ContactUsKaltara = () => { const ContactUsKaltara = () => {
return ( return (
<div className="bg-[#E7E7E7] h-full lg:h-[300px] text-black px-4 lg:px-20 mb-10"> <div className="min-h-[300px] lg:min-h-[300px] text-black px-4 lg:px-20 pb-20">
<div className="container mx-auto py-8"> <div className="w-full px-4 py-4 bg-white">
<h2 className="text-center text-xl md:text-2xl font-semibold mb-6">Channel Divisi Humas Polri</h2>
{/* Mobile version pakai grid, Desktop pakai flex */}
<div className="grid grid-cols-3 gap-4 sm:flex sm:justify-between sm:flex-wrap">
{channels.map((channel, index) => (
<Link key={index} href={channel.url} passHref>
<div key={index} className="w-16 h-16 sm:w-[170px] sm:h-[80px] relative mx-auto">
<Image src={channel.logo} alt={channel.name} width={1920} height={1080} className="object-contain w-full h-full" />
</div>
</Link>
))}
</div>
</div>
<div className="container mx-auto py-8 border-t-2 ">
<div className="flex flex-col md:flex-row justify-between items-start gap-4"> <div className="flex flex-col md:flex-row justify-between items-start gap-4">
{/* Logo */} {/* Logo */}
<div className="flex flex-col items-center space-x-4"> <div className="flex flex-col items-center space-x-4">
<Image src="/assets/polda/logo-kontak.png" alt="" width={400} height={300} className="" /> <Image src="/assets/logo-humas-polri.png" alt="logo" width={1920} height={1080} className="h-[100px] lg:h-[200px] w-[100px] lg:w-[200px]" />
<p className="text-[#bb3523] font-bold">Copyright @TribrataNews Kaltara</p> {/* <p className="text-[#bb3523] font-bold">Copyright @TribrataNews Kaltara</p> */}
</div> </div>
{/* Contact Us */} {/* Contact Us */}
@ -100,6 +155,14 @@ const ContactUsKaltara = () => {
Index Index
</Link> </Link>
</div> </div>
{/* login */}
<Link href="/auth">
<Button className="flex justify-center items-center bg-[#c03724] rounded-full gap-3 p-2 w-fit h-fit mt-4">
<Icon icon="material-symbols:lock" className="text-white" />
<p className="text-white">Kontributor Wilayah</p>
</Button>
</Link>
</div> </div>
{/* Social Media */} {/* Social Media */}

8
components/landing-page/landing-polda-kaltara/header-banner-kaltara.tsx
View File

@ -3,7 +3,7 @@ import { listData } from "@/service/landing/landing";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
import { formatDateToIndonesian, getPublicLocaleTimestamp, textEllipsis } from "@/utils/globals"; import { formatDateToIndonesian, getPublicLocaleTimestamp } from "@/utils/globals";
import { Icon } from "@iconify/react/dist/iconify.js"; import { Icon } from "@iconify/react/dist/iconify.js";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"; import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import Image from "next/image"; import Image from "next/image";
@ -75,7 +75,7 @@ const HeaderBannerKaltara = () => {
<> <>
<Reveal> <Reveal>
{/* Header Left */} {/* Header Left */}
<div className="flex flex-col lg:flex-row items-start justify-center gap-[25px] px-4 lg:px-0 py-4 w-auto mt-6"> <div className="flex flex-col lg:flex-row items-start justify-center gap-[25px] px-4 lg:px-18 py-4 w-auto mt-6">
{isBannerLoading ? ( {isBannerLoading ? (
<div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3"> <div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
<Skeleton className="h-[310px] lg:h-[420px] rounded-xl" /> <Skeleton className="h-[310px] lg:h-[420px] rounded-xl" />
@ -152,7 +152,7 @@ const HeaderBannerKaltara = () => {
</div> </div>
</> </>
) : ( ) : (
<ul className="py-4 lg:py-0 flex flex-row lg:flex-col gap-[20px] flex-nowrap w-[95vw] lg:w-auto overflow-x-auto"> <ul className="py-4 lg:py-0 flex flex-row lg:flex-col gap-[15px] flex-nowrap w-[95vw] lg:w-[380px] overflow-x-auto">
{content?.map((item: any) => ( {content?.map((item: any) => (
<li key={item?.id} className="flex gap-4 flex-row lg:w-full bg-[#f8f8f8] p-[10px] rounded-lg"> <li key={item?.id} className="flex gap-4 flex-row lg:w-full bg-[#f8f8f8] p-[10px] rounded-lg">
<div className="flex-shrink-0 w-24 rounded-lg"> <div className="flex-shrink-0 w-24 rounded-lg">
@ -161,7 +161,7 @@ const HeaderBannerKaltara = () => {
<div className="w-[280px] lg:w-auto"> <div className="w-[280px] lg:w-auto">
<span className="text-[#bb3523] border border-[#bb3523] bg-white px-4 py-1 rounded-lg flex text-[8px] font-sans font-semibold uppercase w-fit">{item?.categoryName}</span> <span className="text-[#bb3523] border border-[#bb3523] bg-white px-4 py-1 rounded-lg flex text-[8px] font-sans font-semibold uppercase w-fit">{item?.categoryName}</span>
<div onClick={() => router.push(prefixPath + `/image/detail/${item?.slug}`)} className="cursor-pointer"> <div onClick={() => router.push(prefixPath + `/image/detail/${item?.slug}`)} className="cursor-pointer">
<h3 className="text-base font-sans font-bold mt-2">{textEllipsis(item?.title, 30)}</h3> <h3 className="text-[12px] font-sans font-bold mt-2">{item?.title}</h3>
</div> </div>
<p className="text-[10px] flex flex-row items-center font-sans gap-1 text-gray-500 mt-1"> <p className="text-[10px] flex flex-row items-center font-sans gap-1 text-gray-500 mt-1">
{formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"} |{" "} {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"} |{" "}

150
components/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx
View File

@ -6,7 +6,7 @@ import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious
import Image from "next/image"; import Image from "next/image";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { formatDateToIndonesian, secondToTimes } from "@/utils/globals"; import { formatDateToIndonesian, secondToTimes } from "@/utils/globals";
import { useParams } from "next/navigation"; import { useParams, usePathname } from "next/navigation";
import { listData } from "@/service/landing/landing"; import { listData } from "@/service/landing/landing";
import { useRouter } from "@/i18n/routing"; import { useRouter } from "@/i18n/routing";
import { Icon } from "@iconify/react/dist/iconify.js"; import { Icon } from "@iconify/react/dist/iconify.js";
@ -23,6 +23,7 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
const [isBannerLoading, setIsBannerLoading] = useState(true); const [isBannerLoading, setIsBannerLoading] = useState(true);
const [centerPadding, setCenterPadding] = useState<any>(); const [centerPadding, setCenterPadding] = useState<any>();
const router = useRouter(); const router = useRouter();
const pathname = usePathname();
const t = useTranslations("LandingPage"); const t = useTranslations("LandingPage");
let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/"; let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/";
@ -73,9 +74,22 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
return ( return (
<> <>
<Reveal> <Reveal>
<div className="px-4 lg:px-20 my-10"> <div className="px-4 lg:px-24 my-10">
<div className="bg-[#c03724] rounded-md p-3 w-fit text-white">Berita {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"}</div> {/* <div className="bg-[#c03724] rounded-md p-3 w-fit text-white">Berita {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"}</div> */}
<div className="mx-auto w-full justify-center flex px-5 flex-col lg:flex-row gap-5 mb-4"> <div className="w-full justify-start flex flex-col lg:flex-row gap-20 mb-4">
<h2 className="flex items-center text-xl lg:text-2xl w-fit font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white">
{pathname?.split("/")[1] == "in" ? (
<>
<span className="text-black ">{t("content")}</span>&nbsp;
{props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"}
</>
) : (
<>
<span className="text-black ">{props.type == "popular" ? "Popular" : props.type == "latest" ? t("new") : "Serupa"}</span>&nbsp;
{t("content")}
</>
)}
</h2>
<Tabs value={selectedTab} onValueChange={setSelectedTab}> <Tabs value={selectedTab} onValueChange={setSelectedTab}>
<TabsList className="grid grid-cols-2 lg:flex lg:flex-row"> <TabsList className="grid grid-cols-2 lg:flex lg:flex-row">
<TabsTrigger <TabsTrigger
@ -130,46 +144,11 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
<div className=""> <div className="">
{selectedTab == "image" ? ( {selectedTab == "image" ? (
content?.length > 0 ? ( content?.length > 0 ? (
// <Carousel className=""> <Carousel className="w-full mx-auto">
// <CarouselContent>
// {content?.map((image: any) => (
// <CarouselItem key={image?.id} className="basis-1/2 md:basis-1/3 lg:basis-1/4">
// <div onClick={() => router.push(prefixPath + `/video/detail/${image?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden">
// {/* Gambar */}
// <Image
// placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
// alt="image"
// width={2560}
// height={1440}
// src={image?.thumbnailLink}
// className="w-full lg:w-[390px] h-48 md:h-56 lg:h-[490px] object-cover rounded-md"
// />
// {/* Kategori - Sekarang Berada di Atas */}
// <span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{image?.categoryName}</span>
// {/* Overlay Konten (Informasi di Bawah) */}
// <div className="absolute bottom-0 left-0 right-0 p-4 bg-transparent rounded-md">
// {/* Judul */}
// <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{image?.title}</p>
// {/* Info Tambahan */}
// {/* <p className="flex items-center text-xs md:text-sm text-white mt-1 gap-2">
// {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}
// </p> */}
// </div>
// </div>
// </CarouselItem>
// ))}
// </CarouselContent>
// {/* <CarouselPrevious className="hover:bg-black" />
// <CarouselNext className="hover:bg-black -mr-6" /> */}
// </Carousel>
<Carousel className="">
<CarouselContent> <CarouselContent>
{content?.map((image: any) => ( {content?.map((image: any) => (
<CarouselItem key={image?.id} className="md:basis-1/3 lg:basis-1/4"> <CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/4">
<div onClick={() => router.push(prefixPath + `/image/detail/${image?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden"> <div onClick={() => router.push(prefixPath + `/image/detail/${image?.slug}`)} className="cursor-pointer relative group overflow-hidden shadow-md hover:shadow-lg">
{/* Gambar */} {/* Gambar */}
<Image <Image
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
@ -177,23 +156,24 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
width={2560} width={2560}
height={1440} height={1440}
src={image?.thumbnailLink} src={image?.thumbnailLink}
className="w-full lg:w-[400px] h-48 md:h-56 lg:h-[490px] object-cover rounded-md" className="w-full rounded-lg h-48 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300"
/> />
{/* Overlay gelap */} {/* Overlay gelap */}
<div className="absolute inset-0 bg-black bg-opacity-30 rounded-md"></div> <div className="absolute inset-0 bg-black bg-opacity-30 rounded-md"></div>
{/* Kategori */} <div className="absolute bottom-2 left-2 right-2 bg-gray-500/55 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
<span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{image?.categoryName}</span> <p className="text-sm lg:text-base mb-2 font-semibold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{image?.title}</p>
<p className="flex flex-row items-center text-[10px] gap-2">
{/* Konten Informasi */} {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {image.clickCount}{" "}
<div className="absolute bottom-0 left-0 right-0 p-4 z-10"> </p>
<p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{image?.title}</p>
</div> </div>
</div> </div>
</CarouselItem> </CarouselItem>
))} ))}
</CarouselContent> </CarouselContent>
<CarouselPrevious className="-ml-0 lg:-ml-7" />
<CarouselNext className="-mr-0 lg:-mr-7" />
</Carousel> </Carousel>
) : ( ) : (
<p className="flex items-center justify-center"> <p className="flex items-center justify-center">
@ -202,10 +182,10 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
) )
) : selectedTab == "audio" ? ( ) : selectedTab == "audio" ? (
content?.length > 0 ? ( content?.length > 0 ? (
<Carousel className="w-full max-w-7xl mx-auto"> <Carousel className="w-full mx-auto">
<CarouselContent> <CarouselContent>
{content?.map((audio: any) => ( {content?.map((audio: any) => (
<CarouselItem key={audio?.id} className="md:basis-1/2 lg:basis-1/3"> <CarouselItem key={audio?.id} className="md:basis-1/2 lg:basis-1/4">
<div className="flex flex-row gap-6"> <div className="flex flex-row gap-6">
<div onClick={() => 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"> <div onClick={() => 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">
<div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-24 h-8 lg:h-16"> <div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-24 h-8 lg:h-16">
@ -230,8 +210,8 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
</CarouselItem> </CarouselItem>
))} ))}
</CarouselContent> </CarouselContent>
{/* <CarouselPrevious /> <CarouselPrevious />
<CarouselNext /> */} <CarouselNext />
</Carousel> </Carousel>
) : ( ) : (
<p className="flex items-center justify-center"> <p className="flex items-center justify-center">
@ -240,46 +220,11 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
) )
) : selectedTab == "video" ? ( ) : selectedTab == "video" ? (
content?.length > 0 ? ( content?.length > 0 ? (
// <Carousel className=""> <Carousel className="w-full mx-auto">
// <CarouselContent>
// {content?.map((video: any) => (
// <CarouselItem key={video?.id} className=" md:basis-1/3 lg:basis-1/4">
// <div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-lg overflow-hidden">
// {/* Gambar */}
// <Image
// placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
// alt="video"
// width={2560}
// height={1440}
// src={video?.thumbnailLink}
// className="w-full lg:w-[315px] h-48 md:h-56 lg:h-[490px] object-cover rounded-lg transition-transform duration-300"
// />
// {/* Kategori - Sekarang Berada di Atas */}
// <span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{video?.categoryName}</span>
// {/* Overlay Konten (Informasi di Bawah) */}
// <div className="absolute bottom-0 left-0 right-0 p-4 bg-transparent rounded-lg">
// {/* Judul */}
// <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{video?.title}</p>
// {/* Info Tambahan */}
// {/* <p className="flex items-center text-xs md:text-sm text-white mt-1 gap-2">
// {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}
// </p> */}
// </div>
// </div>
// </CarouselItem>
// ))}
// </CarouselContent>
// {/* <CarouselPrevious className="hover:bg-black" />
// <CarouselNext className="hover:bg-black -mr-6" /> */}
// </Carousel>
<Carousel className="">
<CarouselContent> <CarouselContent>
{content?.map((video: any) => ( {content?.map((video: any) => (
<CarouselItem key={video?.id} className="md:basis-1/3 lg:basis-1/4"> <CarouselItem key={video?.id} className="md:basis-1/2 lg:basis-1/4">
<div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden"> <div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group overflow-hidden shadow-md hover:shadow-lg">
{/* Gambar */} {/* Gambar */}
<Image <Image
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
@ -287,23 +232,24 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
width={2560} width={2560}
height={1440} height={1440}
src={video?.thumbnailLink} src={video?.thumbnailLink}
className="w-full lg:w-[400px] h-48 md:h-56 lg:h-[490px] object-cover rounded-md" className="w-full rounded-lg h-48 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300"
/> />
{/* Overlay Gelap */} {/* Overlay Gelap */}
<div className="absolute inset-0 bg-black bg-opacity-30 rounded-lg"></div> <div className="absolute inset-0 bg-black bg-opacity-30 rounded-lg"></div>
{/* Kategori */} <div className="absolute bottom-2 left-2 right-2 bg-gray-500/55 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
<span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{video?.categoryName}</span> <p className="text-sm lg:text-base mb-2 font-semibold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{video?.title}</p>
<p className="flex flex-row items-center text-[10px] gap-2">
{/* Overlay Konten (Judul) */} {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video.clickCount}{" "}
<div className="absolute bottom-0 left-0 right-0 p-4 z-10"> </p>
<p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2 line-clamp-2">{video?.title}</p>
</div> </div>
</div> </div>
</CarouselItem> </CarouselItem>
))} ))}
</CarouselContent> </CarouselContent>
<CarouselPrevious className="-ml-0 lg:-ml-7" />
<CarouselNext className="-mr-0 lg:-mr-7" />
</Carousel> </Carousel>
) : ( ) : (
<p className="flex items-center justify-center"> <p className="flex items-center justify-center">
@ -311,10 +257,10 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
</p> </p>
) )
) : content.length > 0 ? ( ) : content.length > 0 ? (
<Carousel className="w-full max-w-7xl mx-auto"> <Carousel className="w-full mx-auto">
<CarouselContent> <CarouselContent>
{content?.map((text: any) => ( {content?.map((text: any) => (
<CarouselItem key={text?.id} className="md:basis-1/2 lg:basis-1/3"> <CarouselItem key={text?.id} className="md:basis-1/2 lg:basis-1/4">
<div className="md:basis-1/2 lg:basis-1/3"> <div className="md:basis-1/2 lg:basis-1/3">
<div onClick={() => 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"> <div onClick={() => 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">
<div className="flex items-center justify-center rounded-lg w-16 h-2 lg:h-16"> <div className="flex items-center justify-center rounded-lg w-16 h-2 lg:h-16">
@ -346,8 +292,8 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
</CarouselItem> </CarouselItem>
))} ))}
</CarouselContent> </CarouselContent>
{/* <CarouselPrevious /> <CarouselPrevious />
<CarouselNext /> */} <CarouselNext />
</Carousel> </Carousel>
) : ( ) : (
<p className="flex items-center justify-center"> <p className="flex items-center justify-center">

22
components/landing-page/landing-polda-kaltara/navbar-polda-kaltara.tsx
View File

@ -136,8 +136,8 @@ const NavbarKaltara = () => {
</button> </button>
<div className="hidden lg:flex items-center gap-5"> <div className="hidden lg:flex items-center gap-5">
<Link href="/tbnews/polda-kaltara" className="text-white"> <Link href="/tbnews/polda-kaltara">
TBNews <Image src="/assets/polda/logo-tbnews.png" alt="logo" width={1920} height={1080} className="w-[110px] h-[50px]" />
</Link> </Link>
<div className="flex items-center"> <div className="flex items-center">
@ -174,14 +174,6 @@ const NavbarKaltara = () => {
{/* Dark Mode */} {/* Dark Mode */}
<ThemeSwitcher /> <ThemeSwitcher />
{/* login */}
<Link href="/auth">
<Button className="hidden lg:flex justify-center items-center bg-white rounded-full gap-3 p-2 w-fit h-fit">
<Icon icon="material-symbols:lock" className="text-[#c03724]" />
<p className="text-[#c03724]">Login</p>
</Button>
</Link>
</div> </div>
</div> </div>
@ -278,7 +270,7 @@ const NavbarKaltara = () => {
<div className="flex lg:hidden flex-col items-center gap-1"> <div className="flex lg:hidden flex-col items-center gap-1">
<div className="flex flex-row justify-between items-center gap-2"> <div className="flex flex-row justify-between items-center gap-2">
<Link href="/tbnews/polda-kaltara" className="text-white"> <Link href="/tbnews/polda-kaltara" className="text-white">
TBNews <Image src="/assets/polda/logo-tbnews.png" alt="logo" width={1920} height={1080} className="w-[100px] h-[40px]" />
</Link> </Link>
<div className="flex items-center"> <div className="flex items-center">
@ -317,14 +309,6 @@ const NavbarKaltara = () => {
{/* Dark Mode */} {/* Dark Mode */}
<ThemeSwitcher /> <ThemeSwitcher />
{/* login */}
<Link href="/auth">
<Button className="hidden lg:flex justify-center items-center bg-white rounded-full gap-3 p-2 w-fit h-fit">
<Icon icon="material-symbols:lock" className="text-[#c03724]" />
<p className="text-[#c03724]">Login</p>
</Button>
</Link>
</div> </div>
</div> </div>
</div> </div>

8
components/landing-page/search-section.tsx
View File

@ -1,8 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
import { Icon } from "@iconify/react/dist/iconify.js"; import { Icon } from "@iconify/react/dist/iconify.js";
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useRouter } from "@/i18n/routing"; import { useRouter } from "@/i18n/routing";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
@ -13,8 +11,8 @@ const SearchSection = () => {
const t = useTranslations("LandingPage"); const t = useTranslations("LandingPage");
return ( return (
<section className="w-full py-8 px-4 "> <section className="w-full py-8 px-4 lg:px-24">
<div className="max-w-screen-xl mx-auto text-center"> <div className="text-center">
{/* Heading */} {/* Heading */}
<h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white"> <h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
<span className="text-[#bb3523] dark:text-white">{t("exploration")}</span> {t("and")} <span className="text-[#bb3523] dark:text-white">{t("download")}</span> {t("coverage")}{" "} <span className="text-[#bb3523] dark:text-white">{t("exploration")}</span> {t("and")} <span className="text-[#bb3523] dark:text-white">{t("download")}</span> {t("coverage")}{" "}

BIN
public/assets/logo-humas-polri.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
public/assets/logo-inp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
public/assets/logo-spit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
public/assets/polda/logo-tbnews.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
public/assets/portal-humas.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

19
utils/globals.tsx
View File

@ -1,5 +1,8 @@
"use client";
import { format } from "date-fns"; import { format } from "date-fns";
import { id, tr } from "date-fns/locale"; import { id, tr } from "date-fns/locale";
import { useEffect } from "react";
export const generateLocalizedPath = (href: string, locale: string): string => { export const generateLocalizedPath = (href: string, locale: string): string => {
if (href.startsWith(`/${locale}`)) { if (href.startsWith(`/${locale}`)) {
@ -153,3 +156,19 @@ export const shimmer = (w: number, h: number) => `
</svg>`; </svg>`;
export const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str)); export const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
const LoadScript = () => {
useEffect(() => {
const script = document.createElement("script");
script.src = "https://cdn.userway.org/widget.js";
script.setAttribute("data-account", "X36s1DpjqB");
script.async = true;
document.head.appendChild(script);
return () => {
// Cleanup if needed
document.head.removeChild(script);
};
}, []);
return null; // Tidak perlu merender apa-apa
};
export default LoadScript;