MentionList

1"use client";
2
3import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
4import { Card } from "@/components/ui/card";
5import { Input } from "@/components/ui/input";
6import { Search } from "lucide-react";
7
8interface User {
9  name: string;
10  handle: string;
11  avatar: string;
12  status: "online" | "away" | "offline";
13}
14
15const users: User[] = [
16  { name: "Alice Johnson", handle: "@alicej", avatar: "https://i.pravatar.cc/150?img=1", status: "online" },
17  { name: "Bob Smith", handle: "@bobsmith", avatar: "https://i.pravatar.cc/150?img=3", status: "online" },
18  { name: "Carol White", handle: "@carolw", avatar: "https://i.pravatar.cc/150?img=5", status: "away" },
19  { name: "David Brown", handle: "@davidb", avatar: "https://i.pravatar.cc/150?img=8", status: "offline" },
20  { name: "Eve Davis", handle: "@eved", avatar: "https://i.pravatar.cc/150?img=9", status: "online" },
21];
22
23const statusColors = {
24  online: "bg-green-500",
25  away: "bg-yellow-500",
26  offline: "bg-gray-400",
27};
28
29export default function MentionList() {
30  return (
31    <Card className="w-full max-w-sm p-2">
32      <div className="relative mb-2">
33        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
34        <Input
35          placeholder="@mention someone..."
36          className="pl-9 h-9"
37          defaultValue="@"
38        />
39      </div>
40      <div className="space-y-1">
41        {users.map((user) => (
42          <div
43            key={user.handle}
44            className="flex items-center gap-3 p-2 rounded-lg hover:bg-muted cursor-pointer transition-colors"
45          >
46            <div className="relative">
47              <Avatar className="w-8 h-8">
48                <AvatarImage src={user.avatar} />
49                <AvatarFallback>{user.name[0]}</AvatarFallback>
50              </Avatar>
51              <div className={`absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full border-2 border-background ${statusColors[user.status]}`} />
52            </div>
53            <div className="flex-1 min-w-0">
54              <p className="text-sm font-medium truncate">{user.name}</p>
55              <p className="text-xs text-muted-foreground truncate">{user.handle}</p>
56            </div>
57          </div>
58        ))}
59      </div>
60      <div className="mt-2 pt-2 border-t text-xs text-muted-foreground text-center">
61        ↑↓ to navigate, Enter to select
62      </div>
63    </Card>
64  );
65}