1 files changed, 94 insertions, 0 deletions
diff --git a/packages/web/components/dashboard/bookmarks/TextCard.tsx b/packages/web/components/dashboard/bookmarks/TextCard.tsx
new file mode 100644
index 00000000..2565e69d
--- /dev/null
+++ b/packages/web/components/dashboard/bookmarks/TextCard.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import { ZBookmark } from "@hoarder/trpc/types/bookmarks";
+import BookmarkOptions from "./BookmarkOptions";
+import { api } from "@/lib/trpc";
+import { Maximize2, Star } from "lucide-react";
+import { cn } from "@/lib/utils";
+import TagList from "./TagList";
+import Markdown from "react-markdown";
+import { useState } from "react";
+import { BookmarkedTextViewer } from "./BookmarkedTextViewer";
+import Link from "next/link";
+import { isBookmarkStillTagging } from "@/lib/bookmarkUtils";
+
+export default function TextCard({
+  bookmark: initialData,
+  className,
+}: {
+  bookmark: ZBookmark;
+  className?: string;
+}) {
+  const { data: bookmark } = api.bookmarks.getBookmark.useQuery(
+    {
+      bookmarkId: initialData.id,
+    },
+    {
+      initialData,
+      refetchInterval: (query) => {
+        const data = query.state.data;
+        if (!data) {
+          return false;
+        }
+        if (isBookmarkStillTagging(data)) {
+          return 1000;
+        }
+        return false;
+      },
+    },
+  );
+  const [previewModalOpen, setPreviewModalOpen] = useState(false);
+  const bookmarkedText = bookmark.content;
+  if (bookmarkedText.type != "text") {
+    throw new Error("Unexpected bookmark type");
+  }
+
+  return (
+    <>
+      <BookmarkedTextViewer
+        content={bookmarkedText.text}
+        open={previewModalOpen}
+        setOpen={setPreviewModalOpen}
+      />
+      <div
+        className={cn(
+          className,
+          cn(
+            "flex h-min max-h-96 flex-col gap-y-1 overflow-hidden rounded-lg p-2 shadow-md",
+          ),
+        )}
+      >
+        <Markdown className="prose grow overflow-hidden">
+          {bookmarkedText.text}
+        </Markdown>
+        <div className="mt-4 flex flex-none flex-wrap gap-1 overflow-hidden">
+          <TagList
+            bookmark={bookmark}
+            loading={isBookmarkStillTagging(bookmark)}
+          />
+        </div>
+        <div className="flex w-full justify-between">
+          <div />
+          <div className="flex gap-0 text-gray-500">
+            <div>
+              {bookmark.favourited && (
+                <Star
+                  className="my-1 size-8 rounded p-1"
+                  color="#ebb434"
+                  fill="#ebb434"
+                />
+              )}
+            </div>
+            <Link
+              className="my-auto block px-2"
+              href={`/dashboard/preview/${bookmark.id}`}
+            >
+              <Maximize2 size="20" />
+            </Link>
+            <BookmarkOptions bookmark={bookmark} />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}