Function BundlerSwitcher

packages/dev/s2-docs/src/BundlerSwitcher.tsx:45–82

({children}: BundlerSwitcherProps)

}

export function BundlerSwitcher({children}: BundlerSwitcherProps) {
  let items = useMemo(() => {
    let arr = Children.toArray(children) as ReactElement<BundlerSwitcherItemProps>[];
    return arr
      .filter(el => React.isValidElement(el))
      .map(el => ({
        id: el.props.id as SwitcherKey,
        label: el.props.label,
        content: el.props.children as ReactNode
      }));
  }, [children]);

  let [bundler, setBundler] = useLocalStorage('bundler', items[0]?.id);
  let active = items.find(it => it.id === bundler) ?? items[0];

  let onSelectionChange = (key: Key) => {
    let value = String(key) as SwitcherKey;
    setBundler(value);
  };

  return (
    <div className={container} data-example-switcher>
      <div className={style({overflowX: 'auto', width: 'auto', flexGrow: 1})}>
        <SegmentedControl
          selectedKey={active?.id}
          onSelectionChange={onSelectionChange}
          styles={switcher}>
          {items.map(it => (
            <SegmentedControlItem key={it.id} id={it.id}>
              {it.label}
            </SegmentedControlItem>
          ))}
        </SegmentedControl>
      </div>
      {active?.content}
    </div>
  );
}

export default BundlerSwitcher;