Merge branch 'dev-sabda' of https://gitlab.com/hanifsalafi/mediahub_redesign
This commit is contained in:
commit
5604d9f09d
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -36,12 +36,12 @@ const category = [
|
||||||
];
|
];
|
||||||
|
|
||||||
const categoryLinks: any = {
|
const categoryLinks: any = {
|
||||||
Nasional: "/news/nasional",
|
Nasional: "https://tribratanews.kaltara.polri.go.id/category/nasional/",
|
||||||
Kaltara: "/news/kaltara",
|
Kaltara: "https://tribratanews.kaltara.polri.go.id/category/kaltara/",
|
||||||
Keamanan: "/security",
|
Keamanan: "https://tribratanews.kaltara.polri.go.id/category/keamanan/",
|
||||||
Kesehatan: "/health",
|
Kesehatan: "https://tribratanews.kaltara.polri.go.id/category/kesehatan/",
|
||||||
Olahraga: "/sports",
|
Olahraga: "https://tribratanews.kaltara.polri.go.id/category/olahraga/",
|
||||||
PPA: "/ppa",
|
PPA: "https://tribratanews.kaltara.polri.go.id/category/ppa/",
|
||||||
MediaHub: "https://mediahub.polri.go.id/",
|
MediaHub: "https://mediahub.polri.go.id/",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -59,10 +59,12 @@ const NavbarKaltara = () => {
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<Button className="hidden lg:flex justify-center items-center bg-white rounded-full gap-3 ml-7 p-2 w-fit h-fit">
|
<Link href="/auth">
|
||||||
<Icon icon="material-symbols:lock" className="text-[#c03724]" />
|
<Button className="hidden lg:flex justify-center items-center bg-white rounded-full gap-3 ml-7 p-2 w-fit h-fit">
|
||||||
<p className="text-[#c03724]">Login</p>
|
<Icon icon="material-symbols:lock" className="text-[#c03724]" />
|
||||||
</Button>
|
<p className="text-[#c03724]">Login</p>
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Mobile Menu Toggle */}
|
{/* Mobile Menu Toggle */}
|
||||||
|
|
@ -80,7 +82,7 @@ const NavbarKaltara = () => {
|
||||||
|
|
||||||
{/* Mobile Menu */}
|
{/* Mobile Menu */}
|
||||||
{menuOpen && (
|
{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">
|
<div className="text-white font-semibold gap-5 items-center grid grid-cols-2">
|
||||||
{category?.map((data: any) => (
|
{category?.map((data: any) => (
|
||||||
<Link key={data?.id} href={categoryLinks[data?.name] || "#"}>
|
<Link key={data?.id} href={categoryLinks[data?.name] || "#"}>
|
||||||
|
|
@ -88,10 +90,12 @@ const NavbarKaltara = () => {
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<Button className="flex justify-center items-center bg-white rounded-full gap-3 ml-7 p-2 w-fit h-fit">
|
<Link href="/auth">
|
||||||
<Icon icon="material-symbols:lock" className="text-[#c03724]" />
|
<Button className="flex justify-center items-center bg-white rounded-full gap-3 ml-0 p-2 w-full h-fit">
|
||||||
<p className="text-[#c03724]">Login</p>
|
<Icon icon="material-symbols:lock" className="text-[#c03724]" />
|
||||||
</Button>
|
<p className="text-[#c03724]">Login</p>
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -60,25 +60,25 @@ export default function NewsTickerKaltara() {
|
||||||
|
|
||||||
return (
|
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="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]">
|
<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-2"></span> {tanggal}
|
<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 className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clip-path-triangle"></div>
|
||||||
</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="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-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={`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">
|
<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>
|
||||||
<Link href={`news/detail/${article[currentNewsIndex]?.id}`} className="lg:hidden">
|
<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>
|
</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>
|
||||||
<div className="flex flex-row text-white h-full gap-[1px]">
|
<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} />
|
<Icon icon="ic:twotone-arrow-left" fontSize={30} />
|
||||||
</a>
|
</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} />
|
<Icon icon="ic:twotone-arrow-right" fontSize={30} />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -16,8 +16,9 @@ const PoldaKaltara = () => {
|
||||||
<div>
|
<div>
|
||||||
<NavbarKaltara />
|
<NavbarKaltara />
|
||||||
<HeroKaltara />
|
<HeroKaltara />
|
||||||
<LatestNews />
|
<LatestNews type="latest" />
|
||||||
<PopularNews />
|
<LatestNews type="popular" />
|
||||||
|
{/* <PopularNews /> */}
|
||||||
<SocialMedia />
|
<SocialMedia />
|
||||||
<NationalNews />
|
<NationalNews />
|
||||||
<RegionalNews />
|
<RegionalNews />
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -464,6 +464,23 @@ const DetailInfo = () => {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const shimmer = (w: number, h: number) => `
|
||||||
|
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g">
|
||||||
|
<stop stop-color="#bcbcbd" offset="20%" />
|
||||||
|
<stop stop-color="#f9fafb" offset="50%" />
|
||||||
|
<stop stop-color="#bcbcbd" offset="70%" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="${w}" height="${h}" fill="#bcbcbd" />
|
||||||
|
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
|
||||||
|
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
|
||||||
|
</svg>`;
|
||||||
|
|
||||||
|
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="min-h-screen px-4 md:px-24 py-4">
|
<div className="min-h-screen px-4 md:px-24 py-4">
|
||||||
|
|
@ -477,7 +494,7 @@ const DetailInfo = () => {
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Image width={2560} height={1440} src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
|
||||||
<div className="absolute top-4 left-4"></div>
|
<div className="absolute top-4 left-4"></div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
@ -493,7 +510,7 @@ const DetailInfo = () => {
|
||||||
<div className="py-4 flex flex-row gap-3">
|
<div className="py-4 flex flex-row gap-3">
|
||||||
{detailDataImage?.files?.map((file: any, index: number) => (
|
{detailDataImage?.files?.map((file: any, index: number) => (
|
||||||
<a onClick={() => setSelectedImage(index)} key={file?.id}>
|
<a onClick={() => setSelectedImage(index)} key={file?.id}>
|
||||||
<Image width={1920} height={1080} alt="image-small" src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1920} height={1080} alt="image-small" src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
|
||||||
</a>
|
</a>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -650,7 +667,7 @@ const DetailInfo = () => {
|
||||||
{listSuggestion?.map((data: any) => (
|
{listSuggestion?.map((data: any) => (
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<div className="flex flex-row mt-2 px-4 lg:px-14">
|
<div className="flex flex-row mt-2 px-4 lg:px-14">
|
||||||
<Image width={1080} height={1080} src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1080} height={1080} src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
|
||||||
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
|
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
|
||||||
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
||||||
{Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
|
{Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
|
||||||
|
|
@ -699,7 +716,7 @@ const DetailInfo = () => {
|
||||||
? data.children?.map((child1: any) => (
|
? data.children?.map((child1: any) => (
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
|
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
|
||||||
<Image width={1080} height={1080} src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1080} height={1080} src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
|
||||||
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
|
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
|
||||||
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
||||||
{" "}
|
{" "}
|
||||||
|
|
@ -754,7 +771,7 @@ const DetailInfo = () => {
|
||||||
? child1.children?.map((child2: any) => (
|
? child1.children?.map((child2: any) => (
|
||||||
<div className="">
|
<div className="">
|
||||||
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
|
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
|
||||||
<Image width={1080} height={1080} src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1080} height={1080} src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
|
||||||
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
|
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
|
||||||
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
||||||
{" "}
|
{" "}
|
||||||
|
|
|
||||||
|
|
@ -367,6 +367,22 @@ const FilterPage = () => {
|
||||||
clearTimeout(typingTimer);
|
clearTimeout(typingTimer);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const shimmer = (w: number, h: number) => `
|
||||||
|
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g">
|
||||||
|
<stop stop-color="#bcbcbd" offset="20%" />
|
||||||
|
<stop stop-color="#f9fafb" offset="50%" />
|
||||||
|
<stop stop-color="#bcbcbd" offset="70%" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="${w}" height="${h}" fill="#bcbcbd" />
|
||||||
|
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
|
||||||
|
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
|
||||||
|
</svg>`;
|
||||||
|
|
||||||
|
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
|
|
|
||||||
|
|
@ -152,6 +152,22 @@ const IndeksDetail = () => {
|
||||||
console.log(dataId);
|
console.log(dataId);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const shimmer = (w: number, h: number) => `
|
||||||
|
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g">
|
||||||
|
<stop stop-color="#bcbcbd" offset="20%" />
|
||||||
|
<stop stop-color="#f9fafb" offset="50%" />
|
||||||
|
<stop stop-color="#bcbcbd" offset="70%" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="${w}" height="${h}" fill="#bcbcbd" />
|
||||||
|
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
|
||||||
|
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
|
||||||
|
</svg>`;
|
||||||
|
|
||||||
|
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="p-4 lg:px-60 lg:p-12">
|
<div className="p-4 lg:px-60 lg:p-12">
|
||||||
|
|
@ -162,7 +178,7 @@ const IndeksDetail = () => {
|
||||||
</div>
|
</div>
|
||||||
{/* Gambar Utama */}
|
{/* Gambar Utama */}
|
||||||
<div className="flex items-center justify-center">
|
<div className="flex items-center justify-center">
|
||||||
<Image width={2560} height={1440} src={indeksData?.thumbnailLink} alt="Main" className="h-fit lg:h-[550px] w-full rounded-lg" />
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} src={indeksData?.thumbnailLink} alt="Main" className="h-fit lg:h-[550px] w-full rounded-lg" />
|
||||||
</div>
|
</div>
|
||||||
{/* Footer Informasi */}
|
{/* Footer Informasi */}
|
||||||
<div className="text-gray-500 flex border-t mt-4">
|
<div className="text-gray-500 flex border-t mt-4">
|
||||||
|
|
@ -196,7 +212,7 @@ const IndeksDetail = () => {
|
||||||
{listComments?.map((data: any) => (
|
{listComments?.map((data: any) => (
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<div className="flex flex-row mt-2 px-4 lg:px-14">
|
<div className="flex flex-row mt-2 px-4 lg:px-14">
|
||||||
<Image width={512} height={512} className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={512} height={512} className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
|
||||||
<div className="border border-slate-300 w-full p-4 bg-white gap-1">
|
<div className="border border-slate-300 w-full p-4 bg-white gap-1">
|
||||||
<p className="flex justify-between text-sm text-slate-500 lg:text-base border-b-2 border-slate-200 mb-2">
|
<p className="flex justify-between text-sm text-slate-500 lg:text-base border-b-2 border-slate-200 mb-2">
|
||||||
<b>{Number(data.commentFrom?.roleId) == 2 || Number(data.commentFrom?.roleId) == 3 || Number(data.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : data.commentFrom?.fullname}</b>
|
<b>{Number(data.commentFrom?.roleId) == 2 || Number(data.commentFrom?.roleId) == 3 || Number(data.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : data.commentFrom?.fullname}</b>
|
||||||
|
|
@ -234,7 +250,7 @@ const IndeksDetail = () => {
|
||||||
? data.children?.map((child1: any) => (
|
? data.children?.map((child1: any) => (
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-12 lg:pl-32">
|
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-12 lg:pl-32">
|
||||||
<Image width={512} height={512} className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={512} height={512} className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
|
||||||
<div className="border border-slate-300 w-full p-4 bg-white gap-1">
|
<div className="border border-slate-300 w-full p-4 bg-white gap-1">
|
||||||
<p className="flex justify-between text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
<p className="flex justify-between text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
||||||
<b>{Number(child1.commentFrom?.roleId) == 2 || Number(child1.commentFrom?.roleId) == 3 || Number(child1.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.commentFrom?.fullname}</b>
|
<b>{Number(child1.commentFrom?.roleId) == 2 || Number(child1.commentFrom?.roleId) == 3 || Number(child1.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.commentFrom?.fullname}</b>
|
||||||
|
|
@ -274,7 +290,7 @@ const IndeksDetail = () => {
|
||||||
? child1.children?.map((child2: any) => (
|
? child1.children?.map((child2: any) => (
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-20 lg:pl-48">
|
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-20 lg:pl-48">
|
||||||
<Image width={512} height={512} className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={512} height={512} className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
|
||||||
<div className="border border-slate-300 w-full p-4 bg-white gap-2">
|
<div className="border border-slate-300 w-full p-4 bg-white gap-2">
|
||||||
<p className="flex justify-between text-slate-500 text-xs lg:text-base border-b-2 border-slate-200 mb-2">
|
<p className="flex justify-between text-slate-500 text-xs lg:text-base border-b-2 border-slate-200 mb-2">
|
||||||
<b>{Number(child2.commentFrom?.roleId) == 2 || Number(child2.commentFrom?.roleId) == 3 || Number(child2.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.commentFrom?.fullname}</b>
|
<b>{Number(child2.commentFrom?.roleId) == 2 || Number(child2.commentFrom?.roleId) == 3 || Number(child2.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.commentFrom?.fullname}</b>
|
||||||
|
|
@ -329,7 +345,14 @@ const IndeksDetail = () => {
|
||||||
{indexData?.map((relate: any) => (
|
{indexData?.map((relate: any) => (
|
||||||
<CarouselItem key={relate?.id} className="md:basis-1/2 lg:basis-1/3">
|
<CarouselItem key={relate?.id} className="md:basis-1/2 lg:basis-1/3">
|
||||||
<Link href={`/indeks/detail/${relate?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg">
|
<Link href={`/indeks/detail/${relate?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg">
|
||||||
<Image alt="" width={2560} height={1440} src={relate?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
|
<Image
|
||||||
|
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
|
||||||
|
alt=""
|
||||||
|
width={2560}
|
||||||
|
height={1440}
|
||||||
|
src={relate?.thumbnailLink}
|
||||||
|
className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300"
|
||||||
|
/>
|
||||||
<div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
|
<div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
|
||||||
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{relate?.categoryName}</span>
|
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{relate?.categoryName}</span>
|
||||||
<h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{relate?.title}</h1>
|
<h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{relate?.title}</h1>
|
||||||
|
|
|
||||||
|
|
@ -40,6 +40,23 @@ const Indeks: React.FC = () => {
|
||||||
setIndeksData(response?.data?.data?.content);
|
setIndeksData(response?.data?.data?.content);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const shimmer = (w: number, h: number) => `
|
||||||
|
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g">
|
||||||
|
<stop stop-color="#bcbcbd" offset="20%" />
|
||||||
|
<stop stop-color="#f9fafb" offset="50%" />
|
||||||
|
<stop stop-color="#bcbcbd" offset="70%" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="${w}" height="${h}" fill="#bcbcbd" />
|
||||||
|
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
|
||||||
|
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
|
||||||
|
</svg>`;
|
||||||
|
|
||||||
|
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="px-4 lg:px-14">
|
<div className="px-4 lg:px-14">
|
||||||
{/* Hero Left */}
|
{/* Hero Left */}
|
||||||
|
|
@ -54,7 +71,7 @@ const Indeks: React.FC = () => {
|
||||||
(indeks: any, index: number) =>
|
(indeks: any, index: number) =>
|
||||||
index == count && (
|
index == count && (
|
||||||
<div key={indeks?.id} className="relative h-[310px] lg:h-[435px]">
|
<div key={indeks?.id} className="relative h-[310px] lg:h-[435px]">
|
||||||
<Image width={2560} height={1440} src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg object-cover" />
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg object-cover" />
|
||||||
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
|
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
|
||||||
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{indeks?.categoryName}</span>
|
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{indeks?.categoryName}</span>
|
||||||
<Link href={`/indeks/detail/${indeks?.slug}`}>
|
<Link href={`/indeks/detail/${indeks?.slug}`}>
|
||||||
|
|
@ -92,7 +109,7 @@ const Indeks: React.FC = () => {
|
||||||
(indeksRight: any, index: number) =>
|
(indeksRight: any, index: number) =>
|
||||||
(index == count + 1 || index == count + 2) && (
|
(index == count + 1 || index == count + 2) && (
|
||||||
<div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]">
|
<div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]">
|
||||||
<Image width={1920} height={1080} src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg " />
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1920} height={1080} src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg " />
|
||||||
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
|
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
|
||||||
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{indeksRight?.categoryName}</span>
|
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{indeksRight?.categoryName}</span>
|
||||||
<Link href={`/indeks/detail/${indeksRight?.slug}`}>
|
<Link href={`/indeks/detail/${indeksRight?.slug}`}>
|
||||||
|
|
@ -149,7 +166,7 @@ const Indeks: React.FC = () => {
|
||||||
(indeksBottom: any, index: number) =>
|
(indeksBottom: any, index: number) =>
|
||||||
index < 3 && (
|
index < 3 && (
|
||||||
<div key={indeksBottom?.id} className="flex flex-col md:flex-row items-start p-4 gap-4">
|
<div key={indeksBottom?.id} className="flex flex-col md:flex-row items-start p-4 gap-4">
|
||||||
<Image width={2560} height={1440} src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]" />
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]" />
|
||||||
<div className="flex flex-col justify-between w-full">
|
<div className="flex flex-col justify-between w-full">
|
||||||
<p className="text-sm">{indeksBottom?.date}</p>
|
<p className="text-sm">{indeksBottom?.date}</p>
|
||||||
<Link href={`/indeks/detail/${indeksBottom?.slug}`} className="text-2xl font-semibold text-gray-800 dark:text-white">
|
<Link href={`/indeks/detail/${indeksBottom?.slug}`} className="text-2xl font-semibold text-gray-800 dark:text-white">
|
||||||
|
|
|
||||||
|
|
@ -417,6 +417,22 @@ const DetailVideo = () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const shimmer = (w: number, h: number) => `
|
||||||
|
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g">
|
||||||
|
<stop stop-color="#bcbcbd" offset="20%" />
|
||||||
|
<stop stop-color="#f9fafb" offset="50%" />
|
||||||
|
<stop stop-color="#bcbcbd" offset="70%" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="${w}" height="${h}" fill="#bcbcbd" />
|
||||||
|
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
|
||||||
|
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
|
||||||
|
</svg>`;
|
||||||
|
|
||||||
|
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="px-4 md:px-24 py-4">
|
<div className="px-4 md:px-24 py-4">
|
||||||
|
|
@ -596,7 +612,7 @@ const DetailVideo = () => {
|
||||||
{listSuggestion?.map((data: any) => (
|
{listSuggestion?.map((data: any) => (
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<div className="flex flex-row mt-2 px-4 lg:px-14">
|
<div className="flex flex-row mt-2 px-4 lg:px-14">
|
||||||
<Image width={1080} height={1080} src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1080} height={1080} src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
|
||||||
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
|
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
|
||||||
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
||||||
{Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
|
{Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
|
||||||
|
|
@ -645,7 +661,7 @@ const DetailVideo = () => {
|
||||||
? data.children?.map((child1: any) => (
|
? data.children?.map((child1: any) => (
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
|
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
|
||||||
<Image width={1080} height={1080} src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1080} height={1080} src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
|
||||||
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
|
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
|
||||||
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
||||||
{" "}
|
{" "}
|
||||||
|
|
@ -699,7 +715,7 @@ const DetailVideo = () => {
|
||||||
? child1.children?.map((child2: any) => (
|
? child1.children?.map((child2: any) => (
|
||||||
<div className="">
|
<div className="">
|
||||||
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
|
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
|
||||||
<Image width={1080} height={1080} src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1080} height={1080} src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
|
||||||
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
|
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
|
||||||
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
||||||
{" "}
|
{" "}
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@ import Navbar from "@/components/landing-page/navbar";
|
||||||
import { ReactLenis } from "@studio-freight/react-lenis";
|
import { ReactLenis } from "@studio-freight/react-lenis";
|
||||||
import MountedProvider from "@/providers/mounted.provider";
|
import MountedProvider from "@/providers/mounted.provider";
|
||||||
import NewsTicker from "@/components/landing-page/news-tickers";
|
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 } }) => {
|
const Home = ({ params: { locale } }: { params: { locale: string } }) => {
|
||||||
return (
|
return (
|
||||||
|
|
@ -25,8 +26,9 @@ const Home = ({ params: { locale } }: { params: { locale: string } }) => {
|
||||||
<NewContent group="mabes" type="popular" />
|
<NewContent group="mabes" type="popular" />
|
||||||
{/* <PopularContent /> */}
|
{/* <PopularContent /> */}
|
||||||
<ContentCategory group="mabes" />
|
<ContentCategory group="mabes" />
|
||||||
<Coverage />
|
{/* <Coverage /> */}
|
||||||
<Division />
|
{/* <Division /> */}
|
||||||
|
<AreaCoverageWorkUnits />
|
||||||
<Footer />
|
<Footer />
|
||||||
<NewsTicker />
|
<NewsTicker />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||||||
|
import Image from "next/image";
|
||||||
|
import Coverage from "./coverage";
|
||||||
|
import Division from "./division";
|
||||||
|
|
||||||
|
const AreaCoverageWorkUnits = () => {
|
||||||
|
return (
|
||||||
|
<div className="mx-auto px-4 lg:px-12 py-6">
|
||||||
|
<h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
|
||||||
|
Liputan <span className="text-[#bb3523]">Wilayah</span> & <span className="text-[#bb3523]">Satker</span>
|
||||||
|
</h2>
|
||||||
|
<div className="h-1 w-[250px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
|
||||||
|
<div className="flex flex-col justify-center lg:flex-row gap-8">
|
||||||
|
{/* POLDA */}
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 px-24 border-2 border-transparent hover:border-[#bb3523] transition-all duration-300">
|
||||||
|
<Image width={1920} height={1080} alt="indo" src="/assets/indo.png" className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] transition-transform duration-300" />
|
||||||
|
<p className="text-base font-bold">Polda Jajaran</p>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent size="md">
|
||||||
|
<DialogHeader className="flex flex-col justify-center">
|
||||||
|
<DialogTitle>
|
||||||
|
<p className="text-center">Polda Jajaran</p>
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogTitle>
|
||||||
|
<div className="h-1 w-[150px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
|
||||||
|
</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<Coverage />
|
||||||
|
<div className="text-right mt-4">
|
||||||
|
<DialogClose asChild>
|
||||||
|
<button className="text-[#bb3523] font-bold">Tutup</button>
|
||||||
|
</DialogClose>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* SATKER */}
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 px-24 border-2 border-transparent hover:border-[#bb3523] transition-all duration-300">
|
||||||
|
<Image width={1920} height={1080} alt="polri" src="/assets/logo-polri.png" className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] transition-transform duration-300" />
|
||||||
|
<p className="text-base font-bold">Satuan Kerja Polri</p>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent size="md">
|
||||||
|
<DialogHeader className="flex flex-col justify-center">
|
||||||
|
<DialogTitle>
|
||||||
|
<p className="text-center">Satuan Kerja Polri</p>
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogTitle>
|
||||||
|
<div className="h-1 w-[150px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
|
||||||
|
</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<Division />
|
||||||
|
<div className="text-right mt-4">
|
||||||
|
<DialogClose asChild>
|
||||||
|
<button className="text-[#bb3523] font-bold">Tutup</button>
|
||||||
|
</DialogClose>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AreaCoverageWorkUnits;
|
||||||
|
|
@ -33,6 +33,23 @@ const ContentCategory = (props: { group?: string }) => {
|
||||||
const [seeAllValue, setSeeAllValue] = useState(false);
|
const [seeAllValue, setSeeAllValue] = useState(false);
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
|
|
||||||
|
const shimmer = (w: number, h: number) => `
|
||||||
|
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g">
|
||||||
|
<stop stop-color="#bcbcbd" offset="20%" />
|
||||||
|
<stop stop-color="#f9fafb" offset="50%" />
|
||||||
|
<stop stop-color="#bcbcbd" offset="70%" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="${w}" height="${h}" fill="#bcbcbd" />
|
||||||
|
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
|
||||||
|
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
|
||||||
|
</svg>`;
|
||||||
|
|
||||||
|
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mx-auto px-4 lg:px-24 py-10 max-w-screen-2xl ">
|
<div className="mx-auto px-4 lg:px-24 py-10 max-w-screen-2xl ">
|
||||||
<Reveal>
|
<Reveal>
|
||||||
|
|
@ -56,7 +73,7 @@ const ContentCategory = (props: { group?: string }) => {
|
||||||
!seeAllValue ? (
|
!seeAllValue ? (
|
||||||
index < 4 ? (
|
index < 4 ? (
|
||||||
<Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
<Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||||
<Image alt="category" width={2560} height={1440} src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} alt="category" width={2560} height={1440} src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
|
||||||
<div className="absolute bottom-0 rounded-lg left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] text-white p-2">
|
<div className="absolute bottom-0 rounded-lg left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] text-white p-2">
|
||||||
<h3 className="text-sm font-semibold truncate">{category?.name}</h3>
|
<h3 className="text-sm font-semibold truncate">{category?.name}</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -66,7 +83,7 @@ const ContentCategory = (props: { group?: string }) => {
|
||||||
)
|
)
|
||||||
) : (
|
) : (
|
||||||
<Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
<Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||||
<Image alt="category" width={2560} height={1440} src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} alt="category" width={2560} height={1440} src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
|
||||||
<div className="absolute bottom-0 left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] rounded-lg text-white p-2">
|
<div className="absolute bottom-0 left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] rounded-lg text-white p-2">
|
||||||
<h3 className="text-sm font-semibold truncate">{category?.name}</h3>
|
<h3 className="text-sm font-semibold truncate">{category?.name}</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ import { Icon } from "@iconify/react/dist/iconify.js";
|
||||||
import { Link } from "@/i18n/routing";
|
import { Link } from "@/i18n/routing";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
import { usePathname } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
const regions = [
|
const regions = [
|
||||||
{ name: "Polda Metro Jaya", slug: "metro-jaya", logo: "/assets/polda/polda-metro.png" },
|
{ name: "Polda Metro Jaya", slug: "metro-jaya", logo: "/assets/polda/polda-metro.png" },
|
||||||
|
|
@ -30,7 +31,7 @@ const regions = [
|
||||||
{ name: "Polda Kalimantan Tengah", slug: "kalimantan-tengah", logo: "/assets/polda/polda-kalteng.png" },
|
{ name: "Polda Kalimantan 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 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 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 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 Sulawesi Utara", slug: "sulawesi-utara", logo: "/assets/polda/polda-sulut.png" },
|
||||||
{ name: "Polda Gorontalo", slug: "gorontalo", logo: "/assets/polda/polda-gorontalo.png" },
|
{ name: "Polda Gorontalo", slug: "gorontalo", logo: "/assets/polda/polda-gorontalo.png" },
|
||||||
|
|
@ -59,81 +60,72 @@ const Coverage: React.FC = () => {
|
||||||
setFilteredList(filtered);
|
setFilteredList(filtered);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
const shimmer = (w: number, h: number) => `
|
||||||
<div className="max-w-screen-xl mx-auto px-4 lg:px-12 py-6">
|
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
<Reveal>
|
<defs>
|
||||||
{/* Header */}
|
<linearGradient id="g">
|
||||||
<h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
|
<stop stop-color="#bcbcbd" offset="20%" />
|
||||||
{pathname?.split("/")[1] == "in" ? (
|
<stop stop-color="#f9fafb" offset="50%" />
|
||||||
<>
|
<stop stop-color="#bcbcbd" offset="70%" />
|
||||||
{t("coverageOnly")} <span className="text-[#bb3523]">{t("area")}</span>{" "}
|
</linearGradient>
|
||||||
</>
|
</defs>
|
||||||
) : (
|
<rect width="${w}" height="${h}" fill="#bcbcbd" />
|
||||||
<>
|
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
|
||||||
{t("area")}
|
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
|
||||||
<span className="text-[#bb3523]">{t("coverageOnly")}</span>
|
</svg>`;
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
{/* <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
|
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
{/* Header */}
|
||||||
|
{/* <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
|
||||||
|
{pathname?.split("/")[1] == "in" ? (
|
||||||
|
<>
|
||||||
|
{t("coverageOnly")} <span className="text-[#bb3523]">{t("area")}</span>{" "}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{t("area")}
|
||||||
|
<span className="text-[#bb3523]">{t("coverageOnly")}</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</h2> */}
|
||||||
|
|
||||||
|
{/* <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
|
||||||
Liputan <span className="text-[#bb3523]">Wilayah</span>
|
Liputan <span className="text-[#bb3523]">Wilayah</span>
|
||||||
</h2> */}
|
</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 */}
|
{/* Pencarian */}
|
||||||
<div className="flex items-center justify-center gap-4 mb-6">
|
{/* <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" />
|
<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">
|
<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")}
|
{t("searchRegional")}
|
||||||
<Icon icon="ri:arrow-right-s-line" fontSize={20} />
|
<Icon icon="ri:arrow-right-s-line" fontSize={20} />
|
||||||
</button>
|
</button>
|
||||||
|
</div> */}
|
||||||
|
|
||||||
|
{/* Grid Wilayah */}
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6 overflow-y-auto px-4 max-h-[60vh]">
|
||||||
|
{filteredList?.map((region: any) => (
|
||||||
|
<Link key={region.slug} href={`/polda/${region.slug}`} className="flex flex-col items-center text-center p-3 border rounded-lg shadow-md hover:shadow-lg transition-all">
|
||||||
|
<div className="mb-1 flex items-center justify-center">
|
||||||
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1920} height={1080} src={region.logo} alt={region.name} className="w-14 h-14 object-contain" />
|
||||||
|
</div>
|
||||||
|
<p className="text-xs font-semibold">{region.name}</p>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* {filteredList && filteredList.length > 9 && (
|
||||||
|
<div className="flex justify-center py-5">
|
||||||
|
<Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
|
||||||
|
{seeAllValue ? t("seeLess") : t("seeMore")}
|
||||||
|
</Button>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ import { Icon } from "@iconify/react/dist/iconify.js";
|
||||||
import { Link } from "@/i18n/routing";
|
import { Link } from "@/i18n/routing";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
import { usePathname } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
const regions = [
|
const regions = [
|
||||||
{ name: "SIBER", slug: "siber", logo: "/assets/satker/siber.png" },
|
{ name: "SIBER", slug: "siber", logo: "/assets/satker/siber.png" },
|
||||||
|
|
@ -62,11 +63,27 @@ const Division = () => {
|
||||||
setFilteredList(filtered);
|
setFilteredList(filtered);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const shimmer = (w: number, h: number) => `
|
||||||
|
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g">
|
||||||
|
<stop stop-color="#bcbcbd" offset="20%" />
|
||||||
|
<stop stop-color="#f9fafb" offset="50%" />
|
||||||
|
<stop stop-color="#bcbcbd" offset="70%" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="${w}" height="${h}" fill="#bcbcbd" />
|
||||||
|
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
|
||||||
|
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
|
||||||
|
</svg>`;
|
||||||
|
|
||||||
|
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="max-w-screen-xl mx-auto px-4 lg:px-12 py-6">
|
<div className="mx-auto px-4 w-full">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<Reveal>
|
{/* <Reveal> */}
|
||||||
<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">
|
||||||
{pathname?.split("/")[1] == "in" ? (
|
{pathname?.split("/")[1] == "in" ? (
|
||||||
<>
|
<>
|
||||||
{t("coverageOnly")} <span className="text-[#bb3523]">{t("division")}</span>{" "}
|
{t("coverageOnly")} <span className="text-[#bb3523]">{t("division")}</span>{" "}
|
||||||
|
|
@ -77,54 +94,37 @@ const Division = () => {
|
||||||
<span className="text-[#bb3523]">{t("coverageOnly")}</span>
|
<span className="text-[#bb3523]">{t("coverageOnly")}</span>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</h2>
|
</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 */}
|
{/* Pencarian */}
|
||||||
<div className="flex items-center justify-center gap-4 mb-6">
|
{/* <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" />
|
<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">
|
<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")}
|
{t("searchDivision")}
|
||||||
<Icon icon="ri:arrow-right-s-line" fontSize={20} />
|
<Icon icon="ri:arrow-right-s-line" fontSize={20} />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div> */}
|
||||||
|
|
||||||
{/* Grid Wilayah */}
|
{/* Grid Wilayah */}
|
||||||
<div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-6">
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6 px-4 overflow-y-auto max-h-[60vh]">
|
||||||
{filteredList && filteredList.length > 0 ? (
|
{filteredList?.map((region: any) => (
|
||||||
filteredList.map((region, index) =>
|
<Link href={`/satker/${region.slug}`} className="flex flex-col items-center text-center p-3 border rounded-lg shadow-md hover:shadow-lg transition-all">
|
||||||
!seeAllValue ? (
|
<div className="mb-1 flex items-center justify-center">
|
||||||
index < 7 ? (
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1920} height={1080} src={region.logo} alt={region.name} className="w-14 h-14 object-contain" />
|
||||||
<Link href={`/satker/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
|
</div>
|
||||||
<div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
|
<p className="text-xs font-semibold">{region.name}</p>
|
||||||
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
|
</Link>
|
||||||
</div>
|
))}
|
||||||
<p className="text-md font-semibold">{region.name}</p>
|
</div>
|
||||||
</Link>
|
{/* {filteredList && filteredList.length > 9 && (
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)
|
|
||||||
) : (
|
|
||||||
<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 && (
|
|
||||||
<div className="flex justify-center py-5">
|
<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]">
|
<Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
|
||||||
{seeAllValue ? t("seeLess") : t("seeMore")}
|
{seeAllValue ? t("seeLess") : t("seeMore")}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)} */}
|
||||||
</Reveal>
|
{/* </Reveal> */}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { formatDateToIndonesian, textEllipsis } from "@/utils/globals";
|
import { formatDateToIndonesian, shimmer, toBase64 } from "@/utils/globals";
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import "swiper/css/bundle";
|
import "swiper/css/bundle";
|
||||||
import "swiper/css/navigation";
|
import "swiper/css/navigation";
|
||||||
|
|
@ -52,7 +52,23 @@ const Hero: React.FC = () => {
|
||||||
console.log(response);
|
console.log(response);
|
||||||
setHeroData(response?.data?.data?.content);
|
setHeroData(response?.data?.data?.content);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const shimmer = (w: number, h: number) => `
|
||||||
|
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g">
|
||||||
|
<stop stop-color="#bcbcbd" offset="20%" />
|
||||||
|
<stop stop-color="#f9fafb" offset="50%" />
|
||||||
|
<stop stop-color="#bcbcbd" offset="70%" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="${w}" height="${h}" fill="#bcbcbd" />
|
||||||
|
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
|
||||||
|
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
|
||||||
|
</svg>`;
|
||||||
|
|
||||||
|
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
|
||||||
|
|
||||||
return (
|
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">
|
<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 */}
|
{/* Section Gambar Utama */}
|
||||||
|
|
@ -70,13 +86,21 @@ const Hero: React.FC = () => {
|
||||||
{heroData?.map((list: any) => (
|
{heroData?.map((list: any) => (
|
||||||
<CarouselItem key={list?.id}>
|
<CarouselItem key={list?.id}>
|
||||||
<div className="relative h-[310px] lg:h-[420px]">
|
<div className="relative h-[310px] lg:h-[420px]">
|
||||||
<Image src={list?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[850px] h-[310px] lg:h-[420px] rounded-lg object-cover" />
|
<Image
|
||||||
|
src={list?.thumbnailLink}
|
||||||
|
alt="gambar-utama"
|
||||||
|
width={1920}
|
||||||
|
height={1080}
|
||||||
|
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
|
||||||
|
className="w-full lg:w-[850px] h-[310px] lg:h-[420px] rounded-lg object-cover"
|
||||||
|
/>
|
||||||
|
|
||||||
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-black dark:text-white p-4 rounded-b-lg">
|
<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>
|
<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}`}>
|
<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>
|
</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"}|{" "}
|
{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">
|
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
||||||
<path
|
<path
|
||||||
|
|
@ -141,7 +165,7 @@ const Hero: React.FC = () => {
|
||||||
{heroData?.map((item: any) => (
|
{heroData?.map((item: any) => (
|
||||||
<li key={item?.id} className="flex gap-4 flex-row lg:w-full ">
|
<li key={item?.id} className="flex gap-4 flex-row lg:w-full ">
|
||||||
<div className="flex-shrink-0 w-24 rounded-lg">
|
<div className="flex-shrink-0 w-24 rounded-lg">
|
||||||
<Image width={720} height={480} src={item?.thumbnailLink} alt={item?.title} className="w-full h-[73px] object-cover rounded-lg" />
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={720} height={480} src={item?.thumbnailLink} alt={item?.title} className="w-full h-[73px] object-cover rounded-lg" />
|
||||||
</div>
|
</div>
|
||||||
<div className="w-[280px] lg:w-auto">
|
<div className="w-[280px] lg:w-auto">
|
||||||
<span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">{item?.categoryName}</span>
|
<span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">{item?.categoryName}</span>
|
||||||
|
|
|
||||||
|
|
@ -54,6 +54,22 @@ const NewContent = (props: { group: string; type: string }) => {
|
||||||
setNewContent(response?.data?.data?.content);
|
setNewContent(response?.data?.data?.content);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const shimmer = (w: number, h: number) => `
|
||||||
|
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g">
|
||||||
|
<stop stop-color="#bcbcbd" offset="20%" />
|
||||||
|
<stop stop-color="#f9fafb" offset="50%" />
|
||||||
|
<stop stop-color="#bcbcbd" offset="70%" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="${w}" height="${h}" fill="#bcbcbd" />
|
||||||
|
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
|
||||||
|
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
|
||||||
|
</svg>`;
|
||||||
|
|
||||||
|
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="px-4 lg:px-16 py-4">
|
<div className="px-4 lg:px-16 py-4">
|
||||||
<Reveal>
|
<Reveal>
|
||||||
|
|
@ -120,7 +136,14 @@ const NewContent = (props: { group: string; type: string }) => {
|
||||||
{newContent?.map((image: any) => (
|
{newContent?.map((image: any) => (
|
||||||
<CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/3">
|
<CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/3">
|
||||||
<div onClick={() => router.push(prefixPath + `/image/detail/${image?.slug}`)} className="cursor-pointer relative group overflow-hidden shadow-md hover:shadow-lg">
|
<div onClick={() => router.push(prefixPath + `/image/detail/${image?.slug}`)} className="cursor-pointer relative group overflow-hidden shadow-md hover:shadow-lg">
|
||||||
<Image width={2560} height={1440} alt="image" src={image?.thumbnailLink} className="w-full rounded-lg h-48 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
|
<Image
|
||||||
|
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
|
||||||
|
width={2560}
|
||||||
|
height={1440}
|
||||||
|
alt="image"
|
||||||
|
src={image?.thumbnailLink}
|
||||||
|
className="w-full rounded-lg h-48 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300"
|
||||||
|
/>
|
||||||
<div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
|
<div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
|
||||||
<p className="text-sm lg:text-base mb-2 font-semibold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{image?.title}</p>
|
<p className="text-sm lg:text-base mb-2 font-semibold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{image?.title}</p>
|
||||||
<p className="flex flex-row items-center text-[10px] gap-2">
|
<p className="flex flex-row items-center text-[10px] gap-2">
|
||||||
|
|
@ -184,7 +207,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
||||||
{newContent?.map((video: any) => (
|
{newContent?.map((video: any) => (
|
||||||
<CarouselItem key={video?.id} className="md:basis-1/2 lg:basis-1/3">
|
<CarouselItem key={video?.id} className="md:basis-1/2 lg:basis-1/3">
|
||||||
<div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
<div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||||
<Image alt="video" width={2560} height={1440} src={video?.thumbnailLink} className="w-full h-40 lg:h-60 object-cover rounded-lg group-hover:scale-100 transition-transform duration-300" />
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} alt="video" width={2560} height={1440} src={video?.thumbnailLink} className="w-full h-40 lg:h-60 object-cover rounded-lg group-hover:scale-100 transition-transform duration-300" />
|
||||||
<div className="absolute bottom-0 rounded-lg left-0 right-0 border-l-4 border-[#bb3523] bg-gray-600 text-white p-2">
|
<div className="absolute bottom-0 rounded-lg left-0 right-0 border-l-4 border-[#bb3523] bg-gray-600 text-white p-2">
|
||||||
<p className="text-sm lg:text-base mb-2 font-semibold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{video?.title}</p>
|
<p className="text-sm lg:text-base mb-2 font-semibold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{video?.title}</p>
|
||||||
<p className="flex flex-row items-center text-sm gap-2">
|
<p className="flex flex-row items-center text-sm gap-2">
|
||||||
|
|
|
||||||
|
|
@ -47,7 +47,7 @@ export default function NewsTicker() {
|
||||||
}, [article?.length]);
|
}, [article?.length]);
|
||||||
|
|
||||||
return (
|
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%]">
|
<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")}
|
<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>
|
<div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clip-path-triangle"></div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
import Image from "next/image";
|
||||||
|
import ViewSource from "../view-source/view-source";
|
||||||
|
|
||||||
|
|
||||||
|
const shimmer = (w: number, h: number) => `
|
||||||
|
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g">
|
||||||
|
<stop stop-color="#333" offset="20%" />
|
||||||
|
<stop stop-color="#222" offset="50%" />
|
||||||
|
<stop stop-color="#333" offset="70%" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="${w}" height="${h}" fill="#333" />
|
||||||
|
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
|
||||||
|
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
|
||||||
|
</svg>`;
|
||||||
|
|
||||||
|
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
|
||||||
|
|
||||||
|
const Shimmer = () => (
|
||||||
|
<div>
|
||||||
|
<ViewSource pathname="app/shimmer/page.tsx" />
|
||||||
|
<h1>Image Component With Shimmer Data URL</h1>
|
||||||
|
<Image
|
||||||
|
alt="Mountains"
|
||||||
|
src="/mountains.jpg"
|
||||||
|
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
|
||||||
|
width={700}
|
||||||
|
height={475}
|
||||||
|
style={{
|
||||||
|
maxWidth: "100%",
|
||||||
|
height: "auto",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default Shimmer;
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
.svg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.arm {
|
||||||
|
transform-origin: 130px 106px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg:hover .arm {
|
||||||
|
animation: wave 560ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes wave {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
transform: rotate(-25deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
transform: rotate(10deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
60% {
|
||||||
|
transform: rotate(-25deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
80% {
|
||||||
|
transform: rotate(10deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
.svg:hover .arm {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg:hover .arm {
|
||||||
|
animation: wave 560ms ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import styles from "./view-source.module.css";
|
||||||
|
|
||||||
|
type ViewSourceProps = {
|
||||||
|
pathname: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const ViewSource = ({ pathname }: ViewSourceProps) => (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 250 250" fill="#151513" className={styles.svg}>
|
||||||
|
<a title="View Source" href={`https://github.com/vercel/next.js/blob/canary/examples/image-component/${pathname}`}>
|
||||||
|
<path d="M0 0l115 115h15l12 27 108 108V0z" fill="#fff" />
|
||||||
|
<path className={styles.arm} d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16" />
|
||||||
|
<path d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z" />
|
||||||
|
</a>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default ViewSource;
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
|
|
@ -137,3 +137,19 @@ export function checkMaliciousText(str: any) {
|
||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const shimmer = (w: number, h: number) => `
|
||||||
|
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g">
|
||||||
|
<stop stop-color="#333" offset="20%" />
|
||||||
|
<stop stop-color="#222" offset="50%" />
|
||||||
|
<stop stop-color="#333" offset="70%" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="${w}" height="${h}" fill="#333" />
|
||||||
|
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
|
||||||
|
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
|
||||||
|
</svg>`;
|
||||||
|
|
||||||
|
export const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue