init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

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
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;