This commit is contained in:
Anang Yusman 2025-10-13 16:42:21 +08:00
parent 130dcc44fd
commit b8af83fe38
1 changed files with 49 additions and 37 deletions

View File

@ -305,13 +305,13 @@ export default function DetailContent() {
close(); close();
} }
if (!articleDetail?.files || articleDetail.files.length === 0) { // if (!articleDetail?.files || articleDetail.files.length === 0) {
return ( // return (
<div className="w-full h-[400px] bg-gray-100 flex items-center justify-center rounded-lg"> // <div className="w-full h-[400px] bg-gray-100 flex items-center justify-center rounded-lg">
<p className="text-gray-400 text-sm">Gambar tidak tersedia</p> // <p className="text-gray-400 text-sm">Gambar tidak tersedia</p>
</div> // </div>
); // );
} // }
return ( return (
<> <>
@ -363,11 +363,16 @@ export default function DetailContent() {
</div> </div>
<div className="w-full h-auto mb-6"> <div className="w-full h-auto mb-6">
{/* Gambar utama */}
{articleDetail?.files && articleDetail.files.length > 0 ? (
<>
{/* Gambar utama */} {/* Gambar utama */}
<div className="w-full"> <div className="w-full">
<Image <Image
src={articleDetail.files[selectedIndex].fileUrl} src={articleDetail.files[selectedIndex]?.fileUrl}
alt={articleDetail.files[selectedIndex].fileAlt || "Berita"} alt={
articleDetail.files[selectedIndex]?.fileAlt || "Berita"
}
width={800} width={800}
height={400} height={400}
className="rounded-lg w-full object-cover" className="rounded-lg w-full object-cover"
@ -378,7 +383,7 @@ export default function DetailContent() {
<div className="flex gap-2 mt-3 overflow-x-auto"> <div className="flex gap-2 mt-3 overflow-x-auto">
{articleDetail.files.map((file: any, index: number) => ( {articleDetail.files.map((file: any, index: number) => (
<button <button
key={file.id || index} key={file?.id || index}
onClick={() => setSelectedIndex(index)} onClick={() => setSelectedIndex(index)}
className={`border-2 rounded-lg overflow-hidden ${ className={`border-2 rounded-lg overflow-hidden ${
selectedIndex === index selectedIndex === index
@ -387,8 +392,8 @@ export default function DetailContent() {
}`} }`}
> >
<Image <Image
src={file.fileUrl} src={file?.fileUrl}
alt={file.fileAlt || "Thumbnail"} alt={file?.fileAlt || "Thumbnail"}
width={100} width={100}
height={80} height={80}
className="object-cover" className="object-cover"
@ -396,6 +401,13 @@ export default function DetailContent() {
</button> </button>
))} ))}
</div> </div>
</>
) : (
// Jika file kosong/null tapi tetap render data lainnya
<div className="w-full h-[400px] bg-gray-100 flex items-center justify-center rounded-lg">
<p className="text-gray-400 text-sm">Gambar tidak tersedia</p>
</div>
)}
{/* Slug */} {/* Slug */}
<p className="text-sm text-gray-500 mt-2 text-end"> <p className="text-sm text-gray-500 mt-2 text-end">