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

"use client";
import { Card, CardContent } from "@/components/ui/card";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";
import Link from "next/link";
import { useParams, usePathname, useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";
import { Icon } from "@iconify/react/dist/iconify.js";
import { textEllipsis } from "@/utils/globals";
import { getDetail } from "@/service/landing/landing";
import NewContent from "@/components/landing-page/new-content";

const dummyImage = [
  { id: 1, thumbnail: "/assets/banner-sample.png" },
  { id: 2, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018" },
  { id: 3, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=128&currentMilis=1732769540018" },
  { id: 4, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=127&currentMilis=1732769540018" },
  { id: 5, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018" },
];

const dummyData = {
  id: 12312,
  title: "TITLE",
  createdBy: "Mabes",
  createdAt: "21-21-2021",
  time: "18:23",
  desc: "sdaasd",
  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 dummyImageContent = [
  { id: 1, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 2, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 3, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 4, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 5, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 6, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 7, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 8, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
  { id: 9, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
];

const dummyDescription = [
  { id: 1, title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
  { id: 2, title: "Kapolres Lahat Himbau Cipta Kondisi Cooling System Pasca Pemungutan Suara Pilkada 2024", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
  { id: 3, title: "17 Ton Pupuk Bersubsidi yang Akan Diselewengkan ke Banyuasin Berhasil Digagalkan", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
  { id: 4, title: "Kapolda Sumsel Apelkan 1471 Personel Persiapan Pengamanan Pengawalan Tahan Pungut dan Hitung Suara", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
  { id: 5, title: "Polrestabes Palembang Berhasil Mengungkap Kasus Penganiayaan Berat di Ilir Barat II", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
  { id: 6, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
];

const DetailInfo = () => {
  const [selectedSize, setSelectedSize] = useState<string>("L");
  const [selectedTab, setSelectedTab] = useState("video");
  const router = useRouter();
  const pathname = usePathname();
  const params = useParams();
  const slug = params?.slug;
  const [detailDataImage, setDetailDataImage] = useState<any>();
  const [selectedImage, setSelectedImage] = useState(0);

  useEffect(() => {
    initFetch();
  }, []);

  const initFetch = async () => {
    const response = await getDetail(String(slug));
    console.log("detailImage", response);
    setDetailDataImage(response?.data?.data);
  };

  const sizes = [
    { label: "XL", value: "3198 x 1798 px" },
    { label: "L", value: "2399 x 1349 px" },
    { label: "M", value: "1599 x 899 px" },
    { label: "S", value: "1066 x 599 px" },
    { label: "XS", value: "800 x 450 px" },
  ];

  return (
    <div className="min-h-screen px-4 md:px-24 py-4">
      {/* Container Utama */}
      <div className="rounded-md overflow-hidden md:flex">
        {/* Bagian Kiri */}
        <div className="md:w-3/4">
          {/* Gambar Utama */}
          <div className="relative">
            <img src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="w-full rounded-lg" />
            <div className="absolute top-4 left-4"></div>
          </div>

          {/* Gambar bawah Kecil */}
          <div className="p-4 grid grid-cols-4 gap-2">
            {detailDataImage?.files?.map((file: any, index: number) => (
              <a onClick={() => setSelectedImage(index)} key={file?.id}>
                <img src={file?.url} className="w-full h-fit object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
              </a>
            ))}
          </div>
        </div>

        {/* Bagian Kanan */}
        <div className="md:w-1/4 p-4 bg-gray-300  rounded-lg mx-4">
          <div className="flex flex-col mb-3 items-center justify-center cursor-pointer">
            <svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24">
              <path fill="black" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2" />
            </svg>
            <p className="text-base lg:text-lg">Simpan</p>
          </div>
          {/* garis */}
          <div className="border-t border-black my-4"></div>

          <Link href="" className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
            {detailDataImage?.category?.name}
          </Link>

          <div className="flex justify-center flex-wrap gap-2 mb-4">
            {detailDataImage?.tags?.split(",").map((tag: string) => (
              <p className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">{tag}</p>
            ))}
          </div>

          <div className="border-t border-black my-4"></div>

          {/* Opsi Ukuran Foto */}
          <h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Foto</h4>

          <div className="border-t border-black my-4"></div>

          <div className="space-y-2">
            {sizes.map((size) => (
              <label key={size.label} className="flex items-center space-x-2 cursor-pointer">
                <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
                <div className="text-sm">
                  {size.label} --------------------------------------{size.value}
                </div>
              </label>
            ))}
          </div>

          {/* Download Semua */}
          <div className="mt-4">
            <label className="flex items-center space-x-2 text-sm">
              <input type="checkbox" className="text-red-600 focus:ring-red-600" />
              <span>Download Semua File?</span>
            </label>
          </div>

          {/* Tombol Download */}
          <button className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
              <path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
            </svg>
            Download
          </button>
        </div>
      </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">{detailDataImage?.uploadedBy?.userLevel?.name}</span> | Diupdate pada {detailDataImage?.updatedAt} WIB | <Icon icon="formkit:eye" width="15" height="15" />{" "}
          {detailDataImage?.clickCount}
        </p>
        <p>Kreator: {detailDataImage?.creatorName}</p>
      </div>

      {/* Keterangan */}
      <div className="md:w-3/4">
        <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataImage?.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: detailDataImage?.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="px-4">
        <NewContent type={"similar"} />
      </div>
    </div>
  );
};

export default DetailInfo;