312 lines
10 KiB
TypeScript
312 lines
10 KiB
TypeScript
|
"use client";
|
||
|
|
import Image from "next/image";
|
||
|
|
import { Calendar, Clock, Eye } from "lucide-react";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import Link from "next/link";
|
||
|
|
import { useState, useEffect } from "react";
|
||
|
|
import {
|
||
|
|
FaFacebookF,
|
||
|
|
FaTiktok,
|
||
|
|
FaYoutube,
|
||
|
|
FaWhatsapp,
|
||
|
|
FaInstagram,
|
||
|
|
FaTwitter,
|
||
|
|
FaCheck,
|
||
|
|
FaLink,
|
||
|
|
FaShareAlt,
|
||
|
|
} from "react-icons/fa";
|
||
|
|
import { getDetail } from "@/service/landing/landing";
|
||
|
|
import VideoPlayer from "@/utils/video-player";
|
||
|
|
import { toBase64, shimmer } from "@/utils/globals";
|
||
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
||
|
|
|
||
|
|
export default function ImageDetail({ id }: { id: string }) {
|
||
|
|
const [copied, setCopied] = useState(false);
|
||
|
|
const [showShareMenu, setShowShareMenu] = useState(false);
|
||
|
|
const [data, setData] = useState<any>(null);
|
||
|
|
const [loading, setLoading] = useState(true);
|
||
|
|
const [selectedImage, setSelectedImage] = useState(0);
|
||
|
|
const [isLoading, setIsLoading] = useState<any>(true);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const timer = setTimeout(() => {
|
||
|
|
setIsLoading(false);
|
||
|
|
}, 3000);
|
||
|
|
|
||
|
|
return () => clearTimeout(timer);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handleCopyLink = async () => {
|
||
|
|
try {
|
||
|
|
await navigator.clipboard.writeText(window.location.href);
|
||
|
|
setCopied(true);
|
||
|
|
setTimeout(() => setCopied(false), 2000);
|
||
|
|
} catch (err) {
|
||
|
|
console.error("Failed to copy: ", err);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const SocialItem = ({
|
||
|
|
icon,
|
||
|
|
label,
|
||
|
|
}: {
|
||
|
|
icon: React.ReactNode;
|
||
|
|
label: string;
|
||
|
|
}) => (
|
||
|
|
<div className="flex items-center gap-3 cursor-pointer hover:opacity-80">
|
||
|
|
<div className="bg-[#C6A455] p-2 rounded-full text-white">{icon}</div>
|
||
|
|
<span className="text-sm">{label}</span>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const fetchDetail = async () => {
|
||
|
|
try {
|
||
|
|
setLoading(true);
|
||
|
|
const response = await getDetail(id);
|
||
|
|
setData(response?.data?.data);
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error fetching detail:", error);
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
if (id) fetchDetail();
|
||
|
|
}, [id]);
|
||
|
|
|
||
|
|
if (loading) {
|
||
|
|
return (
|
||
|
|
<div className="max-w-6xl mx-auto px-4 py-6">
|
||
|
|
<p>Loading...</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!data) {
|
||
|
|
return (
|
||
|
|
<div className="max-w-6xl mx-auto px-4 py-6">
|
||
|
|
<p>Data tidak ditemukan</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="max-w-6xl mx-auto px-4 py-6 space-y-6">
|
||
|
|
{isLoading ? (
|
||
|
|
<div className="relative">
|
||
|
|
<Skeleton className="rounded-lg h-[300px] w-screen lg:h-[600px] lg:w-[900px]" />
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="relative">
|
||
|
|
<Image
|
||
|
|
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||
|
|
shimmer(700, 475)
|
||
|
|
)}`}
|
||
|
|
width={2560}
|
||
|
|
height={1440}
|
||
|
|
src={data?.files[selectedImage]?.url || "/nodata.png"}
|
||
|
|
alt="Main"
|
||
|
|
className="rounded-lg h-[300px] w-screen lg:h-[600px] lg:w-full object-contain"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div className="absolute top-4 right-4"></div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Gambar bawah Kecil */}
|
||
|
|
{isLoading ? (
|
||
|
|
<div className="py-4 flex flex-row gap-3">
|
||
|
|
<Skeleton className="rounded-lg w-[120px] h-[90px]" />
|
||
|
|
<Skeleton className="rounded-lg w-[120px] h-[90px]" />
|
||
|
|
<Skeleton className="rounded-lg w-[120px] h-[90px]" />
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
// <div className="py-4 flex flex-row gap-3">
|
||
|
|
// {detailDataImage?.files?.map((file: any, index: number) => (
|
||
|
|
// <a onClick={() => setSelectedImage(index)} key={file?.id}>
|
||
|
|
// <Image
|
||
|
|
// placeholder={`data:image/svg+xml;base64,${toBase64(
|
||
|
|
// shimmer(700, 475)
|
||
|
|
// )}`}
|
||
|
|
// width={1920}
|
||
|
|
// height={1080}
|
||
|
|
// alt="image-small"
|
||
|
|
// src={file?.url}
|
||
|
|
// className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600"
|
||
|
|
// />
|
||
|
|
// </a>
|
||
|
|
// ))}
|
||
|
|
// </div>
|
||
|
|
<div className="py-4 px-1 flex flex-row gap-3 flex-wrap">
|
||
|
|
{data?.files?.map((file: any, index: number) => (
|
||
|
|
<a onClick={() => setSelectedImage(index)} key={file?.id}>
|
||
|
|
<Image
|
||
|
|
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||
|
|
shimmer(700, 475)
|
||
|
|
)}`}
|
||
|
|
width={1920}
|
||
|
|
height={1080}
|
||
|
|
alt="image-small"
|
||
|
|
src={file?.url}
|
||
|
|
className={`w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 ${
|
||
|
|
selectedImage === index ? "ring-2 ring-red-600" : ""
|
||
|
|
}`}
|
||
|
|
/>
|
||
|
|
</a>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="flex flex-col md:flex-row md:items-center md:justify-between text-sm text-muted-foreground">
|
||
|
|
<div className="flex flex-wrap items-center gap-2">
|
||
|
|
<span className="font-semibold text-black border-r-2 pr-2 border-black">
|
||
|
|
by {data?.uploadedBy?.publisher || "MABES POLRI"}
|
||
|
|
</span>
|
||
|
|
<span className="flex items-center gap-1 text-black">
|
||
|
|
<Calendar className="w-4 h-4" />
|
||
|
|
{new Date(data.createdAt)
|
||
|
|
.toLocaleString("id-ID", {
|
||
|
|
day: "2-digit",
|
||
|
|
month: "short",
|
||
|
|
year: "numeric",
|
||
|
|
hour: "2-digit",
|
||
|
|
minute: "2-digit",
|
||
|
|
hour12: false,
|
||
|
|
timeZone: "Asia/Jakarta",
|
||
|
|
})
|
||
|
|
.replace(".", ":")}{" "}
|
||
|
|
WIB
|
||
|
|
</span>
|
||
|
|
{/* <span className="flex items-center gap-1 border-r-2 pr-2 border-black text-black">
|
||
|
|
<Clock className="w-4 h-4" />
|
||
|
|
{data.time || "-"}
|
||
|
|
</span> */}
|
||
|
|
<span className="flex items-center gap-1 border-r-2 pr-2 border-black text-black">
|
||
|
|
<Eye className="w-4 h-4" />
|
||
|
|
{data.clickCount || 0}
|
||
|
|
</span>
|
||
|
|
<span className="text-black">
|
||
|
|
{" "}
|
||
|
|
Creator: {data.creatorGroupLevelName}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col md:flex-row gap-6 mt-6">
|
||
|
|
{/* Sidebar actions */}
|
||
|
|
<div className="hidden md:flex flex-col gap-4 relative z-10">
|
||
|
|
<div className="flex gap-2 items-center">
|
||
|
|
<Button
|
||
|
|
onClick={handleCopyLink}
|
||
|
|
size="lg"
|
||
|
|
className="justify-start bg-black text-white rounded-full"
|
||
|
|
>
|
||
|
|
{copied ? <FaCheck /> : <FaLink />}
|
||
|
|
</Button>
|
||
|
|
<span>COPY LINK</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex gap-2 items-center relative">
|
||
|
|
<Button
|
||
|
|
onClick={() => setShowShareMenu(!showShareMenu)}
|
||
|
|
size="lg"
|
||
|
|
className="justify-start bg-[#C6A455] text-white rounded-full"
|
||
|
|
>
|
||
|
|
<FaShareAlt />
|
||
|
|
</Button>
|
||
|
|
<span>SHARE</span>
|
||
|
|
|
||
|
|
{showShareMenu && (
|
||
|
|
<div className="absolute left-16 top-0 bg-white p-4 rounded-lg shadow-lg flex flex-col gap-3 w-48">
|
||
|
|
<SocialItem icon={<FaFacebookF />} label="Facebook" />
|
||
|
|
<SocialItem icon={<FaTiktok />} label="TikTok" />
|
||
|
|
<SocialItem icon={<FaYoutube />} label="YouTube" />
|
||
|
|
<SocialItem icon={<FaWhatsapp />} label="WhatsApp" />
|
||
|
|
<SocialItem icon={<FaInstagram />} label="Instagram" />
|
||
|
|
<SocialItem icon={<FaTwitter />} label="Twitter" />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex gap-2 items-center">
|
||
|
|
<Link href={`/public/content/video/comment/${id}`}>
|
||
|
|
<Button
|
||
|
|
variant="default"
|
||
|
|
size="lg"
|
||
|
|
className="justify-start bg-[#FFAD10] rounded-full mr-2 text-white"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="15"
|
||
|
|
height="15"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
fill="currentColor"
|
||
|
|
d="M10 3h4a8 8 0 1 1 0 16v3.5c-5-2-12-5-12-11.5a8 8 0 0 1 8-8"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</Button>
|
||
|
|
COMMENT
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Content */}
|
||
|
|
<div className="flex-1 space-y-4">
|
||
|
|
<h1 className="text-xl font-bold">{data.title}</h1>
|
||
|
|
<div className="text-base text-gray-700 leading-relaxed space-y-3">
|
||
|
|
<p>{data.description}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Actions bawah */}
|
||
|
|
<div className="flex flex-wrap md:flex-row justify-center gap-4 my-20">
|
||
|
|
<div className="flex gap-2 items-center">
|
||
|
|
<Button
|
||
|
|
onClick={handleCopyLink}
|
||
|
|
size="lg"
|
||
|
|
className="justify-start bg-black text-white rounded-full"
|
||
|
|
>
|
||
|
|
{copied ? <FaCheck /> : <FaLink />}
|
||
|
|
</Button>
|
||
|
|
<span>COPY LINK</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex gap-2 items-center">
|
||
|
|
<Button
|
||
|
|
onClick={() => setShowShareMenu(!showShareMenu)}
|
||
|
|
size="lg"
|
||
|
|
className="justify-start bg-[#C6A455] text-white rounded-full"
|
||
|
|
>
|
||
|
|
<FaShareAlt />
|
||
|
|
</Button>
|
||
|
|
<span>SHARE</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex gap-2 items-center">
|
||
|
|
<Link href={`/public/content/video/comment/${id}`}>
|
||
|
|
<Button
|
||
|
|
variant="default"
|
||
|
|
size="lg"
|
||
|
|
className="justify-start bg-[#FFAD10] rounded-full mr-2 text-white"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="15"
|
||
|
|
height="15"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
fill="currentColor"
|
||
|
|
d="M10 3h4a8 8 0 1 1 0 16v3.5c-5-2-12-5-12-11.5a8 8 0 0 1 8-8"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</Button>
|
||
|
|
COMMENT
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|