742 lines
28 KiB
TypeScript
742 lines
28 KiB
TypeScript
import { formatDateToIndonesian, shimmer, toBase64 } from "@/utils/globals";
|
|
import React, { useEffect, useState } from "react";
|
|
import "swiper/css/bundle";
|
|
import "swiper/css/navigation";
|
|
import { getHeroData } from "@/service/landing/landing";
|
|
import Link from "next/link";
|
|
import { useParams, usePathname, useRouter } from "next/navigation";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
CarouselNext,
|
|
CarouselPrevious,
|
|
} from "@/components/ui/carousel";
|
|
import { Skeleton } from "../ui/skeleton";
|
|
import Image from "next/image";
|
|
import Cookies from "js-cookie";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "../ui/card";
|
|
import { Label } from "../ui/label";
|
|
import { Input } from "../ui/input";
|
|
import { Button } from "../ui/button";
|
|
import { Textarea } from "../ui/textarea";
|
|
import { Checkbox } from "../ui/checkbox";
|
|
import {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "../ui/dialog";
|
|
import { Autoplay, Pagination } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import "swiper/css";
|
|
import "swiper/css/pagination";
|
|
|
|
const HeroModal = ({ onClose }: { onClose: () => void }) => {
|
|
const [heroData, setHeroData] = useState<any>();
|
|
const params = useParams();
|
|
const locale = params?.locale;
|
|
|
|
useEffect(() => {
|
|
async function fetchCategories() {
|
|
const url = "https://netidhub.com/api/csrf";
|
|
|
|
try {
|
|
const response = await fetch(url);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
return data;
|
|
} catch (error) {
|
|
console.error("Fetch error: ", error);
|
|
}
|
|
}
|
|
|
|
fetchCategories();
|
|
initFetch();
|
|
}, []);
|
|
|
|
const initFetch = async () => {
|
|
const response = await getHeroData();
|
|
console.log(response);
|
|
setHeroData(response?.data?.data?.content);
|
|
};
|
|
return (
|
|
<div className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50">
|
|
<div className="relative dark:bg-gray-900 rounded-lg w-[90%] md:w-[600px] p-4 shadow-none">
|
|
<Swiper
|
|
pagination={{ dynamicBullets: true }}
|
|
modules={[Pagination, Autoplay]}
|
|
className="mySwiper w-full"
|
|
>
|
|
{heroData?.map((list: any, index: number) => (
|
|
<SwiperSlide key={list?.id}>
|
|
<div className="relative h-[310px] lg:h-[420px]">
|
|
<button
|
|
onClick={onClose}
|
|
className="absolute top-3 right-3 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white"
|
|
>
|
|
✕
|
|
</button>
|
|
<Image
|
|
src={list?.thumbnailLink}
|
|
alt="gambar-utama"
|
|
width={1920}
|
|
height={1080}
|
|
placeholder={`data:image/svg+xml;base64,${toBase64(
|
|
shimmer(700, 475)
|
|
)}`}
|
|
className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover"
|
|
/>
|
|
|
|
<div className="absolute bottom-0 left-0 right-0 bg-black/30 backdrop-brightness-50 text-white pb-4 px-4 pt-8 rounded-bl-2xl rounded-tr-2xl mx-3 mb-2">
|
|
<div className="absolute top-0 left-0 bottom-0 w-2 bg-[#bb3523] rounded-bl-lg"></div>
|
|
<span className="absolute top-0 left-0 mt-2 mb-3 mx-3 bg-[#bb3523] text-white text-xs font-semibold uppercase px-2 py-1 rounded">
|
|
{list?.categoryName || "Liputan Kegiatan"}
|
|
</span>
|
|
|
|
<Link href={`${locale}/image/detail/${list?.slug}`}>
|
|
<h2 className="text-lg leading-tight">{list?.title}</h2>
|
|
</Link>
|
|
|
|
<p className="text-xs flex items-center gap-1 mt-2 opacity-80">
|
|
{formatDateToIndonesian(new Date(list?.createdAt))}{" "}
|
|
{list?.timezone || "WIB"} |{" "}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="1em"
|
|
height="1em"
|
|
viewBox="0 0 24 24"
|
|
className="inline-block"
|
|
>
|
|
<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>
|
|
{list?.clickCount}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
<style jsx global>{`
|
|
.swiper-pagination-bullet {
|
|
background: white !important;
|
|
opacity: 0.7;
|
|
}
|
|
.swiper-pagination-bullet-active {
|
|
background: white !important;
|
|
opacity: 1;
|
|
}
|
|
`}</style>
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const SurveyIntroModal = ({ onNext }: { onNext: () => void }) => {
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
|
<div className="relative bg-white rounded-xl p-6 w-[90%] max-w-md text-center">
|
|
<button
|
|
onClick={onNext}
|
|
className="absolute top-3 right-3 text-gray-500 hover:text-black"
|
|
>
|
|
✕
|
|
</button>
|
|
|
|
<Image
|
|
src="/assets/survey.jpg"
|
|
alt="Survey Illustration"
|
|
width={300}
|
|
height={200}
|
|
className="mx-auto my-4"
|
|
/>
|
|
|
|
<button
|
|
onClick={onNext}
|
|
className="mt-4 bg-red-600 hover:bg-red-700 text-white font-semibold py-3 px-6 rounded w-full"
|
|
>
|
|
Lihat Selengkapnya
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const options = {
|
|
q1: [
|
|
"Setiap hari",
|
|
"Beberapa kali seminggu",
|
|
"Beberapa kali dalam sebulan",
|
|
"Baru pertama kali",
|
|
],
|
|
q2a: ["Sangat baik", "Baik", "Cukup", "Kurang", "Buruk"],
|
|
q2b: ["Sangat mudah", "Mudah", "Cukup", "Sulit", "Sangat sulit"],
|
|
q2c: ["Sangat cepat", "Cepat", "Cukup", "Lambat", "Sangat lambat"],
|
|
q3a: ["Sangat puas", "Puas", "Cukup", "Kurang puas", "Tidak puas"],
|
|
q3b: [
|
|
"Sangat lengkap",
|
|
"Lengkap",
|
|
"Cukup",
|
|
"Kurang lengkap",
|
|
"Tidak lengkap",
|
|
],
|
|
q4: [
|
|
"Sangat membantu",
|
|
"Membantu",
|
|
"Cukup membantu",
|
|
"Kurang membantu",
|
|
"Tidak membantu",
|
|
],
|
|
};
|
|
|
|
const SurveyFormModal = ({ onClose }: { onClose: () => void }) => {
|
|
useEffect(() => {
|
|
document.body.style.overflow = "hidden";
|
|
return () => {
|
|
document.body.style.overflow = "";
|
|
};
|
|
}, []);
|
|
return (
|
|
<Dialog
|
|
open
|
|
onOpenChange={(open) => {
|
|
if (!open) onClose();
|
|
}}
|
|
>
|
|
<DialogContent className="z-50 min-w-max h-[600px] overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-lg font-bold">
|
|
SURVEI KEPUASAN PENGGUNA MEDIAHUB POLRI
|
|
</DialogTitle>
|
|
<DialogDescription className="text-sm">
|
|
Kami menghargai pendapat Anda! Survei ini bertujuan untuk
|
|
meningkatkan kualitas layanan MediaHub Polri. Mohon luangkan waktu
|
|
beberapa menit untuk mengisi survei ini.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4 mt-4">
|
|
{/* 1 */}
|
|
<div>
|
|
<p className="font-medium">
|
|
1. Seberapa sering Anda mengakses MediaHub Polri?
|
|
</p>
|
|
<div className="grid grid-cols-2 gap-2 mt-2">
|
|
{options.q1.map((item, i) => (
|
|
<label key={i} className="flex items-center space-x-2">
|
|
<Checkbox id={`q1-${i}`} />
|
|
<span>{item}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 2 */}
|
|
<div>
|
|
<p className="font-medium">
|
|
2. Bagaimana pengalaman Anda dalam mengakses website ini?
|
|
</p>
|
|
<div className="mt-2 space-y-3">
|
|
<div>
|
|
<p className="text-sm font-medium">
|
|
a) Tampilan dan desain website
|
|
</p>
|
|
<div className="grid grid-cols-3 gap-2 mt-1">
|
|
{options.q2a.map((item, i) => (
|
|
<label key={i} className="flex items-center space-x-2">
|
|
<Checkbox id={`q2a-${i}`} />
|
|
<span>{item}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-sm font-medium">
|
|
b) Kemudahan navigasi (pencarian informasi, menu, dll)
|
|
</p>
|
|
<div className="grid grid-cols-3 gap-2 mt-1">
|
|
{options.q2b.map((item, i) => (
|
|
<label key={i} className="flex items-center space-x-2">
|
|
<Checkbox id={`q2b-${i}`} />
|
|
<span>{item}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-sm font-medium">
|
|
c) Kecepatan akses website
|
|
</p>
|
|
<div className="grid grid-cols-3 gap-2 mt-1">
|
|
{options.q2c.map((item, i) => (
|
|
<label key={i} className="flex items-center space-x-2">
|
|
<Checkbox id={`q2c-${i}`} />
|
|
<span>{item}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 3 */}
|
|
<div>
|
|
<p className="font-medium">
|
|
3. Seberapa puas Anda dengan informasi yang tersedia di MediaHub
|
|
Polri?
|
|
</p>
|
|
<div className="mt-2 space-y-3">
|
|
<div>
|
|
<p className="text-sm font-medium">a) Akurat dan terpercaya</p>
|
|
<div className="grid grid-cols-3 gap-2 mt-1">
|
|
{options.q3a.map((item, i) => (
|
|
<label key={i} className="flex items-center space-x-2">
|
|
<Checkbox id={`q3a-${i}`} />
|
|
<span>{item}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-sm font-medium">
|
|
b) Kelengkapan berita dan informasi
|
|
</p>
|
|
<div className="grid grid-cols-3 gap-2 mt-1">
|
|
{options.q3b.map((item, i) => (
|
|
<label key={i} className="flex items-center space-x-2">
|
|
<Checkbox id={`q3b-${i}`} />
|
|
<span>{item}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 4 */}
|
|
<div>
|
|
<p className="font-medium">
|
|
5. Apakah Anda merasa website ini membantu dalam mendapatkan
|
|
informasi terkait Polri?
|
|
</p>
|
|
<div className="grid grid-cols-2 gap-2 mt-2">
|
|
{options.q4.map((item, i) => (
|
|
<label key={i} className="flex items-center space-x-2">
|
|
<Checkbox id={`q4-${i}`} />
|
|
<span>{item}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 5 */}
|
|
<div>
|
|
<p className="font-medium">
|
|
6. Apa saran atau masukan Anda untuk meningkatkan layanan MediaHub
|
|
Polri?
|
|
</p>
|
|
<Textarea placeholder="Tulis pesan Anda" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-2 mt-6">
|
|
<DialogClose asChild>
|
|
<Button variant="outline">Batal</Button>
|
|
</DialogClose>
|
|
<Button>Kirim</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
const ONE_MONTH = 30 * 24 * 60 * 60 * 1000;
|
|
|
|
const Hero: React.FC = () => {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const params = useParams();
|
|
const locale = params?.locale;
|
|
const [isLoading, setIsLoading] = useState<any>(true);
|
|
const [heroData, setHeroData] = useState<any>();
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [showSurveyModal, setShowSurveyModal] = useState(false);
|
|
const [showFormModal, setShowFormModal] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setIsLoading(false);
|
|
}, 3000);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const roleId = Cookies.get("urie");
|
|
if (!roleId) {
|
|
setShowModal(true);
|
|
}
|
|
initFetch();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const roleId = Cookies.get("urie");
|
|
const lastShown = Cookies.get("surveyLastShown");
|
|
const now = new Date().getTime();
|
|
|
|
if (roleId && roleId !== "2") {
|
|
if (!lastShown || now - parseInt(lastShown) > ONE_MONTH) {
|
|
setShowSurveyModal(true);
|
|
Cookies.set("surveyLastShown", now.toString(), { expires: 30 });
|
|
}
|
|
}
|
|
|
|
initFetch();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
async function fetchCategories() {
|
|
const url = "https://netidhub.com/api/csrf";
|
|
|
|
try {
|
|
const response = await fetch(url);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
return data;
|
|
} catch (error) {
|
|
console.error("Fetch error: ", error);
|
|
}
|
|
}
|
|
|
|
fetchCategories();
|
|
initFetch();
|
|
}, []);
|
|
|
|
const initFetch = async () => {
|
|
const response = await getHeroData();
|
|
console.log(response);
|
|
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 (
|
|
<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="relative">
|
|
{showModal && <HeroModal onClose={() => setShowModal(false)} />}
|
|
{showSurveyModal && !showFormModal && (
|
|
<SurveyIntroModal
|
|
onNext={() => {
|
|
setShowSurveyModal(false);
|
|
setShowFormModal(true);
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{showFormModal && (
|
|
<SurveyFormModal onClose={() => setShowFormModal(false)} />
|
|
)}
|
|
</div>
|
|
{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>
|
|
) : (
|
|
<Carousel className="lg:w-2/3 lg:h-full ">
|
|
<CarouselContent>
|
|
{heroData?.map((list: any) => (
|
|
<CarouselItem key={list?.id}>
|
|
<div className="relative h-[310px] lg:h-[420px]">
|
|
<Image
|
|
src={list?.thumbnailLink}
|
|
alt="gambar-utama"
|
|
width={1920}
|
|
height={1080}
|
|
placeholder={`data:image/svg+xml;base64,${toBase64(
|
|
shimmer(700, 475)
|
|
)}`}
|
|
className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover"
|
|
/>
|
|
|
|
<div className="absolute bottom-0 left-0 right-0 bg-black/30 backdrop-brightness-50 text-white pb-4 px-4 pt-8 rounded-bl-2xl rounded-tr-2xl mx-3 mb-2">
|
|
<div className="absolute top-0 left-0 bottom-0 w-2 bg-[#bb3523] rounded-bl-lg"></div>
|
|
<span className="absolute top-0 left-0 mt-2 mb-3 mx-3 bg-[#bb3523] text-white text-xs font-semibold uppercase px-2 py-1 rounded">
|
|
{list?.categoryName || "Liputan Kegiatan"}
|
|
</span>
|
|
|
|
<Link href={`${locale}/image/detail/${list?.slug}`}>
|
|
<h2 className="text-lg leading-tight">{list?.title}</h2>
|
|
</Link>
|
|
|
|
<p className="text-xs flex items-center gap-1 mt-2 opacity-80">
|
|
{formatDateToIndonesian(new Date(list?.createdAt))}{" "}
|
|
{list?.timezone || "WIB"} |{" "}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="1em"
|
|
height="1em"
|
|
viewBox="0 0 24 24"
|
|
className="inline-block"
|
|
>
|
|
<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>
|
|
{list?.clickCount}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious className="hover:bg-black ml-1 lg:ml-0" />
|
|
<CarouselNext className="hover:bg-black mr-1 lg:mr-0" />
|
|
</Carousel>
|
|
)}
|
|
|
|
<div>
|
|
{isLoading ? (
|
|
<>
|
|
<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>
|
|
</>
|
|
) : (
|
|
<ul className="py-4 lg:py-0 flex flex-row lg:flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
|
|
<Tabs defaultValue="national" className="w-[350px]">
|
|
<TabsList className="grid w-full grid-cols-3 border">
|
|
<TabsTrigger value="national">Nasional</TabsTrigger>
|
|
<TabsTrigger value="polda">Polda</TabsTrigger>
|
|
<TabsTrigger value="satker">Satker</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="national">
|
|
{heroData?.map((item: any) => (
|
|
<li
|
|
key={item?.id}
|
|
className="flex gap-4 flex-row lg:w-full mx-2"
|
|
>
|
|
<div className="flex-shrink-0 w-24 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 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>
|
|
<Link href={`${locale}/image/detail/${item?.slug}`}>
|
|
<h3 className="text-base font-bold mt-2 h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
|
|
{item?.title}
|
|
</h3>
|
|
</Link>
|
|
<p className="text-[10px] flex flex-row items-center gap-1 text-gray-500 mt-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>
|
|
</li>
|
|
))}
|
|
</TabsContent>
|
|
<TabsContent value="polda">
|
|
{heroData
|
|
?.filter((item: any) => item.isPublishOnPolda === true)
|
|
.map((item: any, index: any) => (
|
|
<li
|
|
key={item?.id}
|
|
className="flex gap-4 flex-row lg:w-full mx-2"
|
|
>
|
|
<div className="flex-shrink-0 w-24 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 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>
|
|
<Link href={`${locale}/image/detail/${item?.slug}`}>
|
|
<h3 className="text-base font-bold mt-2 h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
|
|
{item?.title}
|
|
</h3>
|
|
</Link>
|
|
<p className="text-[10px] flex flex-row items-center gap-1 text-gray-500 mt-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>
|
|
</li>
|
|
))}
|
|
</TabsContent>
|
|
<TabsContent value="satker">
|
|
{heroData?.map((item: any) => (
|
|
<li
|
|
key={item?.id}
|
|
className="flex gap-4 flex-row lg:w-full mx-2"
|
|
>
|
|
<div className="flex-shrink-0 w-24 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 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>
|
|
<Link href={`${locale}/image/detail/${item?.slug}`}>
|
|
<h3 className="text-base font-bold mt-2 h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
|
|
{item?.title}
|
|
</h3>
|
|
</Link>
|
|
<p className="text-[10px] flex flex-row items-center gap-1 text-gray-500 mt-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>
|
|
</li>
|
|
))}
|
|
</TabsContent>
|
|
</Tabs>
|
|
</ul>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|