blob: c32c85a394385afd06df6fe254d2b0df87900dde (
plain) (
blame)
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
|
"use client";
import { useState } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { useTranslation } from "@/lib/i18n/client";
import { cn } from "@/lib/utils";
import { ExternalLink, NotepadText } from "lucide-react";
interface NotePreviewProps {
note: string;
bookmarkId: string;
className?: string;
}
export function NotePreview({ note, bookmarkId, className }: NotePreviewProps) {
const { t } = useTranslation();
const [isOpen, setIsOpen] = useState(false);
if (!note?.trim()) {
return null;
}
return (
<Popover open={isOpen} onOpenChange={setIsOpen}>
<PopoverTrigger asChild>
<div
className={cn(
"flex cursor-pointer items-center gap-1.5 text-sm font-light italic text-gray-500 dark:text-gray-400",
className,
)}
>
<NotepadText className="size-5 shrink-0" />
<div className="line-clamp-2 min-w-0 flex-1 overflow-hidden text-wrap break-words">
{note}
</div>
</div>
</PopoverTrigger>
<PopoverContent className="w-96 max-w-[calc(100vw-2rem)]" align="start">
<div className="space-y-3">
<div className="max-h-60 overflow-y-auto whitespace-pre-wrap break-words text-sm text-gray-700 dark:text-gray-300">
{note}
</div>
<div className="flex justify-end">
<Link href={`/dashboard/preview/${bookmarkId}`}>
<Button
variant="outline"
size="sm"
className="gap-2"
onClick={() => setIsOpen(false)}
>
{t("actions.edit_notes")}
<ExternalLink className="size-4" />
</Button>
</Link>
</div>
</div>
</PopoverContent>
</Popover>
);
}
|
