"use client"; import { Check, ChevronsUpDown, Plus } from "lucide-react"; import { useState } from "react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { CommandMenuEmpty, CommandMenuInput, CommandMenuItem, CommandMenuList, CommandMenuProvider, CommandMenuSeparator, } from "@/components/ui/command-menu"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { cn } from "@/lib/utils"; export interface Team { id: string; name: string; avatar?: string; plan?: "free" | "pro" | "enterprise"; memberCount?: number; isPersonal?: boolean; } export interface TeamSwitcherProps { teams?: Team[]; currentTeamId?: string; onTeamSelect?: (teamId: string) => void; onCreateTeam?: () => void; className?: string; showPlan?: boolean; } function getInitials(name: string): string { return name .split(" ") .map((n) => n[0]) .join("") .toUpperCase() .slice(0, 2); } function getPlanBadgeVariant(plan?: Team["plan"]) { switch (plan) { case "enterprise": return "default"; case "pro": return "secondary"; default: return "outline"; } } export default function TeamSwitcher({ teams = [], currentTeamId, onTeamSelect, onCreateTeam, className, showPlan = true, }: TeamSwitcherProps) { const [open, setOpen] = useState(false); const [searchValue, setSearchValue] = useState(""); const [selectedIndex, setSelectedIndex] = useState(0); const currentTeam = teams.find((t) => t.id === currentTeamId) || teams[0]; const otherTeams = teams.filter((t) => t.id !== currentTeamId); const filteredTeams = otherTeams.filter((team) => { if (!searchValue.trim()) return true; const query = searchValue.toLowerCase(); return team.name.toLowerCase().includes(query); }); const handleSelect = (teamId: string) => { onTeamSelect?.(teamId); setOpen(false); setSearchValue(""); }; return ( {currentTeam && ( <> handleSelect(currentTeam.id)} >

{getInitials(currentTeam.name)}

{currentTeam.name} {currentTeam.memberCount !== undefined && ( {currentTeam.memberCount} member {currentTeam.memberCount !== 1 ? "s" : ""} )}

{otherTeams.length > 0 && } )} {filteredTeams.length === 0 ? ( No teams found ) : ( filteredTeams.map((team, index) => ( handleSelect(team.id)} >

{getInitials(team.name)}

{team.name} {team.memberCount !== undefined && ( {team.memberCount} member {team.memberCount !== 1 ? "s" : ""} )}

{showPlan && team.plan && ( {team.plan} )}

)) )} {onCreateTeam && ( <> } index={filteredTeams.length} onSelect={onCreateTeam} > Create new team )} ); }

Example Usage