188 lines
9.0 KiB
TypeScript
188 lines
9.0 KiB
TypeScript
"use client";
|
|
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { Link } from "@/i18n/routing";
|
|
import { getIndeksData } from "@/service/landing/landing";
|
|
import { formatDateToIndonesian } from "@/utils/globals";
|
|
import Image from "next/image";
|
|
import { usePathname } from "next/navigation";
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
const Indeks: React.FC = () => {
|
|
const pathname = usePathname();
|
|
const [isLoading, setIsLoading] = useState<any>(true);
|
|
const [indeksData, setIndeksData] = useState<any>();
|
|
let count: number = 0;
|
|
useEffect(() => {
|
|
if (indeksData) {
|
|
const intervalId = setInterval(() => {
|
|
count = (count + 1) % indeksData.length;
|
|
}, 5000);
|
|
|
|
return () => clearInterval(intervalId);
|
|
}
|
|
}, [indeksData]);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setIsLoading(false);
|
|
}, 3000);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
initFetch();
|
|
}, []);
|
|
const initFetch = async () => {
|
|
const response = await getIndeksData();
|
|
console.log(response);
|
|
setIndeksData(response?.data?.data?.content);
|
|
};
|
|
|
|
const shimmer = (w: number, h: number) => `
|
|
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<defs>
|
|
<linearGradient id="g">
|
|
<stop stop-color="#bcbcbd" offset="20%" />
|
|
<stop stop-color="#f9fafb" offset="50%" />
|
|
<stop stop-color="#bcbcbd" offset="70%" />
|
|
</linearGradient>
|
|
</defs>
|
|
<rect width="${w}" height="${h}" fill="#bcbcbd" />
|
|
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
|
|
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
|
|
</svg>`;
|
|
|
|
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
|
|
|
|
|
|
return (
|
|
<div className="px-4 lg:px-14">
|
|
{/* Hero Left */}
|
|
<div className="flex flex-col lg:flex-row items-start gap-8 px-4 lg:px-10 py-4 mx-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>
|
|
) : (
|
|
<div className="lg:w-[60%] w-full lg:h-full">
|
|
{indeksData?.map(
|
|
(indeks: any, index: number) =>
|
|
index == count && (
|
|
<div key={indeks?.id} className="relative h-[310px] lg:h-[435px]">
|
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg object-cover" />
|
|
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
|
|
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{indeks?.categoryName}</span>
|
|
<Link href={`/indeks/detail/${indeks?.slug}`}>
|
|
<h2 className="text-2xl font-bold mt-2">{indeks?.title}</h2>
|
|
</Link>
|
|
<p className="text-xs flex flex-row items-center gap-1 mt-1">
|
|
{formatDateToIndonesian(new Date(indeks?.createdAt))} {indeks?.timezone ? indeks?.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>{" "}
|
|
{indeks?.clickCount}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Hero Right */}
|
|
<div className="lg:w-[40%] w-full space-y-2">
|
|
{isLoading ? (
|
|
<>
|
|
<div className="flex flex-col space-y-3 w-full justify-center items-center gap-3">
|
|
<Skeleton className="h-[200px] w-full lg:w-[400px] rounded-xl" />
|
|
<Skeleton className="h-[200px] w-full lg:w-[400px] rounded-xl" />
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
{indeksData?.map(
|
|
(indeksRight: any, index: number) =>
|
|
(index == count + 1 || index == count + 2) && (
|
|
<div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]">
|
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1920} height={1080} src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg " />
|
|
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
|
|
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{indeksRight?.categoryName}</span>
|
|
<Link href={`/indeks/detail/${indeksRight?.slug}`}>
|
|
<h2 className="text-xl font-bold mt-2">{indeksRight?.title}</h2>
|
|
</Link>
|
|
<p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
|
|
{formatDateToIndonesian(new Date(indeksRight?.createdAt))} {indeksRight?.timezone ? indeksRight?.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>{" "}
|
|
{indeksRight?.clickCount}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom */}
|
|
<div className="px-4 lg:px-7 py-4">
|
|
{isLoading ? (
|
|
<div className="flex flex-col space-y-3 w-full gap-10">
|
|
<div className="flex flex-col lg:flex-row gap-5">
|
|
<Skeleton className="h-[300px] w-full lg:w-[500px] rounded-lg" />
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-[250px]" />
|
|
<Skeleton className="h-4 w-[200px]" />
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col lg:flex-row gap-5">
|
|
<Skeleton className="h-[300px] w-full lg:w-[500px] rounded-lg" />
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-[250px]" />
|
|
<Skeleton className="h-4 w-[200px]" />
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col lg:flex-row gap-5">
|
|
<Skeleton className="h-[300px] w-full lg:w-[500px] rounded-lg" />
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-[250px]" />
|
|
<Skeleton className="h-4 w-[200px]" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col gap-4">
|
|
{indeksData?.map(
|
|
(indeksBottom: any, index: number) =>
|
|
index < 3 && (
|
|
<div key={indeksBottom?.id} className="flex flex-col md:flex-row items-start p-4 gap-4">
|
|
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]" />
|
|
<div className="flex flex-col justify-between w-full">
|
|
<p className="text-sm">{indeksBottom?.date}</p>
|
|
<Link href={`/indeks/detail/${indeksBottom?.slug}`} className="text-2xl font-semibold text-gray-800 dark:text-white">
|
|
{indeksBottom?.title}
|
|
</Link>
|
|
<p className="text-sm text-gray-600 dark:text-white mt-2">{indeksBottom?.description}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Indeks;
|