Function ExampleSwitcher

packages/dev/s2-docs/src/ExampleSwitcher.tsx:66–144

({type = 'style', examples = DEFAULT_EXAMPLES, children})

const DEFAULT_EXAMPLES = ['Vanilla CSS', 'Tailwind'];

export function ExampleSwitcher({type = 'style', examples = DEFAULT_EXAMPLES, children}) {
  let [selected, setSelected] = useLocalStorage(type, examples[0]);
  let [theme, setTheme] = useLocalStorage('theme', 'indigo');
  let [value, setValue] = useState(examples[0]);

  if (!examples.includes(selected)) {
    selected = examples[0];
  }

  if (!type) {
    selected = value;
  }

  useLayoutEffect(() => {
    document.documentElement.style.setProperty('--tint', `var(--${theme})`);
  }, [theme]);

  let onSelectionChange = (key: Key) => {
    if (type) {
      setSelected(String(key));
    } else {
      setValue(String(key));
    }
  };

  let onThemeChange = (key: Key | null) => {
    setTheme(String(key));
  };

  return (
    <div className={exampleStyle} data-example-switcher>
      <div className={switcher}>
        <SegmentedControl
          aria-label={type || 'example'}
          selectedKey={selected}
          onSelectionChange={onSelectionChange}>
          {examples.map(example => (
            <SegmentedControlItem key={example} id={example}>
              {example}
            </SegmentedControlItem>
          ))}
        </SegmentedControl>
      </div>
      {selected === 'Vanilla CSS' && (
        <Picker
          label="Theme"
          labelPosition="side"
          value={theme}
          onChange={onThemeChange}
          styles={themePicker}
          contextualHelp={
            <ContextualHelp>
              <Heading>Vanilla CSS theme</Heading>
              <Content>
                This sets the <code className={style({font: 'code-sm'})}>--tint</code> CSS variable
                used by the Vanilla CSS examples.
              </Content>
            </ContextualHelp>