mediahub-fe/app/[locale]/(public)/indeks/detail/[slug]/page.tsx

"use client";
import { Card, CardContent } from "@/components/ui/card";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import { Textarea } from "@/components/ui/textarea";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import React, { useState } from "react";
import { textEllipsis } from "@/utils/globals";

const dummyImage = [
  {
    id: 1,
    title: "Giat Polri",
    thumbnail: "/assets/banner-sample.png",
    htmlDescription:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ratione qui quidem, saepe blanditiis vero reiciendis commodi adipisci libero voluptatum, nisi eum hic quis dolorem, et aperiam consectetur perspiciatis error optio rem dolores tempore ducimus quos officia! Dicta odio dolorem quam necessitatibus libero mollitia reiciendis? Veniam, fugit incidunt? Quidem, consectetur.",
  },
  {
    id: 2,
    title: "Giat Polri",
    thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018",
    htmlDescription:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ratione qui quidem, saepe blanditiis vero reiciendis commodi adipisci libero voluptatum, nisi eum hic quis dolorem, et aperiam consectetur perspiciatis error optio rem dolores tempore ducimus quos officia! Dicta odio dolorem quam necessitatibus libero mollitia reiciendis? Veniam, fugit incidunt? Quidem, consectetur.",
  },
  {
    id: 3,
    title: "Giat Polri",
    thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=128&currentMilis=1732769540018",
    htmlDescription:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ratione qui quidem, saepe blanditiis vero reiciendis commodi adipisci libero voluptatum, nisi eum hic quis dolorem, et aperiam consectetur perspiciatis error optio rem dolores tempore ducimus quos officia! Dicta odio dolorem quam necessitatibus libero mollitia reiciendis? Veniam, fugit incidunt? Quidem, consectetur.",
  },
  {
    id: 4,
    thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=127&currentMilis=1732769540018",
    htmlDescription:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ratione qui quidem, saepe blanditiis vero reiciendis commodi adipisci libero voluptatum, nisi eum hic quis dolorem, et aperiam consectetur perspiciatis error optio rem dolores tempore ducimus quos officia! Dicta odio dolorem quam necessitatibus libero mollitia reiciendis? Veniam, fugit incidunt? Quidem, consectetur.",
  },
  {
    id: 5,
    title: "Giat Polri",
    thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018",
    htmlDescription:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ratione qui quidem, saepe blanditiis vero reiciendis commodi adipisci libero voluptatum, nisi eum hic quis dolorem, et aperiam consectetur perspiciatis error optio rem dolores tempore ducimus quos officia! Dicta odio dolorem quam necessitatibus libero mollitia reiciendis? Veniam, fugit incidunt? Quidem, consectetur.",
  },
];

const dummyData = {
  id: 12312,
  title: "TITLE",
  createdBy: "Mabes",
  createdAt: "21-21-2021",
  time: "18:23",
  desc: "halooo",
  htmlDescription:
    '<p>Polres Kobar - Polres Kotawaringin Barat (Kobar) memberikan bantuan sosial kepada warga yang berada di Daerah Aliran Sungai (DAS) Arut khususnya yang terdampak banjir, Sabtu (30/11/2024) pagi.</p><p>Kapolda Kalteng Irjen Pol Drs. Djoko Poerwanto melalui Kapolres Kobar AKBP Yusfandi Usman, S.I.K., M.I.K., menjelaskan bahwa pihaknya membagikan 200 paket sembako sebagai bentuk kepedulian kepada masyarakat.</p><p>"Saya bersama personel turun langsung membagikan bantuan berupa paket sembako yang diserahkan kepada masyarakat sekaligus monitoring ke lokasi pinggiran sungai yang mulai sebagain terdampak banjir akibat curah hujan tinggi,” ungkap Kapolres.</p><p>Lebih lanjut, orang nomor satu di Polres Kobar ini, mengungkapkan kegiatan tersebut dilakukan dalam rangka tanggap waspada dan antisipasi bencana banjir di wilayah Kabupaten Kobar.</p><p>“Kami minta masyarakat tetap waspada banjir menyikapi cuaca yang berubah-ubah saat ini, tidak menutup kemungkinan bertambahnya volume air sungai, jika diguyur hujan terus menerus,” jelasnya.</p>',
};

const IndeksDetail = () => {
  const [selectedSize, setSelectedSize] = useState<string>("L");
  const [selectedTab, setSelectedTab] = useState("video");
  const router = useRouter();
  const pathname = usePathname();

  return (
    <div className="p-4 lg:p-12">
      {/* Judul */}
      <div>
        <h3>INDEKS / DETAIL</h3>
        <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{dummyData.title}</h1>
      </div>
      {/* Gambar Utama */}
      <div className="flex items-center justify-center">
        <img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018" alt="Main" className="h-[500px] w-[700px] 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">
          oleh <span className="font-semibold text-black">{dummyData.createdBy}</span> | Diupdate pada {dummyData.createdAt} {dummyData.time} WIB | 👁️ 65
        </p>
      </div>

      {/* Keterangan */}
      <div className="md:w-2/3">
        <div dangerouslySetInnerHTML={{ __html: dummyData.htmlDescription }} />
      </div>

      {/* Comment */}
      <div className="flex flex-col my-16 gap-5 p-10 bg-gray-300">
        <p className="flex items-start text-lg">Berikan Komentar</p>
        <Textarea placeholder="Type your comments here." className="flex items-start justify-center" />
        <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
      </div>

      {/* Konten Serupa */}
      <div className="w-full">
        <div className="space-x-5 flex flex-col p-4">
          <div className="flex px-10 flex-col lg:flex-row gap-5 mb-4">
            <h2 className="flex items-center text-sm lg:text-xl font-bold px-4 py-1 rounded-lg text-black">Post Terkait</h2>
          </div>
          <div className="px-10">
            <Carousel>
              <CarouselContent>
                {dummyImage.map((image) => (
                  <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
                    <Card>
                      <CardContent className="flex flex-col gap-3 items-center justify-center">
                        <img src={image.thumbnail} className="h-60 object-cover w-full rounded-lg" />
                        <p className="bg-[#bb3523] text-white p-2 rounded-lg">{image.title}</p>
                        <p>{textEllipsis(image.htmlDescription, 100)}</p>
                      </CardContent>
                    </Card>
                  </CarouselItem>
                ))}
              </CarouselContent>
              <CarouselPrevious />
              <CarouselNext />
            </Carousel>
          </div>
        </div>
        <div className="flex items-center flex-row justify-center">
          <Link href="#" className="border text-[#bb3523] text-sm lg:text-md px-4 py-1 border-[#bb3523]">
            LIHAT SEMUA
          </Link>
        </div>
      </div>
    </div>
  );
};

export default IndeksDetail;