From 03baade7ea496b6705b90c23b4d237181786268d Mon Sep 17 00:00:00 2001 From: Sabda Yagra Date: Sat, 22 Mar 2025 11:17:57 +0700 Subject: [PATCH] fix: detail content tbnews kaltara --- .../[polda_name]/components/hero-kaltara.tsx | 13 +- .../components/navbar-kaltara.tsx | 4 +- .../video/detail/[slug]/layout.tsx | 16 + .../[polda_name]/video/detail/[slug]/page.tsx | 1010 +++++++++++++++++ components/landing-page/hero.tsx | 2 +- 5 files changed, 1040 insertions(+), 5 deletions(-) create mode 100644 app/[locale]/(public)/(polda)/tbnews/[polda_name]/video/detail/[slug]/layout.tsx create mode 100644 app/[locale]/(public)/(polda)/tbnews/[polda_name]/video/detail/[slug]/page.tsx diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx index 379ccc87..604a7faa 100644 --- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx +++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx @@ -3,6 +3,7 @@ import { Reveal } from "@/components/landing-page/Reveal"; import { Icon } from "@/components/ui/icon"; import { Skeleton } from "@/components/ui/skeleton"; +import { Link } from "@/i18n/routing"; import { listData } from "@/service/landing/landing"; import { formatDateToIndonesian, getPublicLocaleTimestamp } from "@/utils/globals"; import Image from "next/image"; @@ -11,14 +12,18 @@ import React, { useEffect, useState } from "react"; const HeroKaltara = () => { const params = useParams(); - const poldaName: any = params?.polda_name; const [content, setContent] = useState([]); const [centerPadding, setCenterPadding] = useState(); const [isBannerLoading, setIsBannerLoading] = useState(true); + const poldaName: any = params?.polda_name; + const satkerName = params?.satker_name; + + let prefixPath = poldaName ? `/tbnews/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/"; const newContent = [ { id: 1, + slug: "Brigjen-Pol-Wibowo", thumbnailLink: "/assets/tbnews/image-hero1.png", title: "Brigjen Pol Wibowo Resmi Dilantik sebagai Dirregident Korlantas Polri", categoryName: "NASIONAL", @@ -120,9 +125,11 @@ const HeroKaltara = () => { ) : (
- {newContent?.slice(0, 1).map((row: any, index: number) => ( + {content?.map((row: any, index: number) => (
- gambar-utama + + gambar-utama +

{row.title}

{row?.categoryName}

diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx index d703fd70..cb59f6d7 100644 --- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx +++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx @@ -1,3 +1,5 @@ +"use client"; + import { Button } from "@/components/ui/button"; import { Icon } from "@/components/ui/icon"; import { Link } from "@/i18n/routing"; @@ -42,7 +44,7 @@ const categoryLinks: any = { Kesehatan: "https://tribratanews.kaltara.polri.go.id/category/kesehatan/", Olahraga: "https://tribratanews.kaltara.polri.go.id/category/olahraga/", PPA: "https://tribratanews.kaltara.polri.go.id/category/ppa/", - MediaHub: "https://mediahub.polri.go.id/", + MediaHub: "https://new.netidhub.com/", }; const NavbarKaltara = () => { diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/video/detail/[slug]/layout.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/video/detail/[slug]/layout.tsx new file mode 100644 index 00000000..f7fff9e8 --- /dev/null +++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/video/detail/[slug]/layout.tsx @@ -0,0 +1,16 @@ +import NavbarKaltara from "../../../components/navbar-kaltara"; +import ContactUs from "../../../components/contact-us"; +import NewsTickerKaltara from "../../../components/news-tickers-kaltara"; + +const layout = async ({ children }: { children: React.ReactNode }) => { + return ( + <> + + {children} + + + + ); +}; + +export default layout; diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/video/detail/[slug]/page.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/video/detail/[slug]/page.tsx new file mode 100644 index 00000000..472a8866 --- /dev/null +++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/video/detail/[slug]/page.tsx @@ -0,0 +1,1010 @@ +// "use client"; + +// import { Skeleton } from "@/components/ui/skeleton"; +// import Image from "next/image"; +// import React, { useEffect, useState } from "react"; +// import { useParams, usePathname, useSearchParams } from "next/navigation"; +// import { useRouter } from "@/i18n/routing"; +// import { useTranslations } from "next-intl"; +// import { formatDateToIndonesian } from "@/utils/globals"; +// import { Icon } from "@iconify/react/dist/iconify.js"; + +// const page = () => { +// const [isLoading, setIsLoading] = useState(true); +// const [selectedImage, setSelectedImage] = useState(0); +// const router = useRouter(); +// const pathname = usePathname(); +// const params = useParams(); +// const slug = String(params?.slug); +// const t = useTranslations("LandingPage"); +// const poldaName = params?.polda_name; +// const satkerName = params?.satker_name; + +// let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/"; + +// useEffect(() => { +// const timer = setTimeout(() => { +// setIsLoading(false); +// }, 3000); + +// return () => clearTimeout(timer); +// }, []); +// const shimmer = (w: number, h: number) => ` +// +// +// +// +// +// +// +// +// +// +// +// `; + +// const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str)); + +// const dataDummy: any = [ +// { +// id: 1, +// image: "/assets/tbnews/image-hero1.png", +// uploadedBy: "MABES POLRI", +// updatedAt: "15 Januari 2025 - 09:27 WIB", +// clickCount: "61", +// creatBy: "Humas Polri", +// htmlDescription: +// "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri.Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.Dalam prosesi pelantikan, Kakorlantas Irjen Pol Aan Suhanan mengucapkan sumpah jabatan, yang kemudian diikuti oleh Brigjen Pol Wibowo. Demi Allah saya bersumpah akan setia kepada Negara Kesatuan Republik Indonesia yang berdasarkan Pancasila dan Undang-Undang Dasar 1945, serta akan menjalankan segala peraturan perundang-undangan dengan selurus-lurusnya demi dharma bakti saya kepada bangsa dan negara. ujar Kakorlantas saat memimpin prosesi, diikuti oleh Dirregident yang baru dilantik. Selanjutnya, dilaksanakan penandatanganan pakta integritas sebagai bagian dari proses serah terima jabatan (sertijab). Dalam kesempatan tersebut, turut hadir para pejabat tinggi Korlantas Polri, di antaranya Dirkamsel Korlantas Polri Brigjen Pol Bakharuddin Muhammad Syah, Dirgakkum Korlantas Polri Brigjen Pol Raden Slamet Santoso, serta para pejabat utama Korlantas Polri lainnya.", +// title: "Brigjen Pol Wibowo Resmi Dilantik sebagai Dirregident Korlantas Polri", +// polda_name: "polda-kaltara", +// }, +// ]; + +// return ( +// <> +//
+//
+// {/* Bagian Kiri */} +//
+// {/* Gambar Besar */} +// {isLoading ? ( +//
+// +//
+// ) : ( +//
+// Main +//
+//
+// )} + +// {/* Gambar bawah Kecil */} +// {/* {isLoading ? ( +//
+// +// +// +//
+// ) : ( +//
+// {detailDataImage?.files?.map((file: any, index: number) => ( +// setSelectedImage(index)} key={file?.id}> +// image-small +// +// ))} +//
+// )} */} + +// {/* Footer Informasi */} +//
+//
+//

+// {t("by")} {dataDummy?.uploadedBy} +//

+// {/*

+//  | {t("updatedOn")} +// {detailDataImage?.updatedAt} WIB  |  +//

*/} +//

+//  | {t("updatedOn")}  +// {formatDateToIndonesian(new Date(dataDummy?.updatedAt))} {"WIB"} +//

+//

+//  |  +// +//   {dataDummy?.clickCount}   +//

+//
+//
+//

+// {t("creator")} +// {dataDummy?.creatorName} +//

+//
+//
+ +// {/* Keterangan */} +//
+//

{dataDummy?.title}

+//
+//
+//
+//
+//
+// +// ); +// }; + +// export default page; + +"use client"; + +import { Textarea } from "@/components/ui/textarea"; +import { useParams, usePathname, useSearchParams } from "next/navigation"; +import React, { useEffect, useState } from "react"; +import { Icon } from "@iconify/react/dist/iconify.js"; +import NewContent from "@/components/landing-page/new-content"; +import { useToast } from "@/components/ui/use-toast"; +import { getCookiesDecrypt } from "@/lib/utils"; +import { close, error, loading, successCallback, warning } from "@/config/swal"; +import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/service/landing/landing"; +import { Link, useRouter } from "@/i18n/routing"; +import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; +import { Input } from "@/components/ui/input"; +import { Button } from "@/components/ui/button"; +import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking"; +import { checkMaliciousText, formatDateToIndonesian, getPublicLocaleTimestamp } from "@/utils/globals"; +import withReactContent from "sweetalert2-react-content"; +import Swal from "sweetalert2"; +import parse from "html-react-parser"; +import { Skeleton } from "@/components/ui/skeleton"; +import { useTranslations } from "next-intl"; +import Image from "next/image"; + +interface Size { + label: string; + value: string; +} + +const DetailInfo = () => { + const MySwal = withReactContent(Swal); + const [selectedSize, setSelectedSize] = useState("L"); + const [selectedTab, setSelectedTab] = useState("video"); + const router = useRouter(); + const pathname = usePathname(); + const params = useParams(); + const slug = String(params?.slug); + const [detailDataImage, setDetailDataImage] = useState(); + const [selectedImage, setSelectedImage] = useState(0); + const [isSaved, setIsSaved] = useState(false); + const [wishlistId, setWishlistId] = useState(); + const { toast } = useToast(); + const [isDownloadAll, setIsDownloadAll] = useState(false); + const [downloadProgress, setDownloadProgress] = useState(0); + const [isFromSPIT, setIsFromSPIT] = useState(false); + const [main, setMain] = useState(); + const [resolutionSelected, setResolutionSelected] = useState("720"); + const [imageSizeSelected, setImageSizeSelected] = useState("l"); + const userId = getCookiesDecrypt("uie"); + const [content, setContent] = useState([]); + const [emailShareList, setEmailShareList] = useState(); + const [emailShareInput, setEmailShareInput] = useState(); + const [emailMessageInput, setEmailMessageInput] = useState(); + const searchParams = useSearchParams(); + const [width, setWidth] = useState(); + const userRoleId = getCookiesDecrypt("urie"); + const [message, setMessage] = useState(""); + const [listSuggestion, setListSuggestion] = useState(); + const [isLoading, setIsLoading] = useState(true); + const [visibleInput, setVisibleInput] = useState(null); + let typeString = "image"; + const t = useTranslations("LandingPage"); + const poldaName = params?.polda_name; + const satkerName = params?.satker_name; + + let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/"; + + useEffect(() => { + const timer = setTimeout(() => { + setIsLoading(false); + }, 3000); + + return () => clearTimeout(timer); + }, []); + + useEffect(() => { + initFetch(); + checkWishlist(); + }, []); + + const initFetch = async () => { + const response = await getDetail(String(slug)); + console.log("detailImage", response); + const responseGet = await getPublicSuggestionList(slug?.split("-")?.[0]); + + setIsFromSPIT(response?.data?.data?.isFromSPIT); + setWidth(window.innerWidth); + setContent(response?.data.data); + setListSuggestion(responseGet.data?.data); + setMain({ + id: response?.data?.data?.files[0]?.id, + type: response?.data?.data?.fileType.name, + url: + Number(response?.data?.data?.fileType?.id) == 4 + ? response?.data?.data?.files[0]?.secondaryUrl + : Number(response?.data?.data?.fileType?.id) == 2 + ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video` + : response?.data?.data?.files[0]?.url, + thumbnailFileUrl: response?.data?.data?.files[0]?.thumbnailFileUrl, + names: response?.data?.data?.files[0]?.fileName, + format: response?.data?.data?.files[0]?.format, + widthPixel: response?.data?.data?.files[0]?.widthPixel, + heightPixel: response?.data?.data?.files[0]?.heightPixel, + size: response?.data?.data?.files[0]?.size, + caption: response?.data?.data?.files[0]?.caption, + }); + setDetailDataImage(response?.data?.data); + }; + + const doBookmark = async () => { + if (userId) { + const data = { + mediaUploadId: slug?.split("-")?.[0], + }; + + loading(); + const res = await saveWishlist(data); + if (res?.error) { + error(res.message); + return false; + } + close(); + toast({ + title: "Konten berhasil disimpan", + }); + checkWishlist(); + } else { + router.push("/auth"); + } + }; + async function checkWishlist() { + if (userId) { + const res = await checkWishlistStatus(slug.split("-")?.[0]); + console.log(res?.data?.data); + const isAlreadyOnWishlist = res?.data?.data !== "-1"; + setWishlistId(res?.data?.data); + setIsSaved(isAlreadyOnWishlist); + } + } + + const handleDeleteWishlist = async () => { + if (userId) { + loading(); + const res = await deleteWishlist(wishlistId); + + if (res?.error) { + error(res.message); + return false; + } + + toast({ + title: "Konten berhasil dihapus", + }); + close(); + checkWishlist(); + } else { + router.push("/auth"); + } + }; + + // 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" }, + // ]; + + const scaleFactors = { + XL: 2, + L: 1.5, + M: 1.25, + S: 1, + XS: 0.75, + }; + const sizes: Size[] = Object.entries(scaleFactors).map(([label, factor]) => { + const width = Number(main?.widthPixel); + const height = Number(main?.heightPixel); + + if (isNaN(width) || isNaN(height) || width === 0) { + return { label, value: "Invalid size" }; + } + + const newWidth = Math.round(width * factor); + const newHeight = Math.round((width * factor) / (width / height)); + + return { label, value: `${newWidth} x ${newHeight} px` }; + }); + + async function sendActivityLog(activityTypeId: number) { + const data = { + activityTypeId, + mediaId: slug.split("-")?.[0], + url: window.location.href, + }; + // set activity + // const response = await postActivityLog(data, token); + // console.log(response); + } + + const handleDownload = () => { + if (downloadProgress === 0) { + if (!userId) { + router.push("/auth/login"); + } else { + sendActivityLog(2); + sendActivityLog(3); + + if (isDownloadAll) { + let url: string; + const baseId = slug.split("-")?.[0]; + + // if (type === "1") { + // url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${resolutionSelected}`; + // } else if (type === "2") { + url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${imageSizeSelected}`; + // } else { + // url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}`; + // } + + downloadFile(url, "FileDownload.zip"); + } else { + if (isFromSPIT && main?.url?.includes("spit.humas")) { + downloadFile(`${main?.url}`, `${main.names}`); + } else { + // const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=video&resolution=${resolutionSelected}p`; + // downloadFile(url, `${main.names}`); + const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=image&resolution=${imageSizeSelected}`; + downloadFile(url, `${main.names}`); + } + } + // } else if (type === "1" && resolutionSelected?.length > 0) { + // if (isFromSPIT && main?.url?.includes("spit.humas")) { + // downloadFile(`${main?.url}`, `${main.names}`); + // } else { + // const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=video&resolution=${resolutionSelected}p`; + // downloadFile(url, `${main.names}`); + // } + // } else if (type === "2" && imageSizeSelected?.length > 0) { + // const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=image&resolution=${imageSizeSelected}`; + // downloadFile(url, `${main.names}`); + // } else if (type === "3" || type === "4") { + // downloadFile(`${main?.url}`, `${main.names}`); + // } + } + } + }; + + const downloadFile = (fileUrl: string, name: string) => { + const xhr = new XMLHttpRequest(); + + xhr.open("GET", fileUrl, true); + xhr.responseType = "blob"; + + xhr.addEventListener("progress", (event) => { + if (event.lengthComputable) { + const percentCompleted = Math.round((event.loaded / event.total) * 100); + setDownloadProgress(percentCompleted); + } + }); + + xhr.addEventListener("readystatechange", () => { + if (xhr.readyState === 4 && xhr.status === 200) { + const contentType = xhr.getResponseHeader("content-type") || "application/octet-stream"; + const extension = contentType.split("/")[1]; + const filename = `${name}.${extension}`; + + const blob = new Blob([xhr.response], { + type: contentType, + }); + const downloadUrl = URL.createObjectURL(blob); + const a = document.createElement("a"); + + a.href = downloadUrl; + a.download = filename; + document.body.append(a); + a.click(); + a.remove(); + } + }); + + xhr.onloadend = () => { + setDownloadProgress(0); + }; + + xhr.send(); + }; + + const handleShare = (type: any, url: any) => { + if (Number(userRoleId) < 1 || userRoleId == undefined) { + router.push("/auth/login"); + } else { + sendActivityLog(2); + sendActivityLog(4); + if (type == "wa" && width <= 768) { + window.open(`whatsapp://send?${url}`, "_blank"); + } else if (type == "wa" && width > 768) { + window.open(`https://web.whatsapp.com/send?${url}`, "_blank", "noreferrer"); + } else { + window.open(url); + } + } + }; + + async function shareToEmail() { + if (Number(userRoleId) < 1 || userRoleId == undefined) { + router.push("/auth/login"); + } else { + const data = { + mediaUploadId: slug?.split("-")?.[0], + email: emailShareList || [emailShareInput], + message: emailMessageInput, + url: window.location.href, + }; + loading(); + const res = await sendMediaUploadToEmail(data); + if (res?.error) { + error(res.message); + return false; + } + close(); + successCallback("Konten Telah Dikirim"); + } + } + + const handleEmailList = (e: any) => { + const arrayEmail: any = []; + for (let i = 0; i < emailShareList?.length; i += 1) { + arrayEmail.push(emailShareList[i]); + } + if (e.which == 13) { + if (e.target.value) { + arrayEmail.push(e.target.value); + setEmailShareList(arrayEmail); + setEmailShareInput(""); + } + e.preventDefault(); + } + return false; + }; + + function addDefaultProfile(ev: any) { + ev.target.src = "/assets/avatar-profile.png"; + } + + const showInput = (e: any) => { + console.log(document.querySelector(`#${e}`)?.classList); + document.querySelector(`#${e}`)?.classList.toggle("none"); + setVisibleInput(visibleInput === e ? null : e); + }; + + const getInputValue = (e: any) => { + const message = e.target.value; + console.log(message); + setMessage(message); + }; + + async function sendSuggestionParent() { + if (message?.length > 3) { + loading(); + const data = { + mediaUploadId: slug?.split("-")?.[0], + message, + parentId: null, + }; + + const response = await createPublicSuggestion(data); + + console.log(response); + setMessage(""); + + const responseGet = await getPublicSuggestionList(slug?.split("-")?.[0]); + console.log(responseGet?.data?.data); + setListSuggestion(responseGet?.data?.data); + + // Hapus nilai semua input secara manual jika perlu + const inputs = document.querySelectorAll("input"); + inputs.forEach((input) => { + input.value = ""; + }); + + close(); + } + } + + async function sendSuggestionChild(parentId: any) { + const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement; + + if (inputElement && inputElement.value.length > 3) { + loading(); + const data = { + mediaUploadId: slug?.split("-")?.[0], + message: inputElement.value, + parentId, + }; + + console.log(data); + const response = await createPublicSuggestion(data); + console.log(response); + const responseGet: any = await getPublicSuggestionList(slug?.split("-")?.[0]); + console.log(responseGet.data?.data); + setListSuggestion(responseGet.data?.data); + + // Reset input field + inputElement.value = ""; + + // document.querySelector("#comment-id-" + parentId)?.style.display = "none"; + + close(); + } + } + + const postData = () => { + const checkMessage = checkMaliciousText(message); + if (checkMessage == "") { + if (Number(userRoleId) < 1 || userRoleId == undefined) { + router.push("/auth"); + } else { + sendSuggestionParent(); + } + } else { + warning(checkMessage); + } + }; + + const postDataChild = (id: any) => { + const checkMessage = checkMaliciousText(message); + if (checkMessage == "") { + if (Number(userRoleId) < 1 || userRoleId == undefined) { + router.push("/auth"); + } else { + sendSuggestionChild(id); + } + } else { + warning(checkMessage); + } + }; + + async function deleteDataSuggestion(dataId: any) { + loading(); + const response = await deletePublicSuggestion(dataId); + console.log(response); + const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]); + console.log(responseGet.data?.data); + setListSuggestion(responseGet.data?.data); + close(); + } + + const deleteData = (dataId: any) => { + MySwal.fire({ + title: "Delete Comment", + icon: "warning", + showCancelButton: true, + cancelButtonColor: "#3085d6", + confirmButtonColor: "#d33", + confirmButtonText: "Delete", + }).then((result) => { + if (result.isConfirmed) { + deleteDataSuggestion(dataId); + console.log(dataId); + } + }); + }; + + const shimmer = (w: number, h: number) => ` + + + + + + + + + + + + `; + + const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str)); + + return ( + <> +
+
+ {/* Bagian Kiri */} +
+ {/* Gambar Besar */} + {isLoading ? ( +
+ +
+ ) : ( +
+ Main +
+
+ )} + + {/* Gambar bawah Kecil */} + {isLoading ? ( +
+ + + +
+ ) : ( +
+ {detailDataImage?.files?.map((file: any, index: number) => ( + setSelectedImage(index)} key={file?.id}> + image-small + + ))} +
+ )} + + {/* Footer Informasi */} +
+
+

+ {t("by")} {detailDataImage?.uploadedBy?.userLevel?.name} +

+ {/*

+  | {t("updatedOn")} + {detailDataImage?.updatedAt} WIB  |  +

*/} +

+  | {t("updatedOn")}  + {formatDateToIndonesian(new Date(detailDataImage?.updatedAt))} {"WIB"} +

+

+  |  + +   {detailDataImage?.clickCount}   +

+
+
+

+ {t("creator")} + {detailDataImage?.creatorName} +

+
+
+ + {/* Keterangan */} +
+

{detailDataImage?.title}

+
+
+
+ + {/* Bagian Kanan */} +
+ {isSaved ? ( + handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer"> + +

{t("delete")}

+ + ) : ( + doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer"> + +

{t("save")}

+ + )} + + {/* garis */} +
+ + + {detailDataImage?.category?.name} + + + + +
+ + {/* Opsi Ukuran Foto */} +

{t("imageSize")}

+
+ +
+ {sizes.map((size: any) => ( +
+
+ setImageSizeSelected(e.target.value)} className="text-red-600 focus:ring-red-600" /> +
{size?.label}
+
+
{size?.value}
+
+ ))} +
+ + {/* Download Semua */} +
+ +
+ + {/* Tombol Download */} + + + {/* Tombol Bagikan */} + +
+
+
+ +
+ {/* Comment */} +
+
+

{t("comment")}

+