blob: c2b767b08e1021fa8530f5faa333a8b55cd15b70 (
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
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
"use client"
import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api"
import type { z } from "zod"
import { dmSansClassName } from "@/lib/fonts"
import { cn } from "@lib/utils"
import { useMemo } from "react"
type DocumentsResponse = z.infer<typeof DocumentsWithMemoriesResponseSchema>
type DocumentWithMemories = DocumentsResponse["documents"][0]
type TipTapNode = {
type: string
text?: string
content?: TipTapNode[]
attrs?: Record<string, unknown>
}
function extractTextFromTipTapContent(content: string): string {
try {
const json = JSON.parse(content) as TipTapNode
return extractTextFromNode(json)
} catch {
return content
}
}
function extractTextFromNode(node: TipTapNode): string {
if (node.type === "text" && node.text) {
return node.text
}
if (!node.content) {
return ""
}
const texts: string[] = []
for (const child of node.content) {
const text = extractTextFromNode(child)
if (text) {
texts.push(text)
}
}
const blockTypes = [
"paragraph",
"heading",
"listItem",
"blockquote",
"codeBlock",
]
if (blockTypes.includes(node.type)) {
return `${texts.join("")}\n`
}
return texts.join("")
}
function NoteIcon() {
return (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>Note Icon</title>
<mask
id="mask0_344_4970"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="14"
height="14"
>
<rect width="14" height="14" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_344_4970)">
<g filter="url(#filter0_i_344_4970)">
<path
d="M3.50002 8.75008H7.58335L8.75002 7.58341H3.50002V8.75008ZM3.50002 6.41675H7.00002V5.25008H3.50002V6.41675ZM2.33335 4.08341V9.91675H6.41669L5.25002 11.0834H1.16669V2.91675H12.8334V4.66675H11.6667V4.08341H2.33335ZM13.3584 7.17508C13.407 7.22369 13.4313 7.27716 13.4313 7.3355C13.4313 7.39383 13.407 7.4473 13.3584 7.49591L12.8334 8.02091L11.8125 7.00008L12.3375 6.47508C12.3861 6.42647 12.4396 6.40216 12.4979 6.40216C12.5563 6.40216 12.6097 6.42647 12.6584 6.47508L13.3584 7.17508ZM7.58335 12.2501V11.2292L11.4625 7.35008L12.4834 8.37091L8.60419 12.2501H7.58335Z"
fill="#FAFAFA"
/>
</g>
</g>
<defs>
<filter
id="filter0_i_344_4970"
x="1.16669"
y="2.91675"
width="12.6176"
height="9.68628"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dx="0.353028" dy="0.353028" />
<feGaussianBlur stdDeviation="0.706055" />
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.0431373 0 0 0 0 0.0588235 0 0 0 0 0.0823529 0 0 0 0.4 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_344_4970"
/>
</filter>
</defs>
</svg>
)
}
export function NotePreview({ document }: { document: DocumentWithMemories }) {
const previewText = useMemo(() => {
if (!document.content) return ""
return extractTextFromTipTapContent(document.content).trim()
}, [document.content])
return (
<div className="bg-[#0B1017] p-3 rounded-[18px] space-y-2">
<div className="flex items-center gap-1">
<NoteIcon />
<p className={cn(dmSansClassName(), "text-[12px] font-semibold")}>
Note
</p>
</div>
<div>
{document.title && (
<p
className={cn(
dmSansClassName(),
"text-[12px] font-semibold line-clamp-2 leading-[125%]",
)}
>
{document.title}
</p>
)}
{previewText && (
<p className="text-[10px] text-[#737373] line-clamp-4">
{previewText}
</p>
)}
</div>
</div>
)
}
|