"use client"; import * as React from "react"; import { Check, ChevronsUpDown } from "lucide-react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@/components/ui/command"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { getFriends, User } from "@/lib/api"; import { useAuth } from "@/hooks/use-auth"; import { Skeleton } from "./ui/skeleton"; interface TopFriendsComboboxProps { value: string[]; onChange: (value: string[]) => void; } export function TopFriendsCombobox({ value, onChange, }: TopFriendsComboboxProps) { const [open, setOpen] = React.useState(false); const [friends, setFriends] = React.useState([]); const [isLoading, setIsLoading] = React.useState(true); const { token } = useAuth(); React.useEffect(() => { if (token) { getFriends(token) .then((data) => setFriends(data.users)) .catch(() => console.error("Failed to fetch friends")) .finally(() => setIsLoading(false)); } else { setIsLoading(false); } }, [token]); if (isLoading) { return ; } return ( No friends found. {friends.map((friend) => ( { const newValue = value.includes(currentValue) ? value.filter((v) => v !== currentValue) : [...value, currentValue]; if (newValue.length <= 8) { onChange(newValue); } }} > {friend.username} ))} ); }