279 lines
11 KiB
TypeScript
279 lines
11 KiB
TypeScript
import search from "@/app/[locale]/(protected)/app/chat/components/search";
|
|
import { useTranslations } from "next-intl";
|
|
import { useParams, useRouter } from "next/navigation";
|
|
import router from "next/router";
|
|
import React, { useEffect, useState } from "react";
|
|
import { Icon } from "@iconify/react/dist/iconify.js";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "../ui/select";
|
|
import Image from "next/image";
|
|
import { getHeroData } from "@/service/landing/landing";
|
|
import { title } from "process";
|
|
import { htmlToString } from "@/utils/globals";
|
|
import { Link } from "@/i18n/routing";
|
|
|
|
const ScrollableContent = () => {
|
|
const [contentType, setContentType] = useState("all");
|
|
const [search, setSearch] = useState("");
|
|
const router = useRouter();
|
|
const params = useParams();
|
|
const locale = params?.locale;
|
|
const t = useTranslations("LandingPage");
|
|
const [content, setContent] = useState<any>();
|
|
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;
|
|
} catch (error) {
|
|
console.error("Fetch error: ", error);
|
|
}
|
|
}
|
|
|
|
fetchCategories();
|
|
initFetch();
|
|
}, []);
|
|
|
|
const initFetch = async () => {
|
|
const response = await getHeroData();
|
|
console.log(response);
|
|
let data = response?.data?.data?.content;
|
|
|
|
setContent(data);
|
|
};
|
|
return (
|
|
<>
|
|
<div className="text-center">
|
|
<h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
|
|
<span className="text-[#bb3523] dark:text-white">
|
|
{t("exploration")}
|
|
</span>{" "}
|
|
{t("and")}{" "}
|
|
<span className="text-[#bb3523] dark:text-white">
|
|
{t("download")}
|
|
</span>{" "}
|
|
{t("coverage")}{" "}
|
|
</h1>
|
|
<div className="w-[80%] h-1 bg-[#bb3523] mx-auto mt-2"></div>
|
|
<p className="text-sm md:text-base text-gray-500 dark:text-gray-100 mt-4">
|
|
{t("officialCoverage")}
|
|
</p>
|
|
|
|
<div className="mt-6 flex flex-col md:flex-row justify-center gap-4">
|
|
<div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
|
|
<Select value={contentType} onValueChange={setContentType}>
|
|
<SelectTrigger className="w-[180px]">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="all">{t("allContent")}</SelectItem>
|
|
<SelectItem value="image">{t("image")}</SelectItem>
|
|
<SelectItem value="video">{t("video")}</SelectItem>
|
|
<SelectItem value="document">{t("text")}</SelectItem>
|
|
<SelectItem value="audio">{t("audio")}</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
<div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
|
|
<span className="material-icons text-black dark:text-white px-4">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="1em"
|
|
height="1em"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<input
|
|
type="text"
|
|
placeholder={t("search")}
|
|
className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none"
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() =>
|
|
router.push(`/${contentType}/filter?title=${search}`)
|
|
}
|
|
className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700"
|
|
>
|
|
{t("searchCoverage")}
|
|
<Icon icon="ri:arrow-right-s-line" fontSize={20} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col md:flex-row gap-6 py-8">
|
|
<div className="w-full md:w-1/2 px-4">
|
|
<h2 className="text-lg md:text-xl font-bold text-[#bb3523] border-b-2 border-[#bb3523] mb-4 uppercase">
|
|
Berita Polda
|
|
</h2>
|
|
<div className="grid gap-4">
|
|
{content?.slice(0, 4).map((item: any, index: number) => (
|
|
<div
|
|
key={index}
|
|
className={`bg-white rounded-lg shadow-md overflow-hidden ${
|
|
index === 0 ? "" : "flex"
|
|
}`}
|
|
>
|
|
<div
|
|
className={`relative ${
|
|
index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"
|
|
}`}
|
|
>
|
|
<Link
|
|
href={
|
|
Number(item?.fileTypeId) == 1
|
|
? `${locale}/image/detail/${item?.slug}`
|
|
: Number(item?.fileTypeId) == 2
|
|
? `${locale}/video/detail/${item?.slug}`
|
|
: Number(item?.fileTypeId) == 3
|
|
? `${locale}/document/detail/${item?.slug}`
|
|
: `${locale}/audio/detail/${item?.slug}`
|
|
}
|
|
>
|
|
<Image
|
|
src={item.thumbnailLink}
|
|
alt={item.title}
|
|
layout="fill"
|
|
objectFit="cover"
|
|
/>
|
|
<div className="absolute top-2 right-2 bg-white rounded-full p-1 shadow">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="1.5em"
|
|
height="1.5em"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2m-2 0H5V5h14ZM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5Z" />
|
|
</svg>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
{/* <Link
|
|
href={
|
|
Number(item?.fileTypeId) == 1
|
|
? `${locale}/image/detail/${item?.slug}`
|
|
: Number(item?.fileTypeId) == 2
|
|
? `${locale}/video/detail/${item?.slug}`
|
|
: Number(item?.fileTypeId) == 3
|
|
? `${locale}/document/detail/${item?.slug}`
|
|
: `${locale}/audio/detail/${item?.slug}`
|
|
}
|
|
> */}
|
|
<div className={`${index === 0 ? "p-4" : "p-3 w-[50%]"}`}>
|
|
<p className="text-sm text-[#bb3523] font-bold mb-1">
|
|
{item.categoryName}
|
|
</p>
|
|
<h3 className="text-sm font-semibold text-gray-800">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-xs text-gray-500 mt-1 truncate">
|
|
{htmlToString(item.description)}
|
|
</p>
|
|
</div>
|
|
{/* </Link> */}
|
|
</div>
|
|
))}
|
|
<button className="w-full mt-2 py-2 border border-[#bb3523] text-[#bb3523] rounded-lg font-semibold hover:bg-[#bb3523] hover:text-white transition">
|
|
LIHAT SEMUA
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Berita SATKER */}
|
|
<div className="w-full md:w-1/2 px-4">
|
|
<h2 className="text-lg md:text-xl font-bold text-[#bb3523] border-b-2 border-[#bb3523] mb-4 uppercase">
|
|
Berita Satker
|
|
</h2>
|
|
<div className="grid gap-4">
|
|
{content
|
|
?.filter((item: any) => item.isPublishOnPolda === true)
|
|
.slice(0, 4)
|
|
.map((item: any, index: number) => (
|
|
<div
|
|
key={index}
|
|
className={`bg-white rounded-lg shadow-md overflow-hidden ${
|
|
index === 0 ? "" : "flex"
|
|
}`}
|
|
>
|
|
<div
|
|
className={`relative ${
|
|
index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"
|
|
}`}
|
|
>
|
|
<Link
|
|
href={
|
|
Number(item?.fileTypeId) == 1
|
|
? `${locale}/image/detail/${item?.slug}`
|
|
: Number(item?.fileTypeId) == 2
|
|
? `${locale}/video/detail/${item?.slug}`
|
|
: Number(item?.fileTypeId) == 3
|
|
? `${locale}/document/detail/${item?.slug}`
|
|
: `${locale}/audio/detail/${item?.slug}`
|
|
}
|
|
>
|
|
<Image
|
|
src={item.thumbnailLink}
|
|
alt={item.title}
|
|
layout="fill"
|
|
objectFit="cover"
|
|
/>
|
|
<div className="absolute top-2 right-2 bg-white rounded-full p-1 shadow">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="1.5em"
|
|
height="1.5em"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2m-2 0H5V5h14ZM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5Z" />
|
|
</svg>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
<div className={`${index === 0 ? "p-4" : "p-3 w-[50%]"}`}>
|
|
<p className="text-sm text-[#bb3523] font-bold mb-1">
|
|
{item.categoryName}
|
|
</p>
|
|
<h3 className="text-sm font-semibold text-gray-800">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-xs text-gray-500 mt-1 truncate">
|
|
{htmlToString(item.description)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
<button className="w-full mt-2 py-2 border border-[#bb3523] text-[#bb3523] rounded-lg font-semibold hover:bg-[#bb3523] hover:text-white transition">
|
|
LIHAT SEMUA
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ScrollableContent;
|