fix and update

apps/frontend/components/family/family-group-selector.tsx

@@ -0,0 +1,76 @@
+'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>
+  );
+}