1 files changed, 41 insertions, 0 deletions
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"
+    />
+  );
+};