52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import React from "react";
|
|
|
|
interface RadioOption {
|
|
value: string;
|
|
label: string;
|
|
}
|
|
|
|
interface RadioGroupProps {
|
|
name: string;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
options: RadioOption[];
|
|
className?: string;
|
|
}
|
|
|
|
export default function RadioGroup(
|
|
{
|
|
name,
|
|
value,
|
|
onChange,
|
|
options,
|
|
className = ""
|
|
}: RadioGroupProps) {
|
|
return (
|
|
<div className={`flex flex-wrap gap-3 ${className}`}>
|
|
{options.map((option: RadioOption) => (
|
|
<div key={option.value} className="flex items-center">
|
|
<input
|
|
type="radio"
|
|
id={`${name}-${option.value}`}
|
|
name={name}
|
|
value={option.value}
|
|
checked={value === option.value}
|
|
onChange={() => onChange(option.value)}
|
|
className="hidden"
|
|
/>
|
|
<label
|
|
htmlFor={`${name}-${option.value}`}
|
|
className={`px-4 py-2 rounded-lg cursor-pointer transition-all duration-200 text-sm font-medium border ${
|
|
value === option.value
|
|
? 'bg-primary/20 text-primary border-primary/40 shadow-md'
|
|
: 'bg-secondary/30 text-text-primary border-secondary/50 hover:bg-secondary hover:border-secondary hover:scale-105'
|
|
}`}
|
|
>
|
|
{option.label}
|
|
</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|