67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
import { Badge } from '@/components/ui/badge';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuRadioGroup,
|
|
DropdownMenuRadioItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
|
|
type StatusOption = { value: string; label: string };
|
|
|
|
type StudentStatusBadgeProps = {
|
|
status: string | null | undefined;
|
|
statuses: StatusOption[];
|
|
onChange: (status: string) => void;
|
|
};
|
|
|
|
const StudentStatusVariants: Record<
|
|
string,
|
|
'default' | 'secondary' | 'destructive' | 'outline'
|
|
> = {
|
|
active: 'default',
|
|
on_leave: 'secondary',
|
|
graduated: 'outline',
|
|
dropped_out: 'destructive',
|
|
};
|
|
|
|
export function StudentStatusBadge({
|
|
status,
|
|
statuses,
|
|
onChange,
|
|
}: StudentStatusBadgeProps) {
|
|
const label =
|
|
statuses.find((option) => option.value === status)?.label ??
|
|
status ??
|
|
'-';
|
|
const variant = (status && StudentStatusVariants[status]) || 'outline';
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button
|
|
type="button"
|
|
className="cursor-pointer rounded-full border-0 bg-transparent p-0 outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
>
|
|
<Badge variant={variant}>{label}</Badge>
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start">
|
|
<DropdownMenuRadioGroup
|
|
value={status ?? ''}
|
|
onValueChange={onChange}
|
|
>
|
|
{statuses.map((option) => (
|
|
<DropdownMenuRadioItem
|
|
key={option.value}
|
|
value={option.value}
|
|
>
|
|
{option.label}
|
|
</DropdownMenuRadioItem>
|
|
))}
|
|
</DropdownMenuRadioGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|