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

Merge branch 'dev-sabda' of https://gitlab.com/hanifsalafi/mediahub_redesign

This commit is contained in:
hanif salafi 2025-03-10 11:07:49 +07:00
parent 9cb44631a6 976661c963
commit 5604d9f09d
34 changed files with 1463 additions and 1048 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/contact-us.tsx → app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/contact-us.tsx
View File

171
app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx Normal file
View File

@ -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<any>();
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 (
<>
<Reveal>
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-10 py-4 w-auto mt-36">
{isBannerLoading ? (
<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" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
) : (
<div className="w-full lg:w-2/3 lg:h-full">
{content?.map((row: any) => (
<div className="flex flex-col gap-3" key={row?.id}>
<Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[950px] h-[310px] lg:h-[420px] rounded-sm object-cover" /> <h1 className="font-bold text-xl">{row.title}</h1>
<div className="flex flex-row gap-3">
<p className="text-[#c03724] text-sm">{row?.categoryName}</p>
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
{getPublicLocaleTimestamp(new Date(row?.createdAt))} WIB {" | "}
<Icon icon="formkit:eye" width="15" height="15" /> {row?.clickCount}
</p>
</div>
<p className="text-light text-justify hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{row?.description}</p>
</div>
))}
</div>
)}
{isBannerLoading ? (
<div className="flex flex-col">
<div className="flex items-center gap-4 max-w-sm mx-auto mb-3">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="items-center hidden md:block gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
</div>
) : (
<div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
{content?.map((item: any) => (
<div className="flex gap-3 flex-col lg:w-full">
<div className="flex-shrink-0 rounded-lg">
<Image width={720} height={480} src={item?.thumbnailLink} alt="" className="w-full h-[105px] object-cover rounded-sm" />
</div>
<div className="w-[280px] lg:w-auto flex flex-col">
<h3 className="font-bold text-lg">{item?.title}</h3>
<div className="flex flex-row gap-5">
<p className="text-[#c03724] text-sm">{item?.categoryName}</p>
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
{formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "}
{item?.clickCount}{" "}
</p>
</div>
</div>
</div>
))}
</div>
)}
</div>
</Reveal>
</>
);
};
export default HeroKaltara;

189
app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/latest-news.tsx Normal file
View File

@ -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<any>(true);
const params = useParams();
const [content, setContent] = useState<any>([]);
const [centerPadding, setCenterPadding] = useState<any>();
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 (
<>
<Reveal>
<div className="my-5 px-4 lg:px-28 gap-3">
<div className="bg-[#c03724] rounded-md p-3 w-fit">
<p className="text-white font-semibold">Berita {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"}</p>
</div>
</div>
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-11 w-auto">
{isLoading ? (
<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" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
) : (
<div className="w-full lg:w-2/3 lg:h-full">
{content?.map((row: any) => (
<div className="flex flex-col gap-3" key={row?.id}>
<Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[950px] h-[310px] lg:h-[420px] rounded-sm object-cover" /> <h1 className="font-bold text-xl">{row?.title}</h1>
<div className="flex flex-row gap-3">
<p className="text-[#c03724] text-xs">{row?.categoryName}</p>
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
{formatDateToIndonesian(new Date(row?.createdAt))} {row?.timezone ? row?.timezone : "WIB"}|{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "}
{row?.clickCount}{" "}
</p>
</div>
<p className="text-light text-justify hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{row?.description}</p>
</div>
))}
</div>
)}
{isLoading ? (
<div className="flex flex-col">
<div className="flex items-center gap-4 max-w-sm mx-auto mb-3">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="items-center hidden md:block gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
</div>
) : (
<div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
{content?.map((item: any) => (
<div className="flex gap-3 flex-col lg:w-full">
{/* <div className="flex-shrink-0 rounded-lg">
<Image width={720} height={480} src={item?.thumbnailLink} alt="" className="w-full h-[105px] object-cover rounded-sm" />
</div> */}
<div className="w-[280px] lg:w-auto flex flex-col">
<h3 className="font-bold text-lg">{item?.title}</h3>
<div className="flex flex-row gap-5">
<p className="text-[#c03724] text-sm">{item?.categoryName}</p>
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
{formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "}
{item?.clickCount}{" "}
</p>
</div>
</div>
</div>
))}
</div>
)}
</div>
</Reveal>
</>
);
};
export default LatestNews;

186
app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/national-news.tsx Normal file
View File

@ -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<any>(true);
const params = useParams();
const poldaName: any = params?.polda_name;
const [content, setContent] = useState([]);
const [centerPadding, setCenterPadding] = useState<any>();
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 (
<>
<Reveal>
<div className="my-5 px-4 lg:px-28 gap-3">
<div className="bg-[#c03724] rounded-md p-3 w-fit">
<p className="text-white font-semibold">Berita Nasional</p>
</div>
</div>
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-11 w-auto">
{isLoading ? (
<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" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
) : (
<div className="w-full lg:w-2/3 lg:h-full">
{content?.map((row: any) => (
<div className="flex flex-col gap-3">
<Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[950px] h-[310px] lg:h-[420px] rounded-sm object-cover" /> <h1 className="font-bold text-xl">{row?.title}</h1>
<div className="flex flex-row gap-3">
<p className="text-[#c03724] text-xs">{row?.categoryName}</p>
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
{formatDateToIndonesian(new Date(row?.createdAt))} {row?.timezone ? row?.timezone : "WIB"}|{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "}
{row?.clickCount}{" "}
</p>
</div>
<p className="text-light text-justify hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{row?.description}</p>
</div>
))}
</div>
)}
{isLoading ? (
<div className="flex flex-col">
<div className="flex items-center gap-4 max-w-sm mx-auto mb-3">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="items-center hidden md:block gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
</div>
) : (
<div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
{content?.map((item: any) => (
<div className="flex gap-3 flex-col lg:w-full">
{/* <div className="flex-shrink-0 rounded-lg">
<Image width={720} height={480} src={item?.thumbnailLink} alt="" className="w-full h-[105px] object-cover rounded-sm" />
</div> */}
<div className="w-[280px] lg:w-auto flex flex-col">
<h3 className="font-bold text-lg">{item?.title}</h3>
<div className="flex flex-row gap-5">
<p className="text-[#c03724] text-sm">{item?.categoryName}</p>
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
{formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "}
{item?.clickCount}{" "}
</p>
</div>
</div>
</div>
))}
</div>
)}
</div>
</Reveal>
</>
);
};
export default NationalNews;

34
app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/navbar-kaltara.tsx → app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx
View File

@ -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 = () => {
</Link>
))}
</div>
<Button className="hidden lg:flex justify-center items-center bg-white rounded-full gap-3 ml-7 p-2 w-fit h-fit">
<Icon icon="material-symbols:lock" className="text-[#c03724]" />
<p className="text-[#c03724]">Login</p>
</Button>
<Link href="/auth">
<Button className="hidden lg:flex justify-center items-center bg-white rounded-full gap-3 ml-7 p-2 w-fit h-fit">
<Icon icon="material-symbols:lock" className="text-[#c03724]" />
<p className="text-[#c03724]">Login</p>
</Button>
</Link>
</div>
{/* Mobile Menu Toggle */}
@ -80,7 +82,7 @@ const NavbarKaltara = () => {
{/* Mobile Menu */}
{menuOpen && (
<div className="lg:hidden absolute bg-[#c03724] dark:bg-slate-600 px-4 py-3 space-y-3 z-50 top-36 items-center w-[300px]">
<div className="lg:hidden absolute bg-[#c03724] dark:bg-slate-600 px-4 py-3 space-y-3 z-50 left-[142px] top-[142px] items-center w-[300px]">
<div className="text-white font-semibold gap-5 items-center grid grid-cols-2">
{category?.map((data: any) => (
<Link key={data?.id} href={categoryLinks[data?.name] || "#"}>
@ -88,10 +90,12 @@ const NavbarKaltara = () => {
</Link>
))}
</div>
<Button className="flex justify-center items-center bg-white rounded-full gap-3 ml-7 p-2 w-fit h-fit">
<Icon icon="material-symbols:lock" className="text-[#c03724]" />
<p className="text-[#c03724]">Login</p>
</Button>
<Link href="/auth">
<Button className="flex justify-center items-center bg-white rounded-full gap-3 ml-0 p-2 w-full h-fit">
<Icon icon="material-symbols:lock" className="text-[#c03724]" />
<p className="text-[#c03724]">Login</p>
</Button>
</Link>
</div>
)}
</div>

18
app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/news-tickers-kaltara.tsx → app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/news-tickers-kaltara.tsx
View File

@ -60,25 +60,25 @@ export default function NewsTickerKaltara() {
return (
<div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between dark:bg-stone-800 bg-[#bb3523]">
<div className="relative px-4 py-2 text-xs lg:text-sm flex items-center bg-[#bb3523] text-white w-[30%] lg:w-[300px]">
<span className="mr-2"></span> {tanggal}
<div className="relative px-2 lg:px-4 py-2 text-[10px] lg:text-sm flex justify-between items-center bg-[#bb3523] text-white w-[50%] lg:w-[300px]">
<span className="mr-0 lg:mr-2 w-full font-bold">{tanggal}</span>
<div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clip-path-triangle"></div>
</div>
<div className="text-sm lg:text-base w-full lg:w-[200px] text-white font-semibold ml-5 flex items-center">{t("breakingNews")} :</div>
<div className={`w-full px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"}`}>
<div className="text-[13px] lg:text-base w-full lg:w-[200px] text-white font-semibold ml-2 lg:ml-5 flex items-center">{t("breakingNews")} :</div>
<div className={`w-full px-2 lg:px-5 py-1 flex flex-col lg:flex-row items-center gap-1 transition-transform duration-300 ${animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"}`}>
<Link href={`news/detail/${article[currentNewsIndex]?.id}`} className="hidden lg:block">
<p className="text-sm text-white lg:text-base">{article[currentNewsIndex]?.title}</p>
<p className="text-[11px] text-white lg:text-base">{article[currentNewsIndex]?.title}</p>
</Link>
<Link href={`news/detail/${article[currentNewsIndex]?.id}`} className="lg:hidden">
<p className="text-sm text-white lg:text-base">{textEllipsis(article[currentNewsIndex]?.title, 28)}</p>
<p className="text-[11px] text-white lg:text-base">{textEllipsis(article[currentNewsIndex]?.title, 28)}</p>
</Link>
<p className="text-xs">{formatDateToIndonesian(article[currentNewsIndex]?.createdAt)}</p>
<p className="text-[8px] lg:text-xs text-white">{formatDateToIndonesian(article[currentNewsIndex]?.createdAt)}</p>
</div>
<div className="flex flex-row text-white h-full gap-[1px]">
<a className="bg-[#bb3523] h-full flex items-center" onClick={() => handlePrev()}>
<a className="bg-[#bb3523] h-full flex items-center cursor-pointer" onClick={() => handlePrev()}>
<Icon icon="ic:twotone-arrow-left" fontSize={30} />
</a>
<a className="bg-[#bb3523] h-full flex items-center" onClick={() => handleNext()}>
<a className="bg-[#bb3523] h-full flex items-center cursor-pointer" onClick={() => handleNext()}>
<Icon icon="ic:twotone-arrow-right" fontSize={30} />
</a>
</div>

0
app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/popular-news.tsx → app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/popular-news.tsx
View File

188
app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx Normal file
View File

@ -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<any>(true);
const params = useParams();
const locale = params?.locale;
const [heroData, setHeroData] = useState<any>();
const poldaName: any = params?.polda_name;
const [content, setContent] = useState([]);
const [centerPadding, setCenterPadding] = useState<any>();
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 (
<>
<Reveal>
<div className="my-5 px-4 lg:px-28 gap-3">
<div className="bg-[#c03724] rounded-md p-3 w-fit">
<p className="text-white font-semibold">Berita Wilayah</p>
</div>
</div>
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-11 w-auto">
{isLoading ? (
<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" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
) : (
<div className="w-full lg:w-2/3 lg:h-full">
{content?.map((row: any) => (
<div className="flex flex-col gap-3">
<Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[950px] h-[310px] lg:h-[420px] rounded-sm object-cover" /> <h1 className="font-bold text-xl">{row?.title}</h1>
<div className="flex flex-row gap-3">
<p className="text-[#c03724] text-xs">{row?.categoryName}</p>
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
{formatDateToIndonesian(new Date(row?.createdAt))} {row?.timezone ? row?.timezone : "WIB"}|{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "}
{row?.clickCount}{" "}
</p>
</div>
<p className="text-light text-justify hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{row?.description}</p>
</div>
))}
</div>
)}
{isLoading ? (
<div className="flex flex-col">
<div className="flex items-center gap-4 max-w-sm mx-auto mb-3">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="items-center hidden md:block gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
</div>
) : (
<div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
{content?.map((item: any) => (
<div className="flex gap-3 flex-col lg:w-full">
{/* <div className="flex-shrink-0 rounded-lg">
<Image width={720} height={480} src={item?.thumbnailLink} alt="" className="w-full h-[105px] object-cover rounded-sm" />
</div> */}
<div className="w-[280px] lg:w-auto flex flex-col">
<h3 className="font-bold text-lg">{item?.title}</h3>
<div className="flex flex-row gap-5">
<p className="text-[#c03724] text-sm">{item?.categoryName}</p>
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
{formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "}
{item?.clickCount}{" "}
</p>
</div>
</div>
</div>
))}
</div>
)}
</div>
</Reveal>
</>
);
};
export default RegionalNews;

224
app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx Normal file
View File

@ -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 (
<>
<Reveal>
<div className="px-4 lg:px-28 mt-5">
<div className="bg-[#c03724] rounded-md p-3 w-fit text-white">Media Sosial</div>
<div className="mx-auto w-full max-w-7xl justify-center flex px-5 flex-col lg:flex-row gap-5 mb-4">
<Tabs value={selectedTab} onValueChange={setSelectedTab}>
<TabsList className="grid grid-cols-2 lg:flex lg:flex-row ">
<TabsTrigger
value="x"
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
>
X{" "}
</TabsTrigger>
<div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
<TabsTrigger
value="instagram"
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
>
Instagram
</TabsTrigger>
<div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
<TabsTrigger
value="facebook"
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
>
Facebook
</TabsTrigger>
<div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
<TabsTrigger
value="tiktok"
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
>
Tiktok
</TabsTrigger>
<div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
<TabsTrigger
value="youtube"
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
>
Youtube
</TabsTrigger>
</TabsList>
</Tabs>
</div>
<div className="flex flex-col lg:flex-row px-0 lg:px-10">
{selectedTab == "x" ? (
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
</div>
<div className="flex flex-col">
<div className="flex flex-row gap-2">
<p className="font-bold">Humas_PoldaKaltara</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">@HumasKaltara</p>
</div>
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">
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!
</p>
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
</div>
</div>
</div>
) : selectedTab == "instagram" ? (
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
</div>
<div className="flex flex-col">
<div className="flex flex-row gap-2">
<p className="font-bold">TBNews Mabes Polri</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">@TBNewsMabes</p>
</div>
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">
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!
</p>
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
</div>
</div>
</div>
) : selectedTab == "facebook" ? (
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
</div>
<div className="flex flex-col">
<div className="flex flex-row gap-2">
<p className="font-bold">TBNews Mabes Polri</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">@TBNewsMabes</p>
</div>
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">
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!
</p>
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
</div>
</div>
</div>
) : selectedTab == "tiktok" ? (
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
</div>
<div className="flex flex-col">
<div className="flex flex-row gap-2">
<p className="font-bold">TBNews Mabes Polri</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">@TBNewsMabes</p>
</div>
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">
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!
</p>
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
</div>
</div>
</div>
) : selectedTab == "youtube" ? (
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
</div>
<div className="flex flex-col">
<div className="flex flex-row gap-2">
<p className="font-bold">TBNews Mabes Polri</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">@TBNewsMabes</p>
</div>
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">
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!
</p>
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
</div>
</div>
</div>
) : (
<p className="flex items-center justify-center">
<Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
</p>
)}
</div>
<div className="flex items-center flex-row justify-center">
<Link href="#" className="border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523]">
Lihat Semua
</Link>
</div>
</div>
</Reveal>
</>
);
};
export default SocialMedia;

5
app/[locale]/(public)/(polda)/tbnews/polda-kaltara/page.tsx → app/[locale]/(public)/(polda)/tbnews/[polda_name]/page.tsx
View File

@ -16,8 +16,9 @@ const PoldaKaltara = () => {
<div>
<NavbarKaltara />
<HeroKaltara />
<LatestNews />
<PopularNews />
<LatestNews type="latest" />
<LatestNews type="popular" />
{/* <PopularNews /> */}
<SocialMedia />
<NationalNews />
<RegionalNews />

161
app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/hero-kaltara.tsx
View File

@ -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<any>(true);
const params = useParams();
const locale = params?.locale;
const [heroData, setHeroData] = useState<any>();
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 (
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-10 py-4 w-auto mt-36">
{isLoading ? (
<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" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
) : (
<div className="w-full lg:w-2/3 lg:h-full">
{heroData?.length > 0 && (
<div className="flex flex-col gap-3">
<Image src={heroData[0]?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[950px] h-[310px] lg:h-[420px] rounded-sm object-cover" />{" "}
<h1 className="font-bold text-xl">{heroData[0]?.title}</h1>
<div className="flex flex-row gap-3">
<p className="text-[#c03724] text-sm">{heroData[0]?.categoryName}</p>
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
{formatDateToIndonesian(new Date(heroData[0]?.createdAt))} {heroData[0]?.timezone ? heroData[0]?.timezone : "WIB"}|{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "}
{heroData[0]?.clickCount}{" "}
</p>
</div>
<p className="text-light text-justify hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
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.
</p>
</div>
)}
</div>
)}
{isLoading ? (
<div className="flex flex-col">
<div className="flex items-center gap-4 max-w-sm mx-auto mb-3">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="items-center hidden md:block gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
</div>
) : (
<div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
{heroData?.slice(0, 3).map((item: any) => (
<div className="flex gap-3 flex-col lg:w-full">
<div className="flex-shrink-0 rounded-lg">
<Image width={720} height={480} src={item?.thumbnailLink} alt="" className="w-full h-[105px] object-cover rounded-sm" />
</div>
<div className="w-[280px] lg:w-auto flex flex-col">
<h3 className="font-bold text-lg">{item?.title}</h3>
<div className="flex flex-row gap-5">
<p className="text-[#c03724] text-sm">{item?.categoryName}</p>
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
{formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "}
{item?.clickCount}{" "}
</p>
</div>
</div>
</div>
))}
</div>
)}
</div>
);
};
export default HeroKaltara;

168
app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/latest-news.tsx
View File

@ -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<any>(true);
const params = useParams();
const locale = params?.locale;
const [heroData, setHeroData] = useState<any>();
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 (
<>
<div className="my-5 px-4 lg:px-28 gap-3">
<div className="bg-[#c03724] rounded-md p-3 w-fit">
<p className="text-white font-semibold">Berita Terbaru</p>
</div>
</div>
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-11 w-auto">
{isLoading ? (
<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" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
) : (
<div className="w-full lg:w-2/3 lg:h-full">
{heroData?.length > 0 && (
<div className="flex flex-col gap-3">
<Image src={heroData[0]?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[950px] h-[310px] lg:h-[420px] rounded-sm object-cover" />{" "}
<h1 className="font-bold text-xl">{heroData[0]?.title}</h1>
<div className="flex flex-row gap-3">
<p className="text-[#c03724] text-xs">{heroData[0]?.categoryName}</p>
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
{formatDateToIndonesian(new Date(heroData[0]?.createdAt))} {heroData[0]?.timezone ? heroData[0]?.timezone : "WIB"}|{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "}
{heroData[0]?.clickCount}{" "}
</p>
</div>
<p className="text-light text-justify hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
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.
</p>
</div>
)}
</div>
)}
{isLoading ? (
<div className="flex flex-col">
<div className="flex items-center gap-4 max-w-sm mx-auto mb-3">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="items-center hidden md:block gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
</div>
) : (
<div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
{heroData?.map((item: any) => (
<div className="flex gap-3 flex-col lg:w-full">
{/* <div className="flex-shrink-0 rounded-lg">
<Image width={720} height={480} src={item?.thumbnailLink} alt="" className="w-full h-[105px] object-cover rounded-sm" />
</div> */}
<div className="w-[280px] lg:w-auto flex flex-col">
<h3 className="font-bold text-lg">{item?.title}</h3>
<div className="flex flex-row gap-5">
<p className="text-[#c03724] text-sm">{item?.categoryName}</p>
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
{formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "}
{item?.clickCount}{" "}
</p>
</div>
</div>
</div>
))}
</div>
)}
</div>
</>
);
};
export default LatestNews;

168
app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/national-news.tsx
View File

@ -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<any>(true);
const params = useParams();
const locale = params?.locale;
const [heroData, setHeroData] = useState<any>();
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 (
<>
<div className="my-5 px-4 lg:px-28 gap-3">
<div className="bg-[#c03724] rounded-md p-3 w-fit">
<p className="text-white font-semibold">Berita Nasional</p>
</div>
</div>
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-11 w-auto">
{isLoading ? (
<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" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
) : (
<div className="w-full lg:w-2/3 lg:h-full">
{heroData?.length > 0 && (
<div className="flex flex-col gap-3">
<Image src={heroData[0]?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[950px] h-[310px] lg:h-[420px] rounded-sm object-cover" />{" "}
<h1 className="font-bold text-xl">{heroData[0]?.title}</h1>
<div className="flex flex-row gap-3">
<p className="text-[#c03724] text-xs">{heroData[0]?.categoryName}</p>
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
{formatDateToIndonesian(new Date(heroData[0]?.createdAt))} {heroData[0]?.timezone ? heroData[0]?.timezone : "WIB"}|{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "}
{heroData[0]?.clickCount}{" "}
</p>
</div>
<p className="text-light text-justify hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
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.
</p>
</div>
)}
</div>
)}
{isLoading ? (
<div className="flex flex-col">
<div className="flex items-center gap-4 max-w-sm mx-auto mb-3">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="items-center hidden md:block gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
</div>
) : (
<div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
{heroData?.map((item: any) => (
<div className="flex gap-3 flex-col lg:w-full">
{/* <div className="flex-shrink-0 rounded-lg">
<Image width={720} height={480} src={item?.thumbnailLink} alt="" className="w-full h-[105px] object-cover rounded-sm" />
</div> */}
<div className="w-[280px] lg:w-auto flex flex-col">
<h3 className="font-bold text-lg">{item?.title}</h3>
<div className="flex flex-row gap-5">
<p className="text-[#c03724] text-sm">{item?.categoryName}</p>
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
{formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "}
{item?.clickCount}{" "}
</p>
</div>
</div>
</div>
))}
</div>
)}
</div>
</>
);
};
export default NationalNews;

168
app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/regional-news.tsx
View File

@ -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<any>(true);
const params = useParams();
const locale = params?.locale;
const [heroData, setHeroData] = useState<any>();
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 (
<>
<div className="my-5 px-4 lg:px-28 gap-3">
<div className="bg-[#c03724] rounded-md p-3 w-fit">
<p className="text-white font-semibold">Berita Wilayah</p>
</div>
</div>
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-11 w-auto">
{isLoading ? (
<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" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
) : (
<div className="w-full lg:w-2/3 lg:h-full">
{heroData?.length > 0 && (
<div className="flex flex-col gap-3">
<Image src={heroData[0]?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[950px] h-[310px] lg:h-[420px] rounded-sm object-cover" />{" "}
<h1 className="font-bold text-xl">{heroData[0]?.title}</h1>
<div className="flex flex-row gap-3">
<p className="text-[#c03724] text-xs">{heroData[0]?.categoryName}</p>
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
{formatDateToIndonesian(new Date(heroData[0]?.createdAt))} {heroData[0]?.timezone ? heroData[0]?.timezone : "WIB"}|{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "}
{heroData[0]?.clickCount}{" "}
</p>
</div>
<p className="text-light text-justify hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
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.
</p>
</div>
)}
</div>
)}
{isLoading ? (
<div className="flex flex-col">
<div className="flex items-center gap-4 max-w-sm mx-auto mb-3">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="items-center hidden md:block gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
</div>
) : (
<div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
{heroData?.map((item: any) => (
<div className="flex gap-3 flex-col lg:w-full">
{/* <div className="flex-shrink-0 rounded-lg">
<Image width={720} height={480} src={item?.thumbnailLink} alt="" className="w-full h-[105px] object-cover rounded-sm" />
</div> */}
<div className="w-[280px] lg:w-auto flex flex-col">
<h3 className="font-bold text-lg">{item?.title}</h3>
<div className="flex flex-row gap-5">
<p className="text-[#c03724] text-sm">{item?.categoryName}</p>
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
{formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "}
{item?.clickCount}{" "}
</p>
</div>
</div>
</div>
))}
</div>
)}
</div>
</>
);
};
export default RegionalNews;

219
app/[locale]/(public)/(polda)/tbnews/polda-kaltara/components/social-media.tsx
View File

@ -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 (
<div className="px-4 lg:px-28 mt-5">
<div className="bg-[#c03724] rounded-md p-3 w-fit text-white">Media Sosial</div>
<div className="mx-auto w-full max-w-7xl justify-center flex px-5 flex-col lg:flex-row gap-5 mb-4">
<Tabs value={selectedTab} onValueChange={setSelectedTab}>
<TabsList className="grid grid-cols-2 lg:flex lg:flex-row ">
<TabsTrigger
value="x"
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
>
X{" "}
</TabsTrigger>
<div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
<TabsTrigger
value="instagram"
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
>
Instagram
</TabsTrigger>
<div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
<TabsTrigger
value="facebook"
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
>
Facebook
</TabsTrigger>
<div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
<TabsTrigger
value="tiktok"
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
>
Tiktok
</TabsTrigger>
<div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
<TabsTrigger
value="youtube"
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
>
Youtube
</TabsTrigger>
</TabsList>
</Tabs>
</div>
<div className="flex flex-col lg:flex-row px-0 lg:px-10">
{selectedTab == "x" ? (
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
</div>
<div className="flex flex-col">
<div className="flex flex-row gap-2">
<p className="font-bold">Humas_PoldaKaltara</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">@HumasKaltara</p>
</div>
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">
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!
</p>
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
</div>
</div>
</div>
) : selectedTab == "instagram" ? (
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
</div>
<div className="flex flex-col">
<div className="flex flex-row gap-2">
<p className="font-bold">TBNews Mabes Polri</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">@TBNewsMabes</p>
</div>
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">
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!
</p>
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
</div>
</div>
</div>
) : selectedTab == "facebook" ? (
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
</div>
<div className="flex flex-col">
<div className="flex flex-row gap-2">
<p className="font-bold">TBNews Mabes Polri</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">@TBNewsMabes</p>
</div>
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">
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!
</p>
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
</div>
</div>
</div>
) : selectedTab == "tiktok" ? (
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
</div>
<div className="flex flex-col">
<div className="flex flex-row gap-2">
<p className="font-bold">TBNews Mabes Polri</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">@TBNewsMabes</p>
</div>
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">
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!
</p>
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
</div>
</div>
</div>
) : selectedTab == "youtube" ? (
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
</div>
<div className="flex flex-col">
<div className="flex flex-row gap-2">
<p className="font-bold">TBNews Mabes Polri</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">@TBNewsMabes</p>
</div>
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">
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!
</p>
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
</div>
</div>
</div>
) : (
<p className="flex items-center justify-center">
<Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
</p>
)}
</div>
<div className="flex items-center flex-row justify-center">
<Link href="#" className="border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523]">
Lihat Semua
</Link>
</div>
</div>
);
};
export default SocialMedia;

27
app/[locale]/(public)/image/detail/[slug]/page.tsx
View File

@ -464,6 +464,23 @@ const DetailInfo = () => {
});
};
const shimmer = (w: number, h: number) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="g">
<stop stop-color="#bcbcbd" offset="20%" />
<stop stop-color="#f9fafb" offset="50%" />
<stop stop-color="#bcbcbd" offset="70%" />
</linearGradient>
</defs>
<rect width="${w}" height="${h}" fill="#bcbcbd" />
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
return (
<>
<div className="min-h-screen px-4 md:px-24 py-4">
@ -477,7 +494,7 @@ const DetailInfo = () => {
</div>
) : (
<div className="relative">
<Image width={2560} height={1440} src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
<div className="absolute top-4 left-4"></div>
</div>
)}
@ -493,7 +510,7 @@ const DetailInfo = () => {
<div className="py-4 flex flex-row gap-3">
{detailDataImage?.files?.map((file: any, index: number) => (
<a onClick={() => setSelectedImage(index)} key={file?.id}>
<Image width={1920} height={1080} alt="image-small" src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1920} height={1080} alt="image-small" src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
</a>
))}
</div>
@ -650,7 +667,7 @@ const DetailInfo = () => {
{listSuggestion?.map((data: any) => (
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14">
<Image width={1080} height={1080} src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1080} height={1080} src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{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) => (
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
<Image width={1080} height={1080} src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1080} height={1080} src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "}
@ -754,7 +771,7 @@ const DetailInfo = () => {
? child1.children?.map((child2: any) => (
<div className="">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
<Image width={1080} height={1080} src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1080} height={1080} src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "}

16
app/[locale]/(public)/image/filter/page.tsx
View File

@ -367,6 +367,22 @@ const FilterPage = () => {
clearTimeout(typingTimer);
};
const shimmer = (w: number, h: number) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="g">
<stop stop-color="#bcbcbd" offset="20%" />
<stop stop-color="#f9fafb" offset="50%" />
<stop stop-color="#bcbcbd" offset="70%" />
</linearGradient>
</defs>
<rect width="${w}" height="${h}" fill="#bcbcbd" />
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
return (
<div className="flex flex-col">
{/* Header */}

33
app/[locale]/(public)/indeks/detail/[slug]/page.tsx
View File

@ -152,6 +152,22 @@ const IndeksDetail = () => {
console.log(dataId);
};
const shimmer = (w: number, h: number) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="g">
<stop stop-color="#bcbcbd" offset="20%" />
<stop stop-color="#f9fafb" offset="50%" />
<stop stop-color="#bcbcbd" offset="70%" />
</linearGradient>
</defs>
<rect width="${w}" height="${h}" fill="#bcbcbd" />
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
return (
<>
<div className="p-4 lg:px-60 lg:p-12">
@ -162,7 +178,7 @@ const IndeksDetail = () => {
</div>
{/* Gambar Utama */}
<div className="flex items-center justify-center">
<Image width={2560} height={1440} src={indeksData?.thumbnailLink} alt="Main" className="h-fit lg:h-[550px] w-full rounded-lg" />
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} src={indeksData?.thumbnailLink} alt="Main" className="h-fit lg:h-[550px] w-full rounded-lg" />
</div>
{/* Footer Informasi */}
<div className="text-gray-500 flex border-t mt-4">
@ -196,7 +212,7 @@ const IndeksDetail = () => {
{listComments?.map((data: any) => (
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14">
<Image width={512} height={512} className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={512} height={512} className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="flex justify-between text-sm text-slate-500 lg:text-base border-b-2 border-slate-200 mb-2">
<b>{Number(data.commentFrom?.roleId) == 2 || Number(data.commentFrom?.roleId) == 3 || Number(data.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : data.commentFrom?.fullname}</b>
@ -234,7 +250,7 @@ const IndeksDetail = () => {
? data.children?.map((child1: any) => (
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-12 lg:pl-32">
<Image width={512} height={512} className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={512} height={512} className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="flex justify-between text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
<b>{Number(child1.commentFrom?.roleId) == 2 || Number(child1.commentFrom?.roleId) == 3 || Number(child1.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.commentFrom?.fullname}</b>
@ -274,7 +290,7 @@ const IndeksDetail = () => {
? child1.children?.map((child2: any) => (
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-20 lg:pl-48">
<Image width={512} height={512} className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={512} height={512} className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
<div className="border border-slate-300 w-full p-4 bg-white gap-2">
<p className="flex justify-between text-slate-500 text-xs lg:text-base border-b-2 border-slate-200 mb-2">
<b>{Number(child2.commentFrom?.roleId) == 2 || Number(child2.commentFrom?.roleId) == 3 || Number(child2.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.commentFrom?.fullname}</b>
@ -329,7 +345,14 @@ const IndeksDetail = () => {
{indexData?.map((relate: any) => (
<CarouselItem key={relate?.id} className="md:basis-1/2 lg:basis-1/3">
<Link href={`/indeks/detail/${relate?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg">
<Image alt="" width={2560} height={1440} src={relate?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
alt=""
width={2560}
height={1440}
src={relate?.thumbnailLink}
className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300"
/>
<div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{relate?.categoryName}</span>
<h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{relate?.title}</h1>

23
app/[locale]/(public)/indeks/page.tsx
View File

@ -40,6 +40,23 @@ const Indeks: React.FC = () => {
setIndeksData(response?.data?.data?.content);
};
const shimmer = (w: number, h: number) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="g">
<stop stop-color="#bcbcbd" offset="20%" />
<stop stop-color="#f9fafb" offset="50%" />
<stop stop-color="#bcbcbd" offset="70%" />
</linearGradient>
</defs>
<rect width="${w}" height="${h}" fill="#bcbcbd" />
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
return (
<div className="px-4 lg:px-14">
{/* Hero Left */}
@ -54,7 +71,7 @@ const Indeks: React.FC = () => {
(indeks: any, index: number) =>
index == count && (
<div key={indeks?.id} className="relative h-[310px] lg:h-[435px]">
<Image width={2560} height={1440} src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg object-cover" />
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg object-cover" />
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{indeks?.categoryName}</span>
<Link href={`/indeks/detail/${indeks?.slug}`}>
@ -92,7 +109,7 @@ const Indeks: React.FC = () => {
(indeksRight: any, index: number) =>
(index == count + 1 || index == count + 2) && (
<div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]">
<Image width={1920} height={1080} src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg " />
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1920} height={1080} src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg " />
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{indeksRight?.categoryName}</span>
<Link href={`/indeks/detail/${indeksRight?.slug}`}>
@ -149,7 +166,7 @@ const Indeks: React.FC = () => {
(indeksBottom: any, index: number) =>
index < 3 && (
<div key={indeksBottom?.id} className="flex flex-col md:flex-row items-start p-4 gap-4">
<Image width={2560} height={1440} src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]" />
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]" />
<div className="flex flex-col justify-between w-full">
<p className="text-sm">{indeksBottom?.date}</p>
<Link href={`/indeks/detail/${indeksBottom?.slug}`} className="text-2xl font-semibold text-gray-800 dark:text-white">

22
app/[locale]/(public)/video/detail/[slug]/page.tsx
View File

@ -417,6 +417,22 @@ const DetailVideo = () => {
}
};
const shimmer = (w: number, h: number) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="g">
<stop stop-color="#bcbcbd" offset="20%" />
<stop stop-color="#f9fafb" offset="50%" />
<stop stop-color="#bcbcbd" offset="70%" />
</linearGradient>
</defs>
<rect width="${w}" height="${h}" fill="#bcbcbd" />
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
return (
<>
<div className="px-4 md:px-24 py-4">
@ -596,7 +612,7 @@ const DetailVideo = () => {
{listSuggestion?.map((data: any) => (
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14">
<Image width={1080} height={1080} src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1080} height={1080} src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{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) => (
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
<Image width={1080} height={1080} src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1080} height={1080} src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "}
@ -699,7 +715,7 @@ const DetailVideo = () => {
? child1.children?.map((child2: any) => (
<div className="">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
<Image width={1080} height={1080} src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1080} height={1080} src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "}

6
app/[locale]/page.tsx
View File

@ -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 } }) => {
<NewContent group="mabes" type="popular" />
{/* <PopularContent /> */}
<ContentCategory group="mabes" />
<Coverage />
<Division />
{/* <Coverage /> */}
{/* <Division /> */}
<AreaCoverageWorkUnits />
<Footer />
<NewsTicker />
</div>

69
components/landing-page/area-coverage-and-work-units.tsx Normal file
View File

@ -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 (
<div className="mx-auto px-4 lg:px-12 py-6">
<h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
Liputan <span className="text-[#bb3523]">Wilayah</span> & <span className="text-[#bb3523]">Satker</span>
</h2>
<div className="h-1 w-[250px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
<div className="flex flex-col justify-center lg:flex-row gap-8">
{/* POLDA */}
<Dialog>
<DialogTrigger className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 px-24 border-2 border-transparent hover:border-[#bb3523] transition-all duration-300">
<Image width={1920} height={1080} alt="indo" src="/assets/indo.png" className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] transition-transform duration-300" />
<p className="text-base font-bold">Polda Jajaran</p>
</DialogTrigger>
<DialogContent size="md">
<DialogHeader className="flex flex-col justify-center">
<DialogTitle>
<p className="text-center">Polda Jajaran</p>
</DialogTitle>
<DialogTitle>
<div className="h-1 w-[150px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
</DialogTitle>
</DialogHeader>
<Coverage />
<div className="text-right mt-4">
<DialogClose asChild>
<button className="text-[#bb3523] font-bold">Tutup</button>
</DialogClose>
</div>
</DialogContent>
</Dialog>
{/* SATKER */}
<Dialog>
<DialogTrigger className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 px-24 border-2 border-transparent hover:border-[#bb3523] transition-all duration-300">
<Image width={1920} height={1080} alt="polri" src="/assets/logo-polri.png" className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] transition-transform duration-300" />
<p className="text-base font-bold">Satuan Kerja Polri</p>
</DialogTrigger>
<DialogContent size="md">
<DialogHeader className="flex flex-col justify-center">
<DialogTitle>
<p className="text-center">Satuan Kerja Polri</p>
</DialogTitle>
<DialogTitle>
<div className="h-1 w-[150px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
</DialogTitle>
</DialogHeader>
<Division />
<div className="text-right mt-4">
<DialogClose asChild>
<button className="text-[#bb3523] font-bold">Tutup</button>
</DialogClose>
</div>
</DialogContent>
</Dialog>
</div>
</div>
);
};
export default AreaCoverageWorkUnits;

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

@ -33,6 +33,23 @@ const ContentCategory = (props: { group?: string }) => {
const [seeAllValue, setSeeAllValue] = useState(false);
const pathname = usePathname();
const shimmer = (w: number, h: number) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="g">
<stop stop-color="#bcbcbd" offset="20%" />
<stop stop-color="#f9fafb" offset="50%" />
<stop stop-color="#bcbcbd" offset="70%" />
</linearGradient>
</defs>
<rect width="${w}" height="${h}" fill="#bcbcbd" />
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
return (
<div className="mx-auto px-4 lg:px-24 py-10 max-w-screen-2xl ">
<Reveal>
@ -56,7 +73,7 @@ const ContentCategory = (props: { group?: string }) => {
!seeAllValue ? (
index < 4 ? (
<Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
<Image alt="category" width={2560} height={1440} src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} alt="category" width={2560} height={1440} src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
<div className="absolute bottom-0 rounded-lg left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] text-white p-2">
<h3 className="text-sm font-semibold truncate">{category?.name}</h3>
</div>
@ -66,7 +83,7 @@ const ContentCategory = (props: { group?: string }) => {
)
) : (
<Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
<Image alt="category" width={2560} height={1440} src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} alt="category" width={2560} height={1440} src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
<div className="absolute bottom-0 left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] rounded-lg text-white p-2">
<h3 className="text-sm font-semibold truncate">{category?.name}</h3>
</div>

132
components/landing-page/coverage.tsx
View File

@ -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 (
<div className="max-w-screen-xl mx-auto px-4 lg:px-12 py-6">
<Reveal>
{/* Header */}
<h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
{pathname?.split("/")[1] == "in" ? (
<>
{t("coverageOnly")}&nbsp;<span className="text-[#bb3523]">{t("area")}</span>{" "}
</>
) : (
<>
{t("area")}&nbsp;
<span className="text-[#bb3523]">{t("coverageOnly")}</span>
</>
)}
</h2>
const shimmer = (w: number, h: number) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="g">
<stop stop-color="#bcbcbd" offset="20%" />
<stop stop-color="#f9fafb" offset="50%" />
<stop stop-color="#bcbcbd" offset="70%" />
</linearGradient>
</defs>
<rect width="${w}" height="${h}" fill="#bcbcbd" />
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
{/* <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
return (
<div className="w-full">
{/* Header */}
{/* <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
{pathname?.split("/")[1] == "in" ? (
<>
{t("coverageOnly")}&nbsp;<span className="text-[#bb3523]">{t("area")}</span>{" "}
</>
) : (
<>
{t("area")}&nbsp;
<span className="text-[#bb3523]">{t("coverageOnly")}</span>
</>
)}
</h2> */}
{/* <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
Liputan <span className="text-[#bb3523]">Wilayah</span>
</h2> */}
<div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div>
{/* <div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div> */}
{/* Pencarian */}
<div className="flex items-center justify-center gap-4 mb-6">
<input onChange={(e) => 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" />
<button onClick={handleSearch} className="px-2 w-1/5 lg:px-4 py-2 bg-[#bb3523] text-xs lg:text-base text-white flex justify-center items-center gap-2 rounded-md hover:bg-red-700">
{t("searchRegional")}
<Icon icon="ri:arrow-right-s-line" fontSize={20} />
</button>
{/* Pencarian */}
{/* <div className="flex items-center justify-center gap-4 mb-6">
<input onChange={(e) => 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" />
<button onClick={handleSearch} className="px-2 w-1/5 lg:px-4 py-2 bg-[#bb3523] text-xs lg:text-base text-white flex justify-center items-center gap-2 rounded-md hover:bg-red-700">
{t("searchRegional")}
<Icon icon="ri:arrow-right-s-line" fontSize={20} />
</button>
</div> */}
{/* Grid Wilayah */}
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6 overflow-y-auto px-4 max-h-[60vh]">
{filteredList?.map((region: any) => (
<Link key={region.slug} href={`/polda/${region.slug}`} className="flex flex-col items-center text-center p-3 border rounded-lg shadow-md hover:shadow-lg transition-all">
<div className="mb-1 flex items-center justify-center">
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1920} height={1080} src={region.logo} alt={region.name} className="w-14 h-14 object-contain" />
</div>
<p className="text-xs font-semibold">{region.name}</p>
</Link>
))}
</div>
{/* {filteredList && filteredList.length > 9 && (
<div className="flex justify-center py-5">
<Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
{seeAllValue ? t("seeLess") : t("seeMore")}
</Button>
</div>
{/* Grid Wilayah */}
<div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-9 gap-6">
<div className="flex flex-col items-center text-center group">
<Link href="/polda/polda-kaltara" className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
<img src="/assets/polda/polda-kalut.png" alt="polda-kaltara" className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
</Link>
<p className="text-md font-semibold">Polda Kalimantan Utara</p>
</div>
{filteredList && filteredList.length > 0 ? (
filteredList.map((region, index) =>
!seeAllValue ? (
index < 8 ? (
<Link href={`/polda/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
<div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
</div>
<p className="text-md font-semibold">{region.name}</p>
</Link>
) : (
""
)
) : (
<Link href={`/polda/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
<div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
</div>
<p className="text-md font-semibold">{region.name}</p>
</Link>
)
)
) : (
<p className="text-center text-[#bb3523] font-semibold">{t("notFound")}</p>
)}
</div>
{filteredList && filteredList.length > 8 && (
<div className="flex justify-center py-5">
<Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
{seeAllValue ? t("seeLess") : t("seeMore")}
</Button>
</div>
)}
</Reveal>
)} */}
</div>
);
};

78
components/landing-page/division.tsx
View File

@ -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) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="g">
<stop stop-color="#bcbcbd" offset="20%" />
<stop stop-color="#f9fafb" offset="50%" />
<stop stop-color="#bcbcbd" offset="70%" />
</linearGradient>
</defs>
<rect width="${w}" height="${h}" fill="#bcbcbd" />
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
return (
<div className="max-w-screen-xl mx-auto px-4 lg:px-12 py-6">
<div className="mx-auto px-4 w-full">
{/* Header */}
<Reveal>
<h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
{/* <Reveal> */}
{/* <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
{pathname?.split("/")[1] == "in" ? (
<>
{t("coverageOnly")}&nbsp;<span className="text-[#bb3523]">{t("division")}</span>{" "}
@ -77,54 +94,37 @@ const Division = () => {
<span className="text-[#bb3523]">{t("coverageOnly")}</span>
</>
)}
</h2>
<div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div>
</h2> */}
{/* <div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div> */}
{/* Pencarian */}
<div className="flex items-center justify-center gap-4 mb-6">
{/* Pencarian */}
{/* <div className="flex items-center justify-center gap-4 mb-6">
<input onChange={(e) => 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" />
<button onClick={handleSearch} className="px-2 w-1/5 lg:px-4 py-2 bg-[#bb3523] text-xs lg:text-base flex justify-center items-center gap-2 text-white rounded-md hover:bg-red-700">
{t("searchDivision")}
<Icon icon="ri:arrow-right-s-line" fontSize={20} />
</button>
</div>
</div> */}
{/* Grid Wilayah */}
<div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-6">
{filteredList && filteredList.length > 0 ? (
filteredList.map((region, index) =>
!seeAllValue ? (
index < 7 ? (
<Link href={`/satker/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
<div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
</div>
<p className="text-md font-semibold">{region.name}</p>
</Link>
) : (
""
)
) : (
<Link href={`/satker/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
<div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
</div>
<p className="text-md font-semibold">{region.name}</p>
</Link>
)
)
) : (
<p className="items-center text-center text-[#bb3523] text-lg font-semibold">Satker Tidak Ditemukan</p>
)}
</div>
{filteredList && filteredList.length > 9 && (
{/* Grid Wilayah */}
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6 px-4 overflow-y-auto max-h-[60vh]">
{filteredList?.map((region: any) => (
<Link href={`/satker/${region.slug}`} className="flex flex-col items-center text-center p-3 border rounded-lg shadow-md hover:shadow-lg transition-all">
<div className="mb-1 flex items-center justify-center">
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1920} height={1080} src={region.logo} alt={region.name} className="w-14 h-14 object-contain" />
</div>
<p className="text-xs font-semibold">{region.name}</p>
</Link>
))}
</div>
{/* {filteredList && filteredList.length > 9 && (
<div className="flex justify-center py-5">
<Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
{seeAllValue ? t("seeLess") : t("seeMore")}
</Button>
</div>
)}
</Reveal>
)} */}
{/* </Reveal> */}
</div>
);
};

36
components/landing-page/hero.tsx
View File

@ -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) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="g">
<stop stop-color="#bcbcbd" offset="20%" />
<stop stop-color="#f9fafb" offset="50%" />
<stop stop-color="#bcbcbd" offset="70%" />
</linearGradient>
</defs>
<rect width="${w}" height="${h}" fill="#bcbcbd" />
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
return (
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20 py-4 mx-auto w-auto mt-6">
{/* Section Gambar Utama */}
@ -70,13 +86,21 @@ const Hero: React.FC = () => {
{heroData?.map((list: any) => (
<CarouselItem key={list?.id}>
<div className="relative h-[310px] lg:h-[420px]">
<Image src={list?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[850px] h-[310px] lg:h-[420px] rounded-lg object-cover" />
<Image
src={list?.thumbnailLink}
alt="gambar-utama"
width={1920}
height={1080}
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
className="w-full lg:w-[850px] h-[310px] lg:h-[420px] rounded-lg object-cover"
/>
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-black dark:text-white p-4 rounded-b-lg">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{list?.categoryName}</span>
<Link href={`${locale}/image/detail/${list?.slug}`}>
<h2 className="text-lg text-slate-200 dark:text-white font-bold mt-2">{list?.title}</h2>
<h2 className="text-lg text-slate-500 dark:text-white font-bold mt-2">{list?.title}</h2>
</Link>
<p className="text-xs flex flex-row items-center text-slate-200 dark:text-white gap-1 mt-1">
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1 mt-1">
{formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone ? list?.timezone : "WIB"}|{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
<path
@ -141,7 +165,7 @@ const Hero: React.FC = () => {
{heroData?.map((item: any) => (
<li key={item?.id} className="flex gap-4 flex-row lg:w-full ">
<div className="flex-shrink-0 w-24 rounded-lg">
<Image width={720} height={480} src={item?.thumbnailLink} alt={item?.title} className="w-full h-[73px] object-cover rounded-lg" />
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={720} height={480} src={item?.thumbnailLink} alt={item?.title} className="w-full h-[73px] object-cover rounded-lg" />
</div>
<div className="w-[280px] lg:w-auto">
<span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">{item?.categoryName}</span>

27
components/landing-page/new-content.tsx
View File

@ -54,6 +54,22 @@ const NewContent = (props: { group: string; type: string }) => {
setNewContent(response?.data?.data?.content);
};
const shimmer = (w: number, h: number) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="g">
<stop stop-color="#bcbcbd" offset="20%" />
<stop stop-color="#f9fafb" offset="50%" />
<stop stop-color="#bcbcbd" offset="70%" />
</linearGradient>
</defs>
<rect width="${w}" height="${h}" fill="#bcbcbd" />
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
return (
<div className="px-4 lg:px-16 py-4">
<Reveal>
@ -120,7 +136,14 @@ const NewContent = (props: { group: string; type: string }) => {
{newContent?.map((image: any) => (
<CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/3">
<div onClick={() => router.push(prefixPath + `/image/detail/${image?.slug}`)} className="cursor-pointer relative group overflow-hidden shadow-md hover:shadow-lg">
<Image width={2560} height={1440} alt="image" src={image?.thumbnailLink} className="w-full rounded-lg h-48 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
width={2560}
height={1440}
alt="image"
src={image?.thumbnailLink}
className="w-full rounded-lg h-48 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300"
/>
<div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
<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">
@ -184,7 +207,7 @@ const NewContent = (props: { group: string; type: string }) => {
{newContent?.map((video: any) => (
<CarouselItem key={video?.id} className="md:basis-1/2 lg:basis-1/3">
<div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
<Image alt="video" width={2560} height={1440} src={video?.thumbnailLink} className="w-full h-40 lg:h-60 object-cover rounded-lg group-hover:scale-100 transition-transform duration-300" />
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} alt="video" width={2560} height={1440} src={video?.thumbnailLink} className="w-full h-40 lg:h-60 object-cover rounded-lg group-hover:scale-100 transition-transform duration-300" />
<div className="absolute bottom-0 rounded-lg left-0 right-0 border-l-4 border-[#bb3523] bg-gray-600 text-white p-2">
<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-sm gap-2">

2
components/landing-page/news-tickers.tsx
View File

@ -47,7 +47,7 @@ export default function NewsTicker() {
}, [article?.length]);
return (
<div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between dark:bg-stone-800 bg-gray-50">
<div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between dark:bg-stone-800 bg-gray-50 border-[#bb3523] border-t-2">
<div className="relative px-4 py-2 font-semibold text-xs lg:text-sm flex items-center bg-[#bb3523] text-white w-[30%] lg:w-[10%]">
<span className="mr-2"></span> {t("breakingNews")}
<div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clip-path-triangle"></div>

39
components/shimmer/page.tsx Normal file
View File

@ -0,0 +1,39 @@
import Image from "next/image";
import ViewSource from "../view-source/view-source";
const shimmer = (w: number, h: number) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="g">
<stop stop-color="#333" offset="20%" />
<stop stop-color="#222" offset="50%" />
<stop stop-color="#333" offset="70%" />
</linearGradient>
</defs>
<rect width="${w}" height="${h}" fill="#333" />
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
const Shimmer = () => (
<div>
<ViewSource pathname="app/shimmer/page.tsx" />
<h1>Image Component With Shimmer Data URL</h1>
<Image
alt="Mountains"
src="/mountains.jpg"
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
width={700}
height={475}
style={{
maxWidth: "100%",
height: "auto",
}}
/>
</div>
);
export default Shimmer;

48
components/view-source/view-source.module.css Normal file
View File

@ -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;
}
}

17
components/view-source/view-source.tsx Normal file
View File

@ -0,0 +1,17 @@
import styles from "./view-source.module.css";
type ViewSourceProps = {
pathname: string;
};
const ViewSource = ({ pathname }: ViewSourceProps) => (
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 250 250" fill="#151513" className={styles.svg}>
<a title="View Source" href={`https://github.com/vercel/next.js/blob/canary/examples/image-component/${pathname}`}>
<path d="M0 0l115 115h15l12 27 108 108V0z" fill="#fff" />
<path className={styles.arm} d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16" />
<path d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z" />
</a>
</svg>
);
export default ViewSource;

BIN
public/assets/indo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

16
utils/globals.tsx
View File

@ -137,3 +137,19 @@ export function checkMaliciousText(str: any) {
return "";
}
}
export const shimmer = (w: number, h: number) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="g">
<stop stop-color="#333" offset="20%" />
<stop stop-color="#222" offset="50%" />
<stop stop-color="#333" offset="70%" />
</linearGradient>
</defs>
<rect width="${w}" height="${h}" fill="#333" />
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
export const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));