Mentions

import { Mentions, type MentionOption } from '@/components/ui/mentions'

const users: MentionOption[] = [
 { id: '1', display: 'Alice Johnson', avatar: '/avatars/alice.jpg' },
 { id: '2', display: 'Bob Smith', avatar: '/avatars/bob.jpg' },
 { id: '3', display: 'Carol Williams', avatar: '/avatars/carol.jpg' },
]

const tags: MentionOption[] = [
 { id: 'bug', display: 'bug' },
 { id: 'feature', display: 'feature' },
]

export default function Example() {
 const [value, setValue] = useState('')

 return (
 <>
 {/* User mentions with @ trigger */}
 <Mentions
 value={value}
 onChange={setValue}
 options={users}
 placeholder="Type @ to mention someone..."
 onMention={(option) => console.log('Mentioned:', option)}
 />

 {/* Tag mentions with # trigger */}
 <Mentions
 value={value}
 onChange={setValue}
 options={tags}
 trigger="#"
 placeholder="Add tags with #..."
 />

 {/* Multi-line with more rows */}
 <Mentions
 options={users}
 placeholder="Write a longer message..."
 rows={6}
 />
 </>
 )
}