"use client"; import { ChevronsUpDownIcon, FunnelIcon, SearchIcon, XIcon, } from "lucide-react"; import { useState } from "react"; import { cn } from "@/registry/default/lib/utils"; import { Avatar, AvatarFallback, AvatarImage, } from "@/registry/default/ui/avatar"; import { Badge } from "@/registry/default/ui/badge"; import { Button, buttonVariants } from "@/registry/default/ui/button"; import { Combobox, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxTrigger, } from "@/registry/default/ui/combobox"; import { Group, GroupSeparator, GroupText } from "@/registry/default/ui/group"; type FilterOption = { id: string; label: string; avatar?: string; }; const members: FilterOption[] = [ { avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=64&h=64&fit=crop&crop=faces", id: "alex-chen", label: "Alex Chen", }, { avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&h=64&fit=crop&crop=faces", id: "sarah-johnson", label: "Sarah Johnson", }, { avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=64&h=64&fit=crop&crop=faces", id: "marcus-williams", label: "Marcus Williams", }, { avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=64&h=64&fit=crop&crop=faces", id: "emma-davis", label: "Emma Davis", }, { avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=64&h=64&fit=crop&crop=faces", id: "james-miller", label: "James Miller", }, ]; function getInitials(name: string): string { const parts = name.trim().split(/\s+/); if (parts.length === 1) { return parts[0]?.charAt(0).toUpperCase() ?? ""; } const first = parts[0]?.charAt(0) ?? ""; const last = parts[parts.length - 1]?.charAt(0) ?? ""; return (first + last).toUpperCase(); } function MemberAvatar({ name, avatarUrl, className, }: { name: string; avatarUrl?: string; className?: string; }) { return ( {avatarUrl ? : null} {getInitials(name)} ); } export default function Particle() { const [selectedMembers, setSelectedMembers] = useState( members.slice(0, 2), ); const renderTriggerContent = () => { if (selectedMembers.length === 0) return "Select"; const firstMember = selectedMembers[0]; const remainingCount = selectedMembers.length - 1; return (

{firstMember?.label} {remainingCount > 0 && ( +{remainingCount} )}

); }; return ( Member { if (Array.isArray(value)) { setSelectedMembers(value); } }} value={selectedMembers} > } > {renderTriggerContent()} {selectedMembers.length === 0 && ( )}

} />

No members found. {(option: FilterOption) => (

{option.label}

)} ); }

Group 23

Instalação

Registry dependencies