medol
/
web-asuransi-aman
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
components/details/details-content.tsx
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 (
<> <>
@ -364,38 +364,50 @@ export default function DetailContent() {
<div className="w-full h-auto mb-6"> <div className="w-full h-auto mb-6">
{/* Gambar utama */} {/* Gambar utama */}
<div className="w-full"> {articleDetail?.files && articleDetail.files.length > 0 ? (
<Image <>
src={articleDetail.files[selectedIndex].fileUrl} {/* Gambar utama */}
alt={articleDetail.files[selectedIndex].fileAlt || "Berita"} <div className="w-full">
width={800}
height={400}
className="rounded-lg w-full object-cover"
/>
</div>
{/* Thumbnail */}
<div className="flex gap-2 mt-3 overflow-x-auto">
{articleDetail.files.map((file: any, index: number) => (
<button
key={file.id || index}
onClick={() => setSelectedIndex(index)}
className={`border-2 rounded-lg overflow-hidden ${
selectedIndex === index
? "border-red-500"
: "border-transparent"
}`}
>
<Image <Image
src={file.fileUrl} src={articleDetail.files[selectedIndex]?.fileUrl}
alt={file.fileAlt || "Thumbnail"} alt={
width={100} articleDetail.files[selectedIndex]?.fileAlt || "Berita"
height={80} }
className="object-cover" width={800}
height={400}
className="rounded-lg w-full object-cover"
/> />
</button> </div>
))}
</div> {/* Thumbnail */}
<div className="flex gap-2 mt-3 overflow-x-auto">
{articleDetail.files.map((file: any, index: number) => (
<button
key={file?.id || index}
onClick={() => setSelectedIndex(index)}
className={`border-2 rounded-lg overflow-hidden ${
selectedIndex === index
? "border-red-500"
: "border-transparent"
}`}
>
<Image
src={file?.fileUrl}
alt={file?.fileAlt || "Thumbnail"}
width={100}
height={80}
className="object-cover"
/>
</button>
))}
</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">