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