832 lines
28 KiB
TypeScript
832 lines
28 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card } from "@/components/ui/card";
|
|
import { Archive, Star, Trash2, Undo2, HeartOff } from "lucide-react";
|
|
import Swal from "sweetalert2";
|
|
import withReactContent from "sweetalert2-react-content";
|
|
import { getBookmarks, BookmarkItem } from "@/service/content";
|
|
import {
|
|
Pagination,
|
|
PaginationContent,
|
|
PaginationItem,
|
|
PaginationLink,
|
|
PaginationNext,
|
|
PaginationPrevious,
|
|
} from "@/components/ui/pagination";
|
|
|
|
function formatTanggal(dateString: string) {
|
|
if (!dateString) return "";
|
|
return (
|
|
new Date(dateString)
|
|
.toLocaleString("id-ID", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
hour12: false,
|
|
timeZone: "Asia/Jakarta",
|
|
})
|
|
.replace(/\./g, ":") + " WIB"
|
|
);
|
|
}
|
|
|
|
function getLink(item: BookmarkItem) {
|
|
switch (item.article?.typeId) {
|
|
case 1:
|
|
return `/content/image/detail/${item.article?.id}`;
|
|
case 2:
|
|
return `/content/video/detail/${item.article?.id}`;
|
|
case 3:
|
|
return `/content/text/detail/${item.article?.id}`;
|
|
case 4:
|
|
return `/content/audio/detail/${item.article?.id}`;
|
|
default:
|
|
return "#";
|
|
}
|
|
}
|
|
|
|
type ForYouCardGridProps = {
|
|
filterType: "My Collections" | "Archives" | "Favorites";
|
|
selectedCategory?: string; // ✅ tambahkan ini
|
|
};
|
|
|
|
export default function ForYouCardGrid({ filterType }: ForYouCardGridProps) {
|
|
const [bookmarks, setBookmarks] = useState<BookmarkItem[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [contentType, setContentType] = useState<
|
|
"image" | "video" | "text" | "audio"
|
|
>("image");
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [totalPages, setTotalPages] = useState(1);
|
|
const [totalData, setTotalData] = useState(0);
|
|
const itemsPerPage = 6;
|
|
const MySwal = withReactContent(Swal);
|
|
|
|
useEffect(() => {
|
|
fetchBookmarks();
|
|
}, [filterType, currentPage]);
|
|
|
|
const fetchBookmarks = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await getBookmarks(
|
|
currentPage,
|
|
itemsPerPage,
|
|
filterType,
|
|
);
|
|
if (!response?.error) {
|
|
const data = response.data?.data || [];
|
|
const meta = response.data?.meta;
|
|
const totalCount = meta?.count ?? data.length ?? 0;
|
|
const totalPageCount = Math.max(
|
|
1,
|
|
Math.ceil(totalCount / itemsPerPage)
|
|
);
|
|
|
|
setBookmarks(data);
|
|
setTotalPages(totalPageCount);
|
|
setTotalData(totalCount);
|
|
|
|
if (currentPage > totalPageCount) setCurrentPage(1);
|
|
} else {
|
|
MySwal.fire("Error", "Gagal memuat bookmark.", "error");
|
|
}
|
|
} catch (err) {
|
|
console.error(err);
|
|
MySwal.fire("Error", "Terjadi kesalahan saat memuat bookmark.", "error");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleAction = (action: string, title: string) => {
|
|
MySwal.fire({
|
|
icon: "info",
|
|
title: action,
|
|
text: `${title} berhasil di${action.toLowerCase()}.`,
|
|
timer: 1200,
|
|
showConfirmButton: false,
|
|
});
|
|
};
|
|
|
|
const renderButtons = (bookmark: BookmarkItem) => {
|
|
const title = bookmark.article?.title || "Konten";
|
|
|
|
if (filterType === "Archives") {
|
|
return (
|
|
<div className="flex gap-2 mt-3 justify-center">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => handleAction("Unarchive", title)}
|
|
className="text-blue-600 border-blue-200 hover:bg-blue-50"
|
|
>
|
|
<Undo2 className="w-[10px] h-[10px]" />
|
|
Unarchive
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => handleAction("Delete", title)}
|
|
className="text-red-600 border-red-200 hover:bg-red-50"
|
|
>
|
|
<Trash2 className="w-[10px] h-[10px]" />
|
|
Delete
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (filterType === "Favorites") {
|
|
return (
|
|
<div className="flex gap-2 mt-3 justify-center">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => handleAction("Archive", title)}
|
|
className="text-gray-700 border-gray-300 hover:bg-gray-100"
|
|
>
|
|
<Archive className="w-[10px] h-[10px]" />
|
|
Archive
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => handleAction("Unfavorite", title)}
|
|
className="text-yellow-600 border-yellow-200 hover:bg-yellow-50"
|
|
>
|
|
<HeartOff className="w-[10px] h-[10px]" />
|
|
Unfavorite
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex gap-2 mt-3 justify-center">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => handleAction("Archive", title)}
|
|
className="text-gray-700 border-gray-300 hover:bg-gray-100"
|
|
>
|
|
<Archive className="w-[10px] h-[10px]" />
|
|
Archive
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => handleAction("Favorite", title)}
|
|
className="text-yellow-600 border-yellow-200 hover:bg-yellow-50"
|
|
>
|
|
<Star className="w-[10px] h-[10px]" />
|
|
Favorite
|
|
</Button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const renderCard = (bookmark: BookmarkItem) => (
|
|
<div className="rounded-xl shadow-md bg-white hover:shadow-lg transition-shadow overflow-hidden">
|
|
{/* Gambar / ikon */}
|
|
{bookmark.article?.typeId === 3 ? (
|
|
// 📝 TEXT
|
|
<div className="bg-[#e0c350] flex items-center justify-center h-[200px] text-white">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="80"
|
|
height="80"
|
|
viewBox="0 0 16 16"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M5 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V5.414a1.5 1.5 0 0 0-.44-1.06L9.647 1.439A1.5 1.5 0 0 0 8.586 1zM4 3a1 1 0 0 1 1-1h3v2.5A1.5 1.5 0 0 0 9.5 6H12v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm7.793 2H9.5a.5.5 0 0 1-.5-.5V2.207z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
) : bookmark.article?.typeId === 4 ? (
|
|
// 🎵 AUDIO
|
|
<div className="flex items-center justify-center bg-[#bb3523] w-full h-[200px] text-white">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="100"
|
|
height="100"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M14.702 2.226A1 1 0 0 1 16 3.18v6.027a5.5 5.5 0 0 0-1-.184V6.18L8 8.368V15.5a2.5 2.5 0 1 1-1-2V5.368a1 1 0 0 1 .702-.955zM8 7.32l7-2.187V3.18L8 5.368zM5.5 14a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m13.5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.265-.436l-2.994-1.65a.5.5 0 0 0-.741.438v3.3a.5.5 0 0 0 .741.438l2.994-1.65a.5.5 0 0 0 0-.876"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
) : (
|
|
// 📸 / 🎬
|
|
<div className="relative w-full h-[200px]">
|
|
<Link href={getLink(bookmark)}>
|
|
<Image
|
|
src={bookmark.article?.thumbnailUrl || "/placeholder.png"}
|
|
alt={bookmark.article?.title || "No Title"}
|
|
fill
|
|
className="object-cover cursor-pointer hover:opacity-90 transition"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
|
|
{/* Caption */}
|
|
<div className="p-3">
|
|
<p className="text-xs text-gray-500 mb-1">
|
|
Disimpan: {formatTanggal(bookmark.createdAt)}
|
|
</p>
|
|
<Link href={getLink(bookmark)}>
|
|
<p className="text-sm font-semibold line-clamp-2 hover:text-blue-600 transition-colors">
|
|
{bookmark.article?.title}
|
|
</p>
|
|
</Link>
|
|
{renderButtons(bookmark)}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// Filter sesuai tab
|
|
const filtered = bookmarks.filter((b) => {
|
|
const t = b.article?.typeId;
|
|
switch (contentType) {
|
|
case "image":
|
|
return t === 1;
|
|
case "video":
|
|
return t === 2;
|
|
case "text":
|
|
return t === 3;
|
|
case "audio":
|
|
return t === 4;
|
|
default:
|
|
return true;
|
|
}
|
|
});
|
|
|
|
return (
|
|
<section className="bg-white px-4 py-6 border rounded-md border-[#CDD5DF]">
|
|
{/* Tabs */}
|
|
<div className="flex justify-center mb-8">
|
|
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl p-4 border-2 border-blue-100 shadow-lg">
|
|
<div className="flex flex-wrap justify-center gap-2">
|
|
{["image", "video", "audio", "text"].map((type) => (
|
|
<button
|
|
key={type}
|
|
onClick={() => {
|
|
setContentType(type as any);
|
|
setCurrentPage(1);
|
|
}}
|
|
className={`px-4 py-2 rounded-full text-xs font-semibold transition-all duration-300 transform hover:scale-105 ${
|
|
contentType === type
|
|
? "bg-gradient-to-r from-orange-500 to-red-600 text-white shadow-lg ring-2 ring-orange-300"
|
|
: "bg-white text-orange-600 border-2 border-orange-200 hover:border-orange-400 hover:shadow-md"
|
|
}`}
|
|
>
|
|
{type === "image"
|
|
? "📸 Foto"
|
|
: type === "video"
|
|
? "🎬 Audio Visual"
|
|
: type === "audio"
|
|
? "🎵 Audio"
|
|
: "📝 Text"}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Grid + Pagination */}
|
|
{loading ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{[...Array(6)].map((_, i) => (
|
|
<Card key={i} className="p-4 animate-pulse">
|
|
<div className="w-full h-48 bg-gray-200 rounded-lg mb-4"></div>
|
|
<div className="space-y-2">
|
|
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
|
<div className="h-4 bg-gray-200 rounded w-1/2"></div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
) : filtered.length > 0 ? (
|
|
<>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
|
|
{filtered.map((b) => renderCard(b))}
|
|
</div>
|
|
|
|
{totalPages > 1 && (
|
|
<div className="flex flex-col items-center space-y-2">
|
|
<Pagination>
|
|
<PaginationContent>
|
|
<PaginationItem>
|
|
<PaginationPrevious
|
|
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
|
className={
|
|
currentPage === 1
|
|
? "pointer-events-none opacity-50"
|
|
: "cursor-pointer"
|
|
}
|
|
/>
|
|
</PaginationItem>
|
|
|
|
{Array.from({ length: totalPages }, (_, i) => i + 1).map(
|
|
(n) => (
|
|
<PaginationItem key={n}>
|
|
<PaginationLink
|
|
onClick={() => setCurrentPage(n)}
|
|
isActive={currentPage === n}
|
|
>
|
|
{n}
|
|
</PaginationLink>
|
|
</PaginationItem>
|
|
)
|
|
)}
|
|
|
|
<PaginationItem>
|
|
<PaginationNext
|
|
onClick={() =>
|
|
setCurrentPage((p) => Math.min(totalPages, p + 1))
|
|
}
|
|
className={
|
|
currentPage === totalPages
|
|
? "pointer-events-none opacity-50"
|
|
: "cursor-pointer"
|
|
}
|
|
/>
|
|
</PaginationItem>
|
|
</PaginationContent>
|
|
</Pagination>
|
|
|
|
<p className="text-xs text-gray-500">
|
|
Menampilkan halaman {currentPage} dari {totalPages} • Total{" "}
|
|
{totalData} konten
|
|
</p>
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<Card className="p-8 text-center">
|
|
<p className="text-gray-600 text-sm">Tidak ada bookmark ditemukan.</p>
|
|
</Card>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// "use client";
|
|
|
|
// import { useState, useEffect } from "react";
|
|
// import Image from "next/image";
|
|
// import Link from "next/link";
|
|
// import { Button } from "@/components/ui/button";
|
|
// import { Archive, Star, Trash2, Box, Undo2, HeartOff } from "lucide-react";
|
|
// import Swal from "sweetalert2";
|
|
// import withReactContent from "sweetalert2-react-content";
|
|
// import { getBookmarks } from "@/service/content";
|
|
// import { BookmarkItem } from "@/service/content";
|
|
// import { Swiper, SwiperSlide } from "swiper/react";
|
|
// import "swiper/css";
|
|
// import "swiper/css/navigation";
|
|
// import { Navigation } from "swiper/modules";
|
|
|
|
// function formatTanggal(dateString: string) {
|
|
// if (!dateString) return "";
|
|
// return (
|
|
// new Date(dateString)
|
|
// .toLocaleString("id-ID", {
|
|
// day: "2-digit",
|
|
// month: "short",
|
|
// year: "numeric",
|
|
// hour: "2-digit",
|
|
// minute: "2-digit",
|
|
// hour12: false,
|
|
// timeZone: "Asia/Jakarta",
|
|
// })
|
|
// .replace(/\./g, ":") + " WIB"
|
|
// );
|
|
// }
|
|
|
|
// function getLink(item: BookmarkItem) {
|
|
// switch (item.article?.typeId) {
|
|
// case 1:
|
|
// return `/content/image/detail/${item.article?.id}`;
|
|
// case 2:
|
|
// return `/content/video/detail/${item.article?.id}`;
|
|
// case 3:
|
|
// return `/content/text/detail/${item.article?.id}`;
|
|
// case 4:
|
|
// return `/content/audio/detail/${item.article?.id}`;
|
|
// default:
|
|
// return "#";
|
|
// }
|
|
// }
|
|
|
|
// type ForYouCardGridProps = {
|
|
// filterType: "My Collections" | "Archives" | "Favorites";
|
|
// selectedCategory?: string;
|
|
// };
|
|
|
|
// export default function ForYouCardGrid({ filterType }: ForYouCardGridProps) {
|
|
// const [bookmarks, setBookmarks] = useState<BookmarkItem[]>([]);
|
|
// const [loading, setLoading] = useState(true);
|
|
// const [contentType, setContentType] = useState<
|
|
// "image" | "video" | "text" | "audio"
|
|
// >("image");
|
|
// const MySwal = withReactContent(Swal);
|
|
|
|
// useEffect(() => {
|
|
// fetchBookmarks();
|
|
// }, [filterType]);
|
|
|
|
// const fetchBookmarks = async () => {
|
|
// try {
|
|
// setLoading(true);
|
|
// const response = await getBookmarks(1, 50, filterType);
|
|
// if (!response?.error) {
|
|
// setBookmarks(response.data?.data || []);
|
|
// } else {
|
|
// MySwal.fire("Error", "Gagal memuat bookmark.", "error");
|
|
// }
|
|
// } catch (err) {
|
|
// console.error(err);
|
|
// MySwal.fire("Error", "Terjadi kesalahan saat memuat bookmark.", "error");
|
|
// } finally {
|
|
// setLoading(false);
|
|
// }
|
|
// };
|
|
|
|
// const filtered = bookmarks.filter((b) => {
|
|
// const t = b.article?.typeId;
|
|
// switch (contentType) {
|
|
// case "image":
|
|
// return t === 1;
|
|
// case "video":
|
|
// return t === 2;
|
|
// case "text":
|
|
// return t === 3;
|
|
// case "audio":
|
|
// return t === 4;
|
|
// default:
|
|
// return true;
|
|
// }
|
|
// });
|
|
|
|
// const handleAction = (action: string, title: string) => {
|
|
// MySwal.fire({
|
|
// icon: "info",
|
|
// title: action,
|
|
// text: `${title} berhasil di${action.toLowerCase()}.`,
|
|
// timer: 1200,
|
|
// showConfirmButton: false,
|
|
// });
|
|
// };
|
|
|
|
// const renderButtons = (bookmark: BookmarkItem) => {
|
|
// const title = bookmark.article?.title || "Konten";
|
|
|
|
// if (filterType === "Archives") {
|
|
// return (
|
|
// <div className="flex gap-2 mt-3 justify-center">
|
|
// <Button
|
|
// size="sm"
|
|
// variant="outline"
|
|
// onClick={() => handleAction("Unarchive", title)}
|
|
// className="flex items-center text-xs gap-1 text-blue-600 border-blue-200 hover:bg-blue-50 cursor-pointer"
|
|
// >
|
|
// <Undo2 className="w-[10px] h-[10px]" />
|
|
// <p className="text-[10px]">Unarchive</p>
|
|
// </Button>
|
|
// <Button
|
|
// size="sm"
|
|
// variant="outline"
|
|
// onClick={() => handleAction("Delete", title)}
|
|
// className="flex items-center text-xs gap-1 text-red-600 border-red-200 hover:bg-red-50 cursor-pointer"
|
|
// >
|
|
// <Trash2 className="w-[10px] h-[10px]" />
|
|
// <p className="text-[10px]">Delete</p>
|
|
// </Button>
|
|
// </div>
|
|
// );
|
|
// }
|
|
|
|
// if (filterType === "Favorites") {
|
|
// return (
|
|
// <div className="flex gap-2 mt-3 justify-center">
|
|
// <Button
|
|
// size="sm"
|
|
// variant="outline"
|
|
// onClick={() => handleAction("Archive", title)}
|
|
// className="flex items-center text-xs gap-1 text-gray-700 border-gray-300 hover:bg-gray-100 cursor-pointer"
|
|
// >
|
|
// <Archive className="w-[10px] h-[10px]" />
|
|
// <p className="text-[10px]">Archive</p>
|
|
// </Button>
|
|
// <Button
|
|
// size="sm"
|
|
// variant="outline"
|
|
// onClick={() => handleAction("Unfavorite", title)}
|
|
// className="flex items-center gap-1 text-yellow-600 border-yellow-200 hover:bg-yellow-50 cursor-pointer"
|
|
// >
|
|
// <HeartOff className="w-[10px] h-[10px]" />
|
|
// <p className="text-[10px]">Unfavorite</p>
|
|
// </Button>
|
|
// </div>
|
|
// );
|
|
// }
|
|
|
|
// return (
|
|
// <div className="flex gap-2 mt-3 justify-center">
|
|
// <Button
|
|
// size="sm"
|
|
// variant="outline"
|
|
// onClick={() => handleAction("Archive", title)}
|
|
// className="flex items-center text-xs gap-1 text-gray-700 border-gray-300 hover:bg-gray-100 cursor-pointer"
|
|
// >
|
|
// <Archive className="w-[10px] h-[10px]" />
|
|
// <p className="text-[10px]">Archive</p>
|
|
// </Button>
|
|
// <Button
|
|
// size="sm"
|
|
// variant="outline"
|
|
// onClick={() => handleAction("Favorite", title)}
|
|
// className="flex items-center gap-1 text-yellow-600 border-yellow-200 hover:bg-yellow-50 cursor-pointer"
|
|
// >
|
|
// <Star className="w-[10px] h-[10px]" />
|
|
// <p className="text-[10px]">Favorite</p>
|
|
// </Button>
|
|
// </div>
|
|
// );
|
|
// };
|
|
|
|
// const renderCard = (bookmark: BookmarkItem) => (
|
|
// <div className="rounded-xl shadow-md bg-white hover:shadow-lg transition-shadow overflow-hidden">
|
|
// {/* Gambar / ikon */}
|
|
// {bookmark.article?.typeId === 3 ? (
|
|
// // 📝 TEXT
|
|
// <div className="bg-[#e0c350] flex items-center justify-center h-[200px] text-white">
|
|
// <svg
|
|
// xmlns="http://www.w3.org/2000/svg"
|
|
// width="80"
|
|
// height="80"
|
|
// viewBox="0 0 16 16"
|
|
// >
|
|
// <path
|
|
// fill="currentColor"
|
|
// d="M5 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V5.414a1.5 1.5 0 0 0-.44-1.06L9.647 1.439A1.5 1.5 0 0 0 8.586 1zM4 3a1 1 0 0 1 1-1h3v2.5A1.5 1.5 0 0 0 9.5 6H12v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm7.793 2H9.5a.5.5 0 0 1-.5-.5V2.207z"
|
|
// />
|
|
// </svg>
|
|
// </div>
|
|
// ) : bookmark.article?.typeId === 4 ? (
|
|
// // 🎵 AUDIO
|
|
// <div className="flex items-center justify-center bg-[#bb3523] w-full h-[200px] text-white">
|
|
// <svg
|
|
// xmlns="http://www.w3.org/2000/svg"
|
|
// width="100"
|
|
// height="100"
|
|
// viewBox="0 0 20 20"
|
|
// >
|
|
// <path
|
|
// fill="currentColor"
|
|
// d="M14.702 2.226A1 1 0 0 1 16 3.18v6.027a5.5 5.5 0 0 0-1-.184V6.18L8 8.368V15.5a2.5 2.5 0 1 1-1-2V5.368a1 1 0 0 1 .702-.955zM8 7.32l7-2.187V3.18L8 5.368zM5.5 14a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m13.5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.265-.436l-2.994-1.65a.5.5 0 0 0-.741.438v3.3a.5.5 0 0 0 .741.438l2.994-1.65a.5.5 0 0 0 0-.876"
|
|
// />
|
|
// </svg>
|
|
// </div>
|
|
// ) : (
|
|
// // 📸 / 🎬
|
|
// <div className="relative w-full h-[200px]">
|
|
// <Link href={getLink(bookmark)}>
|
|
// <Image
|
|
// src={bookmark.article?.thumbnailUrl || "/placeholder.png"}
|
|
// alt={bookmark.article?.title || "No Title"}
|
|
// fill
|
|
// className="object-cover cursor-pointer hover:opacity-90 transition"
|
|
// />
|
|
// </Link>
|
|
// </div>
|
|
// )}
|
|
|
|
// {/* Caption */}
|
|
// <div className="p-3">
|
|
// <p className="text-xs text-gray-500 mb-1">
|
|
// Disimpan: {formatTanggal(bookmark.createdAt)}
|
|
// </p>
|
|
// <Link href={getLink(bookmark)}>
|
|
// <p className="text-sm font-semibold line-clamp-2 hover:text-blue-600 transition-colors">
|
|
// {bookmark.article?.title}
|
|
// </p>
|
|
// </Link>
|
|
// {renderButtons(bookmark)}
|
|
// </div>
|
|
// </div>
|
|
// );
|
|
|
|
// if (loading)
|
|
// return (
|
|
// <div className="text-center py-12 text-gray-500">Memuat konten...</div>
|
|
// );
|
|
|
|
// // if (filtered.length === 0)
|
|
// // return (
|
|
// // <div className="text-center py-12">
|
|
// // <div className="text-gray-400 text-6xl mb-4">📂</div>
|
|
// // <h3 className="text-xl font-semibold text-gray-600 mb-2">
|
|
// // Tidak Ada Konten di {filterType}
|
|
// // </h3>
|
|
// // </div>
|
|
// // );
|
|
|
|
// return (
|
|
// <section className="bg-white px-4 py-6 border rounded-md border-[#CDD5DF]">
|
|
// {/* Tab Filter Konten */}
|
|
// <div className="flex justify-center mb-8">
|
|
// <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl p-4 border-2 border-blue-100 shadow-lg">
|
|
// <div className="flex flex-wrap justify-center gap-2">
|
|
// {["image", "video", "audio", "text"].map((type) => (
|
|
// <button
|
|
// key={type}
|
|
// onClick={() => setContentType(type as any)}
|
|
// className={`px-4 py-2 rounded-full text-xs font-semibold transition-all duration-300 transform hover:scale-105 ${
|
|
// contentType === type
|
|
// ? "bg-gradient-to-r from-orange-500 to-red-600 text-white shadow-lg ring-2 ring-orange-300"
|
|
// : "bg-white text-orange-600 border-2 border-orange-200 hover:border-orange-400 hover:shadow-md"
|
|
// }`}
|
|
// >
|
|
// {type === "image"
|
|
// ? "📸 Foto"
|
|
// : type === "video"
|
|
// ? "🎬 Audio Visual"
|
|
// : type === "audio"
|
|
// ? "🎵 Audio"
|
|
// : "📝 Text"}
|
|
// </button>
|
|
// ))}
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
|
|
// {/* 🔹 Jika tidak ada data */}
|
|
// {filtered.length === 0 ? (
|
|
// <div className="text-center py-12 text-gray-500">
|
|
// Tidak ada konten di {filterType}.
|
|
// </div>
|
|
// ) : (
|
|
// /* 🔹 Swiper hanya muncul kalau ada data */
|
|
// <div className="w-full overflow-hidden">
|
|
// <Swiper
|
|
// modules={[Navigation]}
|
|
// navigation
|
|
// spaceBetween={16}
|
|
// slidesPerView="auto"
|
|
// centeredSlides={false}
|
|
// className="!overflow-hidden px-2"
|
|
// breakpoints={{
|
|
// 320: { slidesPerView: 1.2, spaceBetween: 12 },
|
|
// 640: { slidesPerView: 2, spaceBetween: 16 },
|
|
// 1024: { slidesPerView: 3, spaceBetween: 20 },
|
|
// 1280: { slidesPerView: 4, spaceBetween: 24 },
|
|
// }}
|
|
// style={{
|
|
// maxWidth: "100%",
|
|
// overflow: "hidden",
|
|
// }}
|
|
// >
|
|
// {filtered.map((bookmark) => (
|
|
// <SwiperSlide
|
|
// key={bookmark.id}
|
|
// className="!w-[280px] sm:!w-[320px] md:!w-[190px] !h-auto"
|
|
// >
|
|
// {renderCard(bookmark)}
|
|
// </SwiperSlide>
|
|
// ))}
|
|
// </Swiper>
|
|
// </div>
|
|
// )}
|
|
// </section>
|
|
// );
|
|
// }
|
|
|
|
// "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>
|
|
// );
|
|
// }
|