import { Index, JSX, createSignal, onMount } from "solid-js";
// Check if children are elements
const isArrayOfElements = (arr: unknown[]): arr is Element[] => {
return arr.every((item) => item instanceof Element);
};
/**
* This is a code blocks component that can be used to divide code blocks into separate tabs. Here's an example of how to use it in JSX and mdx:
* @example
* //jsx
*
*
*
* npm install
*
*
* ...
*
*
* @example
* //jsx
*
*
* \```bash frame="none"
* npm install
* \```
*
*
* \```bash frame="none"
* yarn install
* \```
*
* ...
*
*/
type Props = { children: JSX.Element };
export const TabsCodeBlocks = (props: Props) => {
const [tabs, setTabs] = createSignal();
const [activeTab, setActiveTab] = createSignal(0);
onMount(() => {
const children = props.children;
// Check if children are an array
if (!Array.isArray(children))
throw new Error("TabsCodeBlocks children must be an array");
if (!isArrayOfElements(children))
throw new Error("TabsCodeBlocks children must be an array of elements");
// Check if all elements have ids
const allElementsHaveIds = children.every((child) => "id" in child);
if (!allElementsHaveIds)
throw new Error("All TabsCodeBlocks children must have an id");
setTabs(children);
});
return (