apps/web/components/dashboard/preview/TextContentSection.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import { ScrollArea } from "@radix-ui/react-scroll-area";
import Markdown from "react-markdown";

import type { ZBookmark } from "@hoarder/trpc/types/bookmarks";

export function TextContentSection({ bookmark }: { bookmark: ZBookmark }) {
  let content;
  switch (bookmark.content.type) {
    case "link": {
      if (!bookmark.content.htmlContent) {
        content = (
          <div className="text-destructive">
            Failed to fetch link content ...
          </div>
        );
      } else {
        content = (
          <div
            dangerouslySetInnerHTML={{
              __html: bookmark.content.htmlContent || "",
            }}
            className="prose mx-auto dark:prose-invert"
          />
        );
      }
      break;
    }
    case "text": {
      content = (
        <Markdown className="prose mx-auto dark:prose-invert">
          {bookmark.content.text}
        </Markdown>
      );
      break;
    }
  }

  return <ScrollArea className="h-full">{content}</ScrollArea>;
}