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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
import { useState } from "react";
import Image from "next/image";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { ScrollArea } from "@radix-ui/react-scroll-area";
import {
BookmarkTypes,
ZBookmark,
ZBookmarkedLink,
} from "@hoarder/shared/types/bookmarks";
function FullPageArchiveSection({ link }: { link: ZBookmarkedLink }) {
return (
<iframe
title={link.url}
src={`/api/assets/${link.fullPageArchiveAssetId}`}
className="relative h-full min-w-full"
/>
);
}
function ScreenshotSection({ link }: { link: ZBookmarkedLink }) {
return (
<div className="relative h-full min-w-full">
<Image
alt="screenshot"
src={`/api/assets/${link.screenshotAssetId}`}
width={0}
height={0}
sizes="100vw"
style={{ width: "100%", height: "auto" }}
/>
</div>
);
}
function CachedContentSection({ link }: { link: ZBookmarkedLink }) {
let content;
if (!link.htmlContent) {
content = (
<div className="text-destructive">Failed to fetch link content ...</div>
);
} else {
content = (
<div
dangerouslySetInnerHTML={{
__html: link.htmlContent || "",
}}
className="prose mx-auto dark:prose-invert"
/>
);
}
return <ScrollArea className="h-full">{content}</ScrollArea>;
}
export default function LinkContentSection({
bookmark,
}: {
bookmark: ZBookmark;
}) {
const [section, setSection] = useState<string>("cached");
if (bookmark.content.type != BookmarkTypes.LINK) {
throw new Error("Invalid content type");
}
let content;
if (section === "cached") {
content = <CachedContentSection link={bookmark.content} />;
} else if (section === "archive") {
content = <FullPageArchiveSection link={bookmark.content} />;
} else {
content = <ScreenshotSection link={bookmark.content} />;
}
return (
<div className="flex h-full flex-col items-center gap-2">
<Select onValueChange={setSection} value={section}>
<SelectTrigger className="w-fit">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="cached">Cached Content</SelectItem>
<SelectItem
value="screenshot"
disabled={!bookmark.content.screenshotAssetId}
>
Screenshot
</SelectItem>
<SelectItem
value="archive"
disabled={!bookmark.content.fullPageArchiveAssetId}
>
Archive
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
{content}
</div>
);
}
|
