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}
      />
    </>
  )
}