118 lines
3.1 KiB
TypeScript
118 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import PublicationKlFilter from "./publication-filter";
|
|
import { Button } from "@/components/ui/button";
|
|
import { mediaWishlist } from "@/service/landing/landing";
|
|
|
|
const itemsPerPage = 9;
|
|
|
|
type PublicationCardGridProps = {
|
|
selectedCategory: string;
|
|
title?: string;
|
|
refresh?: boolean;
|
|
categoryFilter?: string[];
|
|
formatFilter?: string[];
|
|
isInstitute?: boolean;
|
|
instituteId?: string;
|
|
sortBy?: string;
|
|
};
|
|
|
|
export default function ForYouCardGrid({
|
|
selectedCategory,
|
|
title,
|
|
refresh,
|
|
|
|
isInstitute = false,
|
|
instituteId = "",
|
|
}: PublicationCardGridProps) {
|
|
const [currentPage, setCurrentPage] = useState(0);
|
|
const [contentImage, setContentImage] = useState([]);
|
|
const [totalPages, setTotalPages] = useState(1);
|
|
const [categoryFilter] = useState([]);
|
|
const [formatFilter] = useState([]);
|
|
const [sortBy] = useState();
|
|
|
|
useEffect(() => {
|
|
getDataImage();
|
|
}, [currentPage, selectedCategory, title, refresh]);
|
|
|
|
async function getDataImage() {
|
|
const filter =
|
|
categoryFilter?.length > 0
|
|
? categoryFilter?.sort().join(",")
|
|
: selectedCategory || "";
|
|
|
|
const name = title ?? "";
|
|
const format = formatFilter?.join(",") ?? "";
|
|
|
|
const response = await mediaWishlist(
|
|
"1",
|
|
isInstitute ? instituteId : "",
|
|
name,
|
|
filter,
|
|
"12",
|
|
currentPage,
|
|
sortBy,
|
|
format
|
|
);
|
|
|
|
setTotalPages(response?.data?.data?.totalPages || 1);
|
|
setContentImage(response?.data?.data?.content || []);
|
|
}
|
|
|
|
const goToPage = (page: number) => {
|
|
setCurrentPage(page);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Grid Card */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{contentImage.length === 0 ? (
|
|
<div className="col-span-3 text-center text-muted-foreground">
|
|
Tidak ada konten ditemukan.
|
|
</div>
|
|
) : (
|
|
contentImage.map((item: any, idx: number) => (
|
|
<PublicationKlFilter
|
|
key={item.id}
|
|
id={item.id} // ✅ tambahkan ini
|
|
image={item.mediaUpload?.smallThumbnailLink}
|
|
label={item.mediaType?.name ?? "UNKNOWN"}
|
|
category={item.tags ?? "-"}
|
|
date={new Date(item?.mediaUpload?.createdAt).toLocaleString(
|
|
"id-ID",
|
|
{
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
timeZoneName: "short",
|
|
}
|
|
)}
|
|
title={item?.mediaUpload?.title}
|
|
description={""} // Optional: Tambahkan jika tersedia dari API
|
|
/>
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
{/* Pagination */}
|
|
<div className="flex justify-center gap-2">
|
|
{Array.from({ length: totalPages }, (_, i) => (
|
|
<Button
|
|
key={i}
|
|
variant={currentPage === i + 1 ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => goToPage(i + 1)}
|
|
>
|
|
{i + 1}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|