75 lines
2.9 KiB
TypeScript
75 lines
2.9 KiB
TypeScript
"use client";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { useParams, usePathname, useRouter } from "next/navigation";
|
|
import React, { useEffect, useState } from "react";
|
|
import NewContent from "@/components/landing-page/new-content";
|
|
import { Link } from "@/i18n/routing";
|
|
import { getDetailIndeks } from "@/service/landing/landing";
|
|
import { formatDateToIndonesian } from "@/utils/globals";
|
|
|
|
const IndeksDetail = () => {
|
|
const [indeksData, setIndeksData] = useState<any>();
|
|
const params = useParams();
|
|
const slug = params?.slug;
|
|
|
|
useEffect(() => {
|
|
initFetch();
|
|
}, []);
|
|
const initFetch = async () => {
|
|
const response = await getDetailIndeks();
|
|
console.log(response);
|
|
setIndeksData(response?.data?.data?.content);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="p-4 lg:px-60 lg:p-12">
|
|
{/* Judul */}
|
|
<div className="flex justify-center mb-5">
|
|
<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-[500px] w-full rounded-lg" />
|
|
</div>
|
|
{/* Footer Informasi */}
|
|
<div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
|
|
<p className="items-end">
|
|
{formatDateToIndonesian(new Date(indeksData?.createdAt))} {indeksData?.timezone ? indeksData?.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>{" "}
|
|
{indeksData?.clickCount}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Keterangan */}
|
|
<div className="w-auto">
|
|
<p dangerouslySetInnerHTML={{ __html: indeksData?.description }} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full">
|
|
{/* Comment */}
|
|
<div className="flex flex-col my-16 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] rounded-lg w-fit px-4 py-1">Kirim</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Konten Serupa */}
|
|
<div className="space-x-5 flex flex-col p-4">
|
|
<NewContent type={"similar"} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default IndeksDetail;
|