42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
|
|
interface FigmaMultipleChoiceProps {
|
|
options: string[];
|
|
selectedValue?: string;
|
|
onSelect?: (value: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export const FigmaMultipleChoice: React.FC<FigmaMultipleChoiceProps> = ({
|
|
options,
|
|
selectedValue,
|
|
onSelect,
|
|
className = ""
|
|
}) => {
|
|
return (
|
|
<div className={`self-stretch inline-flex justify-center items-center gap-3 ${className}`}>
|
|
{options.map((option, index) => {
|
|
const isSelected = selectedValue === option;
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={`flex-1 h-20 relative rounded-[999px] overflow-hidden cursor-pointer transition-colors ${isSelected
|
|
? 'bg-[--Neutrals-NeutralSlate800]'
|
|
: 'bg-[--Neutrals-NeutralSlate100] hover:bg-[--Neutrals-NeutralSlate200]'
|
|
}`}
|
|
onClick={() => onSelect?.(option)}
|
|
>
|
|
<div className={`absolute inset-0 flex items-center justify-center text-center text-base font-normal font-['Inter'] leading-normal ${isSelected
|
|
? 'text-[--Neutrals-NeutralSlate0]'
|
|
: 'text-[--Neutrals-NeutralSlate950]'
|
|
}`}>
|
|
{option}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FigmaMultipleChoice; |