From 7abf2227438362ad30820ee236405ec1b57a40b6 Mon Sep 17 00:00:00 2001
From: polwex <polwex@sortug.com>
Date: Wed, 21 May 2025 17:13:11 +0700
Subject: m

---
 src/components/Flashcard/BookmarkButton.tsx | 41 +++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/components/Flashcard/BookmarkButton.tsx

(limited to 'src/components/Flashcard/BookmarkButton.tsx')

diff --git a/src/components/Flashcard/BookmarkButton.tsx b/src/components/Flashcard/BookmarkButton.tsx
new file mode 100644
index 0000000..5128b91
--- /dev/null
+++ b/src/components/Flashcard/BookmarkButton.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { toggleBookmark } from "@/actions/deck";
+import { CardResponse } from "@/lib/types/cards";
+import { BookMarkedIcon, BookmarkIcon } from "lucide-react";
+import { useEffect, useState, useTransition } from "react";
+
+export const BookmarkIconito: React.FC<{ card: CardResponse }> = ({ card }) => {
+  const [notes, setNotes] = useState();
+  const [isBookmarked, setBookmarked] = useState(false);
+  useEffect(() => {
+    setBookmarked(card.expression.isBookmarked);
+  }, [card]);
+
+  const [isPending, startTransition] = useTransition();
+  const toggle = (e: React.MouseEvent) => {
+    console.log("toggling on fe");
+    e.stopPropagation();
+    startTransition(async () => {
+      const res = await toggleBookmark(
+        2,
+        card.expression.id,
+        isBookmarked,
+        notes,
+      );
+      if ("ok" in res) setBookmarked(true);
+    });
+  };
+
+  return isBookmarked ? (
+    <BookMarkedIcon
+      onClick={toggle}
+      className="absolute top-5 right-3 hover:bg-red"
+    />
+  ) : (
+    <BookmarkIcon
+      onClick={toggle}
+      className="absolute top-5 right-3 hover:bg-red"
+    />
+  );
+};
-- 
cgit v1.2.3