61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
|
import * as React from 'react';
|
||
|
|
import { Chip } from '@/components/ui/chip';
|
||
|
|
import { Gender } from '@/types/user';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
const GenderInput = ({
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
disabled = false,
|
||
|
|
}: {
|
||
|
|
value: Gender | undefined;
|
||
|
|
onChange: (value: Gender) => void;
|
||
|
|
disabled?: boolean;
|
||
|
|
}) => {
|
||
|
|
|
||
|
|
const items = [
|
||
|
|
{
|
||
|
|
value: Gender.MALE,
|
||
|
|
label: 'Male',
|
||
|
|
icon: <i className="iconfont icon-male !text-[24px]" aria-hidden="true"></i>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: Gender.FEMALE,
|
||
|
|
label: 'Female',
|
||
|
|
icon: <i className="iconfont icon-female !text-[24px]" aria-hidden="true"></i>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: Gender.OTHER,
|
||
|
|
label: 'Other',
|
||
|
|
icon: <i className="iconfont icon-nonconforming !text-[24px]" aria-hidden="true"></i>,
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="grid grid-cols-3 gap-2"
|
||
|
|
role="radiogroup"
|
||
|
|
aria-label="Gender"
|
||
|
|
>
|
||
|
|
{items.map((item) => (
|
||
|
|
<Chip
|
||
|
|
size="large"
|
||
|
|
block
|
||
|
|
key={item.value}
|
||
|
|
disabled={disabled && value !== item.value}
|
||
|
|
state={value === item.value ? 'active' : 'inactive'}
|
||
|
|
className={cn("cursor-pointer", disabled && "pointer-events-none")}
|
||
|
|
onClick={() => !disabled && onChange(item.value)}
|
||
|
|
role="radio"
|
||
|
|
aria-checked={value === item.value}
|
||
|
|
aria-label={item.label}
|
||
|
|
>
|
||
|
|
{item.icon}
|
||
|
|
<span className="sr-only">{item.label}</span>
|
||
|
|
</Chip>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default GenderInput;
|