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

update

This commit is contained in:
Anang Yusman 2025-10-13 15:57:56 +08:00
parent 7ced42966b
commit db08a8051a
1 changed files with 56 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
components/details/details-content.tsx
View File

@ -294,7 +294,7 @@ export default function DetailContent() {
async function initStateData() {
loading();
const res = await getArticleById(id);
const data = res.data?.data;
const data = res?.data?.data;
setThumbnail(data?.thumbnailUrl);
setDiseId(data?.aiArticleId);
@ -303,13 +303,13 @@ export default function DetailContent() {
close();
}
if (!articleDetail?.files || articleDetail.files.length === 0) {
return (
<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>
);
}
// if (!articleDetail?.files || articleDetail?.files?.length === 0) {
// return (
// <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>
// );
// }
return (
<>
@ -372,38 +372,50 @@ export default function DetailContent() {
<div className="w-full h-auto mb-6">
{/* Gambar utama */}
<div className="w-full">
<Image
src={articleDetail.files[selectedIndex].fileUrl}
alt={articleDetail.files[selectedIndex].fileAlt || "Berita"}
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"
}`}
>
{articleDetail?.files && articleDetail.files.length > 0 ? (
<>
{/* Gambar utama */}
<div className="w-full">
<Image
src={file.fileUrl}
alt={file.fileAlt || "Thumbnail"}
width={100}
height={80}
className="object-cover"
src={articleDetail.files[selectedIndex]?.fileUrl}
alt={
articleDetail.files[selectedIndex]?.fileAlt || "Berita"
}
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 */}
<p className="text-sm text-gray-500 mt-2 text-end">
@ -575,20 +587,20 @@ export default function DetailContent() {
</p>
<div>
<h3 className="text-lg font-semibold border-b pb-2">Komentar</h3>
{commentList.length === 0 ? (
{commentList?.length === 0 ? (
<p className="text-sm text-gray-500">Belum ada komentar.</p>
) : (
commentList.map((comment: any) => (
commentList?.map((comment: any) => (
<div
key={comment.id}
key={comment?.id}
className="border rounded-lg p-3 bg-gray-50 shadow-sm"
>
<p className="text-sm text-gray-800 whitespace-pre-line">
{comment.message}
{comment?.message}
</p>
<p className="text-xs text-gray-500 mt-1">
{comment.commentFromName || "Anonim"} •{" "}
{new Date(comment.createdAt).toLocaleString("id-ID", {
{comment?.commentFromName || "Anonim"} •{" "}
{new Date(comment?.createdAt).toLocaleString("id-ID", {
dateStyle: "short",
timeStyle: "short",
})}