50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T2879,"use client"; import { useMemo, useState } from "react"; import { Autocomplete, AutocompleteCollection, AutocompleteContent, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteItem, AutocompleteList, } from "@/components/ui/autocomplete"; import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; export default function AutocompleteComponent() { const [value, setValue] = useState(""); const [open, setOpen] = useState(false); const { contains } = AutocompletePrimitive.useFilter({ sensitivity: "base" }); const filteredItems = useMemo(() => { if (!value) return groupedUsers; return groupedUsers .map((group) => ({ ...group, items: (group.items || []).filter( (item) => contains(item.name || "", value) || contains(item.group || "", value) || contains(item.position || "", value), ), })) .filter((group) => group.items && group.items.length > 0); }, [value, contains]); return (

(item as User).name} filter={null} > {open && ( {filteredItems.length === 0 ? ( No matching users found. ) : ( {(group: UserGroup) => ( {group.group} {(item: User) => ( {(item.name || "U") .split(" ") .map((n) => n[0]) .join("")}

{item.name || "Unknown"}

{item.position || "No position available"}

)} )} )} )}

); } interface User { id: string; name: string; group: string; position: string; avatar: string; status: "Active" | "Inactive" | "Away"; } interface UserGroup { group: string; items: User[]; } const usersData: User[] = [ // Development Team { id: "john-doe", name: "John Doe", group: "Development Team", position: "Senior Frontend Developer", avatar: "https://randomuser.me/api/portraits/men/1.jpg", status: "Active", }, { id: "jane-smith", name: "Jane Smith", group: "Development Team", position: "Full Stack Developer", avatar: "https://randomuser.me/api/portraits/women/2.jpg", status: "Active", }, { id: "mike-wilson", name: "Mike Wilson", group: "Development Team", position: "Backend Developer", avatar: "https://randomuser.me/api/portraits/men/3.jpg", status: "Active", }, { id: "sarah-johnson", name: "Sarah Johnson", group: "Development Team", position: "DevOps Engineer", avatar: "https://randomuser.me/api/portraits/women/4.jpg", status: "Away", }, { id: "david-brown", name: "David Brown", group: "Development Team", position: "Mobile Developer", avatar: "https://randomuser.me/api/portraits/men/5.jpg", status: "Active", }, { id: "lisa-garcia", name: "Lisa Garcia", group: "Development Team", position: "UI/UX Developer", avatar: "https://randomuser.me/api/portraits/women/6.jpg", status: "Active", }, // Design Team { id: "alex-martinez", name: "Alex Martinez", group: "Design Team", position: "Lead UX Designer", avatar: "https://randomuser.me/api/portraits/men/7.jpg", status: "Active", }, { id: "emma-davis", name: "Emma Davis", group: "Design Team", position: "UI Designer", avatar: "https://randomuser.me/api/portraits/women/8.jpg", status: "Active", }, { id: "chris-taylor", name: "Chris Taylor", group: "Design Team", position: "Product Designer", avatar: "https://randomuser.me/api/portraits/men/9.jpg", status: "Active", }, { id: "olivia-anderson", name: "Olivia Anderson", group: "Design Team", position: "Visual Designer", avatar: "https://randomuser.me/api/portraits/women/10.jpg", status: "Inactive", }, // Marketing Team { id: "james-moore", name: "James Moore", group: "Marketing Team", position: "Marketing Manager", avatar: "https://randomuser.me/api/portraits/men/11.jpg", status: "Active", }, { id: "sophia-white", name: "Sophia White", group: "Marketing Team", position: "Content Marketing Specialist", avatar: "https://randomuser.me/api/portraits/women/12.jpg", status: "Active", }, { id: "william-harris", name: "William Harris", group: "Marketing Team", position: "Digital Marketing Specialist", avatar: "https://randomuser.me/api/portraits/men/13.jpg", status: "Active", }, { id: "ava-martin", name: "Ava Martin", group: "Marketing Team", position: "Social Media Manager", avatar: "https://randomuser.me/api/portraits/women/14.jpg", status: "Away", }, // Sales Team { id: "ethan-thompson", name: "Ethan Thompson", group: "Sales Team", position: "Sales Director", avatar: "https://randomuser.me/api/portraits/men/15.jpg", status: "Active", }, { id: "mia-garcia", name: "Mia Garcia", group: "Sales Team", position: "Account Executive", avatar: "https://randomuser.me/api/portraits/women/16.jpg", status: "Active", }, { id: "noah-martinez", name: "Noah Martinez", group: "Sales Team", position: "Sales Representative", avatar: "https://randomuser.me/api/portraits/men/17.jpg", status: "Active", }, { id: "isabella-rodriguez", name: "Isabella Rodriguez", group: "Sales Team", position: "Business Development Manager", avatar: "https://randomuser.me/api/portraits/women/18.jpg", status: "Active", }, // Management Team { id: "lucas-lee", name: "Lucas Lee", group: "Management Team", position: "CEO", avatar: "https://randomuser.me/api/portraits/men/19.jpg", status: "Active", }, { id: "charlotte-walker", name: "Charlotte Walker", group: "Management Team", position: "CTO", avatar: "https://randomuser.me/api/portraits/women/20.jpg", status: "Active", }, { id: "benjamin-hall", name: "Benjamin Hall", group: "Management Team", position: "VP of Engineering", avatar: "https://randomuser.me/api/portraits/men/21.jpg", status: "Active", }, { id: "amelia-allen", name: "Amelia Allen", group: "Management Team", position: "VP of Marketing", avatar: "https://randomuser.me/api/portraits/women/22.jpg", status: "Active", }, // Support Team { id: "henry-young", name: "Henry Young", group: "Support Team", position: "Customer Success Manager", avatar: "https://randomuser.me/api/portraits/men/23.jpg", status: "Active", }, { id: "grace-king", name: "Grace King", group: "Support Team", position: "Technical Support Specialist", avatar: "https://randomuser.me/api/portraits/women/24.jpg", status: "Active", }, { id: "sebastian-wright", name: "Sebastian Wright", group: "Support Team", position: "Customer Support Representative", avatar: "https://randomuser.me/api/portraits/men/25.jpg", status: "Away", }, { id: "lily-lopez", name: "Lily Lopez", group: "Support Team", position: "Help Desk Technician", avatar: "https://randomuser.me/api/portraits/women/26.jpg", status: "Active", }, ]; function groupUsers(users: User[]): UserGroup[] { const groups: { [key: string]: User[] } = {}; users.forEach((item) => { (groups[item.group] ??= []).push(item); }); // Sort by status within each group (Active first, then Away, then Inactive) Object.keys(groups).forEach((group) => { groups[group].sort((a, b) => { const statusOrder = { Active: 0, Away: 1, Inactive: 2 }; return statusOrder[a.status] - statusOrder[b.status]; }); }); const order = [ "Management Team", "Development Team", "Design Team", "Marketing Team", "Sales Team", "Support Team", ]; return order.map((group) => ({ group, items: groups[group] ?? [] })); } const groupedUsers: UserGroup[] = groupUsers(usersData); 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"contents/components/autocomplete/3/index.tsx","content":"$51","type":"registry:component","target":"components/autocomplete3.tsx"}],"className":"h-[70svh] min-h-80"}]]}]