Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 2x 550x 4303x 2x | import { Badge } from "@/ahuora-design-system/ui/badge";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuRadioItem,
DropdownMenuTrigger,
} from "@/ahuora-design-system/ui/dropdown-menu";
export default function UnitSelectionHeader({
name,
units,
unitMap,
setUnitMap,
tableName,
}) {
function handleSelect(unit) {
setUnitMap((prev) => ({ ...prev, [name]: unit }));
}
return (
<div className="flex flex-col gap-1 py-1 w-36">
<small className="text-xs truncate capitalize">{name}</small>
{units && units.length > 0 && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Badge
aria-label={`unit-selection-${tableName}-${name}`}
borderRadius={"round"}
className="border-primary/60 flex justify-center cursor-pointer truncate"
>
{unitMap[name]?.label || units[0].label}
</Badge>
</DropdownMenuTrigger>
<DropdownMenuContent className="bg-background border-border border-2 rounded-md first:rounded last:rounded z-50">
{units.map((unit, index) => (
<DropdownMenuRadioItem
key={`unit-header-${index}`}
value={unit}
className="text-sm align-middle hover:bg-muted px-4 py-1"
onSelect={() => handleSelect(unit)}
aria-label={`${name}-${unit.label}`}
>
{unit.label}
</DropdownMenuRadioItem>
))}
</DropdownMenuContent>
</DropdownMenu>
)}
</div>
);
}
|