77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { ChevronDown } from 'lucide-react';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger
|
|
} from '@/components/ui/dropdown-menu';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
type FamilyGroupOption = {
|
|
id: string;
|
|
name: string;
|
|
};
|
|
|
|
export function FamilyGroupSelector({
|
|
groups,
|
|
selectedGroupId,
|
|
onSelect,
|
|
href,
|
|
className,
|
|
nameClassName
|
|
}: {
|
|
groups: FamilyGroupOption[];
|
|
selectedGroupId: string | null;
|
|
onSelect: (groupId: string) => void;
|
|
href?: string;
|
|
className?: string;
|
|
nameClassName?: string;
|
|
}) {
|
|
const selected = groups.find((group) => group.id === selectedGroupId) ?? groups[0];
|
|
|
|
if (!selected) return null;
|
|
|
|
const nameElement = href ? (
|
|
<Link href={href} className={cn('truncate hover:underline', nameClassName)} onClick={(event) => event.stopPropagation()}>
|
|
{selected.name}
|
|
</Link>
|
|
) : (
|
|
<span className={cn('truncate', nameClassName)}>{selected.name}</span>
|
|
);
|
|
|
|
if (groups.length <= 1) {
|
|
return <div className={cn('min-w-0', className)}>{nameElement}</div>;
|
|
}
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button
|
|
type="button"
|
|
className={cn(
|
|
'flex min-w-0 max-w-full items-center gap-0.5 rounded-lg text-left transition hover:bg-[#f4f5f8]',
|
|
className
|
|
)}
|
|
>
|
|
{nameElement}
|
|
<ChevronDown className="h-3 w-3 shrink-0 text-[#667085]" aria-hidden />
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start" className="max-w-[220px] rounded-xl">
|
|
{groups.map((group) => (
|
|
<DropdownMenuItem
|
|
key={group.id}
|
|
className={cn('truncate rounded-lg', group.id === selected.id && 'font-medium text-[#3390ec]')}
|
|
onClick={() => onSelect(group.id)}
|
|
>
|
|
{group.name}
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|