190 lines
8.5 KiB
TypeScript
190 lines
8.5 KiB
TypeScript
|
"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;
|