CodeTabs.astro

---
import {parse} from "node-html-parser";

interface Props {
  items: string[];
}

const { items } = Astro.props;
let slot = await Astro.slots.render('default');
const parsedHtml = parse(slot);

parsedHtml.childNodes.forEach((tabContent, index) => {
  // @ts-ignore
  if (index !== 0) tabContent.classList.add('hidden');
});
---
<div class="codetabs_wrapper">
  <div class="codetabs_tabs">
    {items.map((item, index) => <div class={index === 0 ? "codetabs_tab--active" : "codetabs_tab"} data-change-code-tab-btn data-tab-label={item}>{item}</div>)}
  </div>
  <div class="code codetabs_codeBlock">
    <Fragment set:html={parsedHtml.toString()} />
  </div>
</div>
<script>
  import { setupSyncedTabs } from "@/utils-client";

  document.addEventListener("astro:page-load", setupSyncedTabs);
</script>