60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
"use client";
|
||
|
||
import { House } from "lucide-react";
|
||
import { useTransition } from "react";
|
||
import { toast } from "sonner";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select";
|
||
import { switchHouseholdAction } from "@/features/households/actions";
|
||
import type { HouseholdSummary } from "@/features/households/types";
|
||
import { tr } from "@/i18n/tr";
|
||
|
||
/** Üst bar aktif hane seçici. Seçim sunucuda doğrulanır ve cookie'ye yazılır. */
|
||
export function HouseholdSwitcher({
|
||
households,
|
||
activeId,
|
||
}: {
|
||
households: HouseholdSummary[];
|
||
activeId: string | undefined;
|
||
}) {
|
||
const [pending, startTransition] = useTransition();
|
||
const current = households.find((h) => h.id === activeId);
|
||
if (households.length === 0) return null;
|
||
|
||
function onChange(id: string) {
|
||
if (id === activeId) return;
|
||
startTransition(async () => {
|
||
const result = await switchHouseholdAction(id);
|
||
if (result.ok) toast.success(tr.household.switched(result.data.name));
|
||
else toast.error(result.error);
|
||
});
|
||
}
|
||
|
||
return (
|
||
<Select value={activeId} onValueChange={onChange} disabled={pending || households.length < 2}>
|
||
<SelectTrigger
|
||
aria-label={tr.household.label}
|
||
className="w-[min(46vw,13rem)]"
|
||
aria-busy={pending}
|
||
>
|
||
<House className="text-muted-foreground" />
|
||
{/* Etiket children ile verilir: Radix aksi halde hydration'a kadar boş gösterir. */}
|
||
<SelectValue placeholder={tr.household.select}>{current?.name}</SelectValue>
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{households.map((h) => (
|
||
<SelectItem key={h.id} value={h.id}>
|
||
{h.name}
|
||
<span className="text-xs text-muted-foreground">· {tr.household.roles[h.role]}</span>
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
);
|
||
}
|