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
|
import { ActionButton } from "@/components/ui/action-button";
import { toast } from "@/components/ui/use-toast";
import { cn } from "@/lib/utils";
import { Trash2 } from "lucide-react";
import { useDeleteHighlight } from "@karakeep/shared-react/hooks/highlights";
import { ZHighlight } from "@karakeep/shared/types/highlights";
import { HIGHLIGHT_COLOR_MAP } from "../preview/highlights";
export default function HighlightCard({
highlight,
clickable,
className,
readOnly,
}: {
highlight: ZHighlight;
clickable: boolean;
className?: string;
readOnly: boolean;
}) {
const { mutate: deleteHighlight, isPending: isDeleting } = useDeleteHighlight(
{
onSuccess: () => {
toast({
description: "Highlight has been deleted!",
});
},
onError: () => {
toast({
description: "Something went wrong",
variant: "destructive",
});
},
},
);
const onBookmarkClick = () => {
document
.querySelector(`[data-highlight-id="${highlight.id}"]`)
?.scrollIntoView({
behavior: "smooth",
block: "center",
});
};
const Wrapper = ({
className,
children,
}: {
className?: string;
children: React.ReactNode;
}) =>
clickable ? (
<button className={className} onClick={onBookmarkClick}>
{children}
</button>
) : (
<div className={className}>{children}</div>
);
return (
<div className={cn("flex items-center justify-between", className)}>
<Wrapper className="flex flex-col gap-2 text-left">
<blockquote
cite={highlight.bookmarkId}
className={cn(
"prose border-l-[6px] p-2 pl-6 italic dark:prose-invert prose-p:text-sm",
HIGHLIGHT_COLOR_MAP["border-l"][highlight.color],
)}
>
<p>{highlight.text}</p>
</blockquote>
{highlight.note && (
<span className="text-sm text-muted-foreground">
{highlight.note}
</span>
)}
</Wrapper>
{!readOnly && (
<div className="flex gap-2">
<ActionButton
loading={isDeleting}
variant="ghost"
onClick={() => deleteHighlight({ highlightId: highlight.id })}
>
<Trash2 className="size-4 text-destructive" />
</ActionButton>
</div>
)}
</div>
);
}
|
