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

fix:polda and satker section

This commit is contained in:
Sabda Yagra 2025-03-05 17:05:44 +07:00
parent 5320b2eaa7
commit 06ad352c89
23 changed files with 1130 additions and 1023 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;

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>

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

@ -0,0 +1,68 @@
"use client";
import React from "react";
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import Image from "next/image";
import Coverage from "./coverage";
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="lg">
<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="indo" 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">Polda Jajaran</p>
</DialogTrigger>
<DialogContent size="lg">
<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>
<Coverage />
<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;

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

@ -30,7 +30,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" },
@ -60,80 +60,55 @@ const Coverage: React.FC = () => {
};
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>
<div className="mx-auto px-4">
{/* 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">
{/* <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-scroll 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 group p-3 border rounded-lg shadow-sm hover:shadow-md transition-all">
<div className="w-20 h-20 shadow-lg rounded-lg mb-2 flex items-center justify-center">
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain" />
</div>
<p className="text-md 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>
);
};

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

@ -65,8 +65,8 @@ const Division = () => {
return (
<div className="max-w-screen-xl mx-auto px-4 lg:px-12 py-6">
{/* 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 +77,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 overflow-y-scroll px-4 max-h-[60vh]">
{filteredList?.map((region: any) => (
<Link href={`/satker/${region.slug}`} className="flex flex-col items-center text-center group p-3 border rounded-lg shadow-sm hover:shadow-md transition-all">
<div className="w-20 h-20 shadow-lg rounded-lg mb-2 flex items-center justify-center">
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain" />
</div>
<p className="text-md 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>
);
};

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

@ -52,7 +52,7 @@ const Hero: React.FC = () => {
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-20 py-4 mx-auto w-auto mt-6">
{/* Section Gambar Utama */}
@ -74,9 +74,9 @@ const Hero: React.FC = () => {
<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

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>

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