aboutsummaryrefslogtreecommitdiffstats
path: root/packages/web/components/dashboard/bookmarks/TextCard.tsx
diff options
context:
space:
mode:
authorMohamedBassem <me@mbassem.com>2024-03-10 17:59:58 +0000
committerMohamedBassem <me@mbassem.com>2024-03-10 17:59:58 +0000
commitd6dd76021226802adf5295b3243d6f2ae4fa5cc2 (patch)
tree7a25423d46db9e0e224b5f58b73cec5768953b44 /packages/web/components/dashboard/bookmarks/TextCard.tsx
parent8ab868d3f94cc6609d278dc952432f1a244c3f84 (diff)
downloadkarakeep-d6dd76021226802adf5295b3243d6f2ae4fa5cc2.tar.zst
refactor: Move all components to the top level directory
Diffstat (limited to 'packages/web/components/dashboard/bookmarks/TextCard.tsx')
-rw-r--r--packages/web/components/dashboard/bookmarks/TextCard.tsx94
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>
+ </>
+ );
+}