97 lines
4.4 KiB
TypeScript
97 lines
4.4 KiB
TypeScript
"use client";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { useParams, usePathname, useRouter } from "next/navigation";
|
|
import React, { useEffect, useState } from "react";
|
|
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
|
|
import { Link } from "@/i18n/routing";
|
|
import { getDetailIndeks, publicDetailBlog } from "@/service/landing/landing";
|
|
import { formatDateToIndonesian } from "@/utils/globals";
|
|
import { Icon } from "@iconify/react/dist/iconify.js";
|
|
|
|
const IndeksDetail = () => {
|
|
const [indeksData, setIndeksData] = useState<any>();
|
|
const params = useParams();
|
|
const slug = params?.slug;
|
|
const [relatedPost, setRelatedPost] = useState<any>();
|
|
|
|
useEffect(() => {
|
|
initFetch();
|
|
detailFetch();
|
|
}, []);
|
|
const initFetch = async () => {
|
|
const response = await getDetailIndeks();
|
|
console.log(response);
|
|
setRelatedPost(response?.data?.data?.content);
|
|
};
|
|
const detailFetch = async () => {
|
|
const response = await publicDetailBlog(slug);
|
|
console.log(response);
|
|
setIndeksData(response?.data?.data);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="p-4 lg:px-60 lg:p-12">
|
|
{/* Judul */}
|
|
<div className="flex flex-col mb-5">
|
|
<h1 className="text-lg mb-2">Indeks / Detail</h1>
|
|
<h1 className="flex flex-row font-bold text-center text-2xl">{indeksData?.title}</h1>
|
|
</div>
|
|
{/* Gambar Utama */}
|
|
<div className="flex items-center justify-center">
|
|
<img src={indeksData?.thumbnailLink} alt="Main" className="h-[550px] w-full rounded-lg" />
|
|
</div>
|
|
{/* Footer Informasi */}
|
|
<div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
|
|
<div className="flex flex-row items-center mt-3 justify-between">
|
|
oleh <span className="font-semibold text-black">{indeksData?.uploaderName}</span> | Diupdate pada {indeksData?.createdAt} WIB
|
|
</div>
|
|
</div>
|
|
|
|
{/* Keterangan */}
|
|
<div className="w-auto">
|
|
<p className="font-light text-justify" dangerouslySetInnerHTML={{ __html: indeksData?.description }} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Comment */}
|
|
<div className="w-full">
|
|
<div className="flex flex-col py-5 p-10 bg-[#f7f7f7]">
|
|
<div className="gap-5 flex flex-col px-4 lg:px-16">
|
|
<p className="flex items-start text-lg">Berikan Komentar</p>
|
|
<Textarea placeholder="Type your comments here." className="flex w-full" />
|
|
<button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1">Kirim</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Konten Serupa */}
|
|
<div className="space-x-5 flex flex-col px-4 lg:px-16 py-16 gap-5">
|
|
<h1 className="font-bold text-base lg:text-xl px-4 lg:px-8">Post Terkait</h1>
|
|
<Carousel>
|
|
<CarouselContent className="w-full max-w-7xl">
|
|
{relatedPost?.map((relate: any) => (
|
|
<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">
|
|
<img 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">
|
|
<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>
|
|
<p className="flex flex-row items-center text-[10px] gap-2">
|
|
{formatDateToIndonesian(new Date(relate?.createdAt))} {relate?.timezone ? relate?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {relate.clickCount}{" "}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious />
|
|
<CarouselNext />
|
|
</Carousel>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default IndeksDetail;
|