/
alt3rmann
/
label-studio
Обзор
Документация
Войти
/
alt3rmann
/
label-studio
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
web/libs/ui/src/lib/MultiStateToggle/MultiStateToggle.tsx
38 строк
1 KB
Yousif Yassi
feat: OPTIC-1217: Implement Color design tokens as CSS variables and Dark Mode (#6550)
28 апр 2025, 19:46
Не верифицирован
28 апр 2025, 19:46
2e8e35e
Код
Авторство
О чём код?
import { clsx } from "clsx"; import styles from "./MultiStateToggle.module.scss"; import { useMemo } from "react"; export interface MultiStateToggleOption { label?: string | JSX.Element; value: string; } export interface MultiStateToggleProps { selectedOption: string; options?: MultiStateToggleOption[]; onChange?: (option: string) => void; } export const MultiStateToggle = ({ options = [], selectedOption, onChange }: MultiStateToggleProps) => { const selectedIndex = useMemo(() => { return options.findIndex((option: MultiStateToggleOption) => option.value === selectedOption); }, [options, selectedOption]); return ( <div className={clsx(styles.multiStateToggle)}> {options?.map((option, index) => ( <button key={option.value} className={clsx(styles.multiStateToggle__option, { [styles.multiStateToggle__option_selected]: selectedIndex === index, })} onClick={() => onChange?.(option.value)} type="button" > {option?.label ?? option.value} </button> ))} </div> ); }; export default MultiStateToggle;