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
"use client";
import * as React from "react";
import { InputGroup } from "@/components/ui/input-group";
import {
Mention,
MentionItem,
MentionItemDescription,
MentionList,
MentionPopup,
MentionStatus,
MentionTextarea,
} from "@/components/ui/mention";
type Person = { id: string; label: string; team: string };
const people: Person[] = [
{ id: "maya", label: "Maya Chen", team: "Design" },
{ id: "jonah", label: "Jonah Park", team: "Engineering" },
{ id: "priya", label: "Priya Raman", team: "Product" },
];
export default function MentionBasicPreview() {
const [text, setText] = React.useState("");
const [message, setMessage] = React.useState("");
return (
<div className="w-full max-w-wide">
<Mention<Person>
value={text}
onValueChange={setText}
triggers={[{ char: "@", allowSpace: true }]}
items={({ query }) =>
people.filter((person) =>
person.label.toLowerCase().includes(query.trim().toLowerCase())
)
}
onItemInsert={(person) => setMessage(`Mentioned ${person.label}`)}
>
<InputGroup variant="composer">
<MentionTextarea
rows={1}
aria-label="Message"
placeholder="Type @ to mention someone"
/>
</InputGroup>
<MentionPopup>
<MentionList>
{(person: Person) => (
<MentionItem key={person.id} value={person}>
{person.label}
<MentionItemDescription>{person.team}</MentionItemDescription>
</MentionItem>
)}
</MentionList>
</MentionPopup>
<MentionStatus>{message}</MentionStatus>
</Mention>
</div>
);
}
