File size: 1,860 Bytes
42ebd3d a2acc77 42ebd3d a2acc77 42ebd3d a2acc77 42ebd3d a2acc77 42ebd3d a2acc77 42ebd3d a2acc77 |
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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
import { motion } from 'framer-motion';
import { memo } from 'react';
import { classNames } from '~/utils/classNames';
interface SliderOption<T> {
value: T;
text: string;
}
export interface SliderOptions<T> {
left: SliderOption<T>;
right: SliderOption<T>;
}
interface SettingsSliderProps<T> {
selected: T;
options: SliderOptions<T>;
setSelected?: (selected: T) => void;
}
export const SettingsSlider = memo(<T,>({ selected, options, setSelected }: SettingsSliderProps<T>) => {
const isLeftSelected = selected === options.left.value;
return (
<div className="relative flex items-center bg-bolt-elements-prompt-background rounded-lg">
<motion.div
className={classNames(
'absolute h-full bg-green-500 transition-all duration-300 rounded-lg',
isLeftSelected ? 'left-0 w-1/2' : 'right-0 w-1/2',
)}
initial={false}
animate={{
x: isLeftSelected ? 0 : '100%',
opacity: 0.2,
}}
transition={{
type: 'spring',
stiffness: 300,
damping: 30,
}}
/>
<button
onClick={() => setSelected?.(options.left.value)}
className={classNames(
'relative z-10 flex-1 p-2 rounded-lg text-sm transition-colors duration-200',
isLeftSelected ? 'text-white' : 'text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary',
)}
>
{options.left.text}
</button>
<button
onClick={() => setSelected?.(options.right.value)}
className={classNames(
'relative z-10 flex-1 p-2 rounded-lg text-sm transition-colors duration-200',
!isLeftSelected ? 'text-white' : 'text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary',
)}
>
{options.right.text}
</button>
</div>
);
});
|