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 | 3x 512x 4001x 3x | import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuRadioItem } from '@/ahuora-design-system/ui/dropdown-menu'
import { Badge } from '@/ahuora-design-system/ui/badge'
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"
aria-label={`unit-selection-${tableName}-${name}`}
>
<small className="text-xs truncate capitalize">{name}</small>
{units && units.length > 0 && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Badge
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>
)
}
|