export default function BlockSwitcher()

in src/components/BlockSwitcher/index.tsx [50:89]


export default function BlockSwitcher({children}) {
  // a single child is not passed as an array
  if (!Array.isArray(children)) {
    children = [children];
  }
  const ctx = useCodeBlockContext();
  useEffect(() => {
    // If we haven't seen these tab names before, just add the first one as top priority.
    if (!ctx.tabOrder.includes(children[0].props.name)) {
      ctx.setActiveTab(children[0].props.name, false);
    }

    ctx.setFromLocalStorage();
  }, []);
  const activeIndex = getActiveIndex(children, ctx.tabOrder);

  return (
    <HostStyle>
      <TabContainerStyle>
        {children?.map((node, index) => {
          return (
            <SwitcherButton
              name={node.props.name}
              key={index}
              isActive={index === activeIndex}
              ctx={ctx}
              {...node.props}
            />
          );
        })}
      </TabContainerStyle>
      <SwitcherContentStyle>
        {children?.map(
          (node, index) =>
            index === activeIndex && <div key={index}>{node}</div>,
        )}
      </SwitcherContentStyle>
    </HostStyle>
  );
}