708 lines
21 KiB
TypeScript
708 lines
21 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { ThumbsUp, ThumbsDown } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import { useParams, useRouter } from "next/navigation";
|
|
import Swal from "sweetalert2";
|
|
import withReactContent from "sweetalert2-react-content";
|
|
import { listData, listArticles } from "@/service/landing/landing";
|
|
import { getCookiesDecrypt } from "@/lib/utils";
|
|
import { toggleBookmark, getBookmarkSummaryForUser } from "@/service/content";
|
|
|
|
export default function Header() {
|
|
const [data, setData] = useState<any[]>([]);
|
|
const [bookmarkedIds, setBookmarkedIds] = useState<Set<number>>(new Set());
|
|
const [userId, setUserId] = useState<string | null>(getCookiesDecrypt("uie") || null);
|
|
const router = useRouter();
|
|
const params = useParams();
|
|
const MySwal = withReactContent(Swal);
|
|
const slug = params?.slug as string;
|
|
|
|
// ✅ Ambil data artikel
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const response = await listArticles(
|
|
1,
|
|
5,
|
|
undefined,
|
|
undefined,
|
|
undefined,
|
|
"createdAt",
|
|
slug
|
|
);
|
|
|
|
let articlesData: any[] = [];
|
|
|
|
if (response?.error) {
|
|
const fallback = await listData(
|
|
"",
|
|
"",
|
|
"",
|
|
5,
|
|
0,
|
|
"createdAt",
|
|
"",
|
|
"",
|
|
""
|
|
);
|
|
articlesData = fallback?.data?.data?.content || [];
|
|
} else {
|
|
articlesData = response?.data?.data || [];
|
|
}
|
|
|
|
const transformed = articlesData.map((article: any) => ({
|
|
id: article.id,
|
|
title: article.title,
|
|
categoryName:
|
|
article.categoryName ||
|
|
(article.categories && article.categories[0]?.title) ||
|
|
"",
|
|
createdAt: article.createdAt,
|
|
smallThumbnailLink: article.thumbnailUrl,
|
|
fileTypeId: article.typeId,
|
|
clientName: article.clientName,
|
|
categories: article.categories,
|
|
label:
|
|
article.typeId === 1
|
|
? "Image"
|
|
: article.typeId === 2
|
|
? "Video"
|
|
: article.typeId === 3
|
|
? "Text"
|
|
: article.typeId === 4
|
|
? "Audio"
|
|
: "",
|
|
}));
|
|
|
|
setData(transformed);
|
|
} catch (error) {
|
|
console.error("Gagal memuat data:", error);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, [slug]);
|
|
|
|
useEffect(() => {
|
|
const fetchBookmarks = async () => {
|
|
const currentUserId: any = getCookiesDecrypt("uie");
|
|
setUserId(currentUserId);
|
|
|
|
if (!currentUserId) {
|
|
setBookmarkedIds(new Set());
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const res = await getBookmarkSummaryForUser();
|
|
const bookmarks =
|
|
res?.data?.data?.recentBookmarks ||
|
|
res?.data?.data?.bookmarks ||
|
|
res?.data?.data ||
|
|
[];
|
|
|
|
const ids = new Set<number>(
|
|
(Array.isArray(bookmarks) ? bookmarks : [])
|
|
.map((b: any) => Number(b.articleId ?? b.id ?? b.article?.id))
|
|
.filter((x) => !isNaN(x))
|
|
);
|
|
|
|
setBookmarkedIds(ids);
|
|
} catch (err) {
|
|
console.error("Gagal memuat bookmark user:", err);
|
|
setBookmarkedIds(new Set());
|
|
}
|
|
};
|
|
|
|
fetchBookmarks();
|
|
}, [userId]);
|
|
|
|
return (
|
|
<section className="max-w-[1350px] mx-auto px-4">
|
|
<div className="flex flex-col lg:flex-row gap-6 py-6">
|
|
{data.length > 0 && (
|
|
<Card
|
|
key={data[0].id}
|
|
item={data[0]}
|
|
isBig
|
|
isInitiallyBookmarked={bookmarkedIds.has(Number(data[0].id))}
|
|
onSaved={(id) =>
|
|
setBookmarkedIds((prev) => new Set([...prev, Number(id)]))
|
|
}
|
|
onRemoved={(id) =>
|
|
setBookmarkedIds((prev) => {
|
|
const next = new Set(prev);
|
|
next.delete(Number(id));
|
|
return next;
|
|
})
|
|
}
|
|
/>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
|
|
{data.slice(1, 5).map((item) => (
|
|
<Card
|
|
key={item.id}
|
|
item={item}
|
|
isInitiallyBookmarked={bookmarkedIds.has(Number(item.id))}
|
|
onSaved={(id) =>
|
|
setBookmarkedIds((prev) => new Set([...prev, Number(id)]))
|
|
}
|
|
onRemoved={(id) =>
|
|
setBookmarkedIds((prev) => {
|
|
const next = new Set(prev);
|
|
next.delete(Number(id));
|
|
return next;
|
|
})
|
|
}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative w-full h-48 sm:h-64 md:h-80 lg:h-[460px] mt-4 rounded-xl">
|
|
<Image
|
|
src={"/PPS.png"}
|
|
alt={"pps"}
|
|
fill
|
|
className="object-cover rounded-xl"
|
|
/>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function Card({
|
|
item,
|
|
isBig = false,
|
|
isInitiallyBookmarked = false,
|
|
onSaved,
|
|
onRemoved,
|
|
}: {
|
|
item: any;
|
|
isBig?: boolean;
|
|
isInitiallyBookmarked?: boolean;
|
|
onSaved?: (id: number) => void;
|
|
onRemoved?: (id: number) => void;
|
|
}) {
|
|
const router = useRouter();
|
|
const MySwal = withReactContent(Swal);
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const [isBookmarked, setIsBookmarked] = useState(isInitiallyBookmarked);
|
|
|
|
useEffect(() => {
|
|
setIsBookmarked(isInitiallyBookmarked);
|
|
}, [isInitiallyBookmarked]);
|
|
|
|
const getLink = () => {
|
|
switch (item?.fileTypeId) {
|
|
case 1:
|
|
return `/content/image/detail/${item?.id}`;
|
|
case 2:
|
|
return `/content/video/detail/${item?.id}`;
|
|
case 3:
|
|
return `/content/text/detail/${item?.id}`;
|
|
case 4:
|
|
return `/content/audio/detail/${item?.id}`;
|
|
default:
|
|
return "#";
|
|
}
|
|
};
|
|
|
|
const handleToggleBookmark = async () => {
|
|
const roleId = Number(getCookiesDecrypt("urie"));
|
|
if (!roleId || isNaN(roleId)) {
|
|
MySwal.fire({
|
|
icon: "warning",
|
|
title: "Login diperlukan",
|
|
text: "Silakan login terlebih dahulu untuk menyimpan artikel.",
|
|
confirmButtonText: "Login Sekarang",
|
|
confirmButtonColor: "#d33",
|
|
}).then(() => router.push("/auth"));
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setIsSaving(true);
|
|
const res = await toggleBookmark(item.id);
|
|
|
|
if (res?.error) {
|
|
MySwal.fire({
|
|
icon: "error",
|
|
title: "Gagal",
|
|
text: "Gagal memperbarui bookmark.",
|
|
confirmButtonColor: "#d33",
|
|
});
|
|
} else {
|
|
// ✅ Toggle berhasil di server
|
|
const nowBookmarked = !isBookmarked;
|
|
setIsBookmarked(nowBookmarked);
|
|
|
|
if (nowBookmarked) onSaved?.(item.id);
|
|
else onRemoved?.(item.id);
|
|
|
|
MySwal.fire({
|
|
icon: "success",
|
|
title: nowBookmarked ? "Disimpan!" : "Dihapus!",
|
|
text: nowBookmarked
|
|
? "Artikel berhasil disimpan ke bookmark."
|
|
: "Artikel dihapus dari bookmark.",
|
|
confirmButtonColor: "#3085d6",
|
|
timer: 1500,
|
|
showConfirmButton: false,
|
|
});
|
|
}
|
|
} catch (err) {
|
|
console.error("Toggle bookmark error:", err);
|
|
MySwal.fire({
|
|
icon: "error",
|
|
title: "Kesalahan",
|
|
text: "Terjadi kesalahan saat menyimpan artikel.",
|
|
confirmButtonColor: "#d33",
|
|
});
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div
|
|
className={`rounded-xl overflow-hidden shadow hover:shadow-lg transition-all bg-white ${
|
|
isBig
|
|
? "w-full lg:max-w-[670px] lg:min-h-[680px]"
|
|
: "w-full h-[350px] md:h-[330px]"
|
|
}`}
|
|
>
|
|
<div
|
|
className={`relative ${
|
|
isBig ? "aspect-[3/2] lg:h-[525px]" : "aspect-video"
|
|
} w-full`}
|
|
>
|
|
<Link href={getLink()}>
|
|
<Image
|
|
src={item.smallThumbnailLink || "/contributor.png"}
|
|
alt={item.title}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="p-4 space-y-2">
|
|
<div className="flex items-center gap-2 text-xs font-semibold flex-wrap">
|
|
<span className="bg-emerald-600 text-white px-2 py-0.5 rounded">
|
|
{item.clientName}
|
|
</span>
|
|
<span className="text-orange-600">
|
|
{item.categories?.map((cat: any) => cat.title).join(", ")}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="text-xs text-gray-500">
|
|
{new Date(item.createdAt)
|
|
.toLocaleString("id-ID", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
hour12: false,
|
|
timeZone: "Asia/Jakarta",
|
|
})
|
|
.replace(".", ":")}{" "}
|
|
WIB
|
|
</div>
|
|
|
|
<Link href={getLink()}>
|
|
<h3 className="text-sm font-semibold leading-snug line-clamp-2">
|
|
{item.title}
|
|
</h3>
|
|
</Link>
|
|
|
|
<div className="flex justify-between items-center pt-2">
|
|
<div className="flex gap-2 text-gray-500">
|
|
<ThumbsUp size={18} className="cursor-pointer hover:text-[#F60100]" />
|
|
<ThumbsDown size={18} className="cursor-pointer hover:text-red-600" />
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleToggleBookmark}
|
|
disabled={isSaving}
|
|
className={`text-sm px-3 py-1 rounded-md transition-all duration-200 ${
|
|
isBookmarked
|
|
? "bg-gray-400 text-white hover:bg-gray-500"
|
|
: "bg-[#F60100] text-white hover:bg-[#c90000]"
|
|
}`}
|
|
>
|
|
{isSaving
|
|
? "Saving..."
|
|
: isBookmarked
|
|
? "Saved"
|
|
: "Save"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// "use client";
|
|
|
|
// import Image from "next/image";
|
|
// import Link from "next/link";
|
|
// import { ThumbsUp, ThumbsDown } from "lucide-react";
|
|
// import { useEffect, useState } from "react";
|
|
// import { useParams, useRouter } from "next/navigation";
|
|
// import Swal from "sweetalert2";
|
|
// import withReactContent from "sweetalert2-react-content";
|
|
// import { listData, listArticles } from "@/service/landing/landing";
|
|
// import { getCookiesDecrypt } from "@/lib/utils";
|
|
// import { toggleBookmark, getBookmarkSummaryForUser } from "@/service/content";
|
|
|
|
// export default function Header() {
|
|
// const [data, setData] = useState<any[]>([]);
|
|
// const [bookmarkedIds, setBookmarkedIds] = useState<Set<number>>(new Set());
|
|
// const router = useRouter();
|
|
// const params = useParams();
|
|
// const MySwal = withReactContent(Swal);
|
|
|
|
// // Get slug from URL params
|
|
// const slug = params?.slug as string;
|
|
|
|
// useEffect(() => {
|
|
// const fetchData = async () => {
|
|
// try {
|
|
// // 🔹 Ambil artikel
|
|
// const response = await listArticles(
|
|
// 1,
|
|
// 5,
|
|
// undefined,
|
|
// undefined,
|
|
// undefined,
|
|
// "createdAt",
|
|
// slug
|
|
// );
|
|
|
|
// let articlesData: any[] = [];
|
|
|
|
// if (response?.error) {
|
|
// // fallback ke API lama
|
|
// const fallbackResponse = await listData(
|
|
// "",
|
|
// "",
|
|
// "",
|
|
// 5,
|
|
// 0,
|
|
// "createdAt",
|
|
// "",
|
|
// "",
|
|
// ""
|
|
// );
|
|
// articlesData = fallbackResponse?.data?.data?.content || [];
|
|
// } else {
|
|
// articlesData = response?.data?.data || [];
|
|
// }
|
|
|
|
// // 🔹 Transform agar seragam
|
|
// const transformed = articlesData.map((article: any) => ({
|
|
// id: article.id,
|
|
// title: article.title,
|
|
// categoryName:
|
|
// article.categoryName ||
|
|
// (article.categories && article.categories[0]?.title) ||
|
|
// "",
|
|
// createdAt: article.createdAt,
|
|
// smallThumbnailLink: article.thumbnailUrl,
|
|
// fileTypeId: article.typeId,
|
|
// clientName: article.clientName,
|
|
// categories: article.categories,
|
|
// label:
|
|
// article.typeId === 1
|
|
// ? "Image"
|
|
// : article.typeId === 2
|
|
// ? "Video"
|
|
// : article.typeId === 3
|
|
// ? "Text"
|
|
// : article.typeId === 4
|
|
// ? "Audio"
|
|
// : "",
|
|
// }));
|
|
|
|
// setData(transformed);
|
|
|
|
// const roleId = Number(getCookiesDecrypt("urie"));
|
|
// if (roleId && !isNaN(roleId)) {
|
|
// // const saved = localStorage.getItem("bookmarkedIds");
|
|
// const userId = getCookiesDecrypt("uie");
|
|
// const localKey = `bookmarkedIds_${userId || "guest"}`;
|
|
// const saved = localStorage.getItem(localKey);
|
|
|
|
// let localSet = new Set<number>();
|
|
// if (saved) {
|
|
// localSet = new Set(JSON.parse(saved));
|
|
// setBookmarkedIds(localSet);
|
|
// }
|
|
|
|
// const res = await getBookmarkSummaryForUser();
|
|
// const bookmarks =
|
|
// res?.data?.data?.recentBookmarks ||
|
|
// res?.data?.data?.bookmarks ||
|
|
// res?.data?.data ||
|
|
// [];
|
|
|
|
// const ids = new Set<number>(
|
|
// (Array.isArray(bookmarks) ? bookmarks : [])
|
|
// .map((b: any) => Number(b.articleId ?? b.id ?? b.article?.id))
|
|
// .filter((x) => !isNaN(x))
|
|
// );
|
|
|
|
// const merged = new Set([...localSet, ...ids]);
|
|
// setBookmarkedIds(merged);
|
|
// localStorage.setItem(
|
|
// "bookmarkedIds",
|
|
// JSON.stringify(Array.from(merged))
|
|
// );
|
|
// }
|
|
// } catch (error) {
|
|
// console.error("Gagal memuat data:", error);
|
|
// }
|
|
// };
|
|
|
|
// fetchData();
|
|
// }, []);
|
|
|
|
// // Simpan setiap kali state berubah
|
|
// useEffect(() => {
|
|
// if (bookmarkedIds.size > 0) {
|
|
// localStorage.setItem(
|
|
// "bookmarkedIds",
|
|
// JSON.stringify(Array.from(bookmarkedIds))
|
|
// );
|
|
// }
|
|
// }, [bookmarkedIds]);
|
|
|
|
// return (
|
|
// <section className="max-w-[1350px] mx-auto px-4">
|
|
// <div className="flex flex-col lg:flex-row gap-6 py-6">
|
|
// {data.length > 0 && (
|
|
// <Card
|
|
// item={data[0]}
|
|
// isBig
|
|
// isInitiallyBookmarked={bookmarkedIds.has(Number(data[0].id))}
|
|
// onSaved={(id) =>
|
|
// setBookmarkedIds((prev) => new Set([...prev, Number(id)]))
|
|
// }
|
|
// />
|
|
// )}
|
|
|
|
// <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
|
|
// {data.slice(1, 5).map((item) => (
|
|
// <Card
|
|
// key={item.id}
|
|
// item={item}
|
|
// isInitiallyBookmarked={bookmarkedIds.has(Number(item.id))}
|
|
// onSaved={(id) =>
|
|
// setBookmarkedIds((prev) => new Set([...prev, Number(id)]))
|
|
// }
|
|
// />
|
|
// ))}
|
|
// </div>
|
|
// </div>
|
|
|
|
// <div className="relative w-full h-48 sm:h-64 md:h-80 lg:h-[460px] mt-4 rounded-xl">
|
|
// <Image
|
|
// src={"/PPS.png"}
|
|
// alt={"pps"}
|
|
// fill
|
|
// className="object-cover rounded-xl"
|
|
// />
|
|
// </div>
|
|
// </section>
|
|
// );
|
|
// }
|
|
|
|
// function Card({
|
|
// item,
|
|
// isBig = false,
|
|
// isInitiallyBookmarked = false,
|
|
// onSaved,
|
|
// }: {
|
|
// item: any;
|
|
// isBig?: boolean;
|
|
// isInitiallyBookmarked?: boolean;
|
|
// onSaved?: (id: number) => void;
|
|
// }) {
|
|
// const router = useRouter();
|
|
// const MySwal = withReactContent(Swal);
|
|
// const [isSaving, setIsSaving] = useState(false);
|
|
// const [isBookmarked, setIsBookmarked] = useState(isInitiallyBookmarked);
|
|
|
|
// useEffect(() => {
|
|
// setIsBookmarked(isInitiallyBookmarked);
|
|
// }, [isInitiallyBookmarked]);
|
|
|
|
// const getLink = () => {
|
|
// switch (item?.fileTypeId) {
|
|
// case 1:
|
|
// return `/content/image/detail/${item?.id}`;
|
|
// case 2:
|
|
// return `/content/video/detail/${item?.id}`;
|
|
// case 3:
|
|
// return `/content/text/detail/${item?.id}`;
|
|
// case 4:
|
|
// return `/content/audio/detail/${item?.id}`;
|
|
// default:
|
|
// return "#";
|
|
// }
|
|
// };
|
|
|
|
// const handleSave = async () => {
|
|
// const roleId = Number(getCookiesDecrypt("urie"));
|
|
|
|
// if (!roleId || isNaN(roleId)) {
|
|
// MySwal.fire({
|
|
// icon: "warning",
|
|
// title: "Login diperlukan",
|
|
// text: "Silakan login terlebih dahulu untuk menyimpan artikel.",
|
|
// confirmButtonText: "Login Sekarang",
|
|
// confirmButtonColor: "#d33",
|
|
// }).then(() => router.push("/auth"));
|
|
// return;
|
|
// }
|
|
|
|
// try {
|
|
// setIsSaving(true);
|
|
// const res = await toggleBookmark(item.id);
|
|
|
|
// if (res?.error) {
|
|
// MySwal.fire({
|
|
// icon: "error",
|
|
// title: "Gagal",
|
|
// text: "Gagal menyimpan artikel.",
|
|
// confirmButtonColor: "#d33",
|
|
// });
|
|
// } else {
|
|
// setIsBookmarked(true);
|
|
// onSaved?.(item.id);
|
|
|
|
// // 🔹 Simpan ke localStorage
|
|
// const saved = localStorage.getItem("bookmarkedIds");
|
|
// const newSet = new Set<number>(saved ? JSON.parse(saved) : []);
|
|
// newSet.add(Number(item.id));
|
|
// localStorage.setItem(
|
|
// "bookmarkedIds",
|
|
// JSON.stringify(Array.from(newSet))
|
|
// );
|
|
|
|
// MySwal.fire({
|
|
// icon: "success",
|
|
// title: "Berhasil",
|
|
// text: "Artikel berhasil disimpan ke bookmark.",
|
|
// confirmButtonColor: "#3085d6",
|
|
// timer: 1500,
|
|
// showConfirmButton: false,
|
|
// });
|
|
// }
|
|
// } catch (err) {
|
|
// console.error("Toggle bookmark error:", err);
|
|
// MySwal.fire({
|
|
// icon: "error",
|
|
// title: "Kesalahan",
|
|
// text: "Terjadi kesalahan saat menyimpan artikel.",
|
|
// confirmButtonColor: "#d33",
|
|
// });
|
|
// } finally {
|
|
// setIsSaving(false);
|
|
// }
|
|
// };
|
|
|
|
// return (
|
|
// <div>
|
|
// <div
|
|
// className={`rounded-xl overflow-hidden shadow hover:shadow-lg transition-all bg-white ${
|
|
// isBig
|
|
// ? "w-full lg:max-w-[670px] lg:min-h-[680px]"
|
|
// : "w-full h-[350px] md:h-[330px]"
|
|
// }`}
|
|
// >
|
|
// <div
|
|
// className={`relative ${
|
|
// isBig ? "aspect-[3/2] lg:h-[525px]" : "aspect-video"
|
|
// } w-full`}
|
|
// >
|
|
// <Link href={getLink()}>
|
|
// <Image
|
|
// src={item.smallThumbnailLink || "/contributor.png"}
|
|
// alt={item.title}
|
|
// fill
|
|
// className="object-cover"
|
|
// />
|
|
// </Link>
|
|
// </div>
|
|
|
|
// <div className="p-4 space-y-2">
|
|
// <div className="flex items-center gap-2 text-xs font-semibold flex-wrap">
|
|
// <span className="bg-emerald-600 text-white px-2 py-0.5 rounded">
|
|
// {item.clientName}
|
|
// </span>
|
|
// <span className="text-orange-600">
|
|
// {item.categories?.map((cat: any) => cat.title).join(", ")}
|
|
// </span>
|
|
// </div>
|
|
|
|
// <div className="text-xs text-gray-500">
|
|
// {new Date(item.createdAt)
|
|
// .toLocaleString("id-ID", {
|
|
// day: "2-digit",
|
|
// month: "short",
|
|
// year: "numeric",
|
|
// hour: "2-digit",
|
|
// minute: "2-digit",
|
|
// hour12: false,
|
|
// timeZone: "Asia/Jakarta",
|
|
// })
|
|
// .replace(".", ":")}{" "}
|
|
// WIB
|
|
// </div>
|
|
|
|
// <Link href={getLink()}>
|
|
// <h3 className="text-sm font-semibold leading-snug line-clamp-2">
|
|
// {item.title}
|
|
// </h3>
|
|
// </Link>
|
|
|
|
// <div className="flex justify-between items-center pt-2">
|
|
// <div className="flex gap-2 text-gray-500">
|
|
// <ThumbsUp
|
|
// size={18}
|
|
// className="cursor-pointer hover:text-[#F60100]"
|
|
// />
|
|
// <ThumbsDown
|
|
// size={18}
|
|
// className="cursor-pointer hover:text-red-600"
|
|
// />
|
|
// </div>
|
|
|
|
// <button
|
|
// onClick={handleSave}
|
|
// disabled={isSaving || isBookmarked}
|
|
// className={`text-sm px-3 py-1 rounded-md transition-all duration-200 ${
|
|
// isBookmarked
|
|
// ? "bg-gray-400 text-white cursor-not-allowed"
|
|
// : "bg-[#F60100] text-white hover:bg-[#c90000]"
|
|
// }`}
|
|
// >
|
|
// {isSaving ? "Saving..." : isBookmarked ? "Saved" : "Save"}
|
|
// </button>
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
// );
|
|
// }
|