1---
2import CodeBlock from "./CodeBlock.astro";
3
4interface Tab {
5 key: string;
6 label: string;
7 filename: string;
8 code: string;
9 compact?: boolean;
10}
11interface Props {
12 tabs: Tab[];
13}
14const { tabs } = Astro.props;
15---
16
17<div class="code-tabs" data-code-tabs>
18 <div class="code-tabs__nav" role="tablist">
19 {tabs.map((t, i) => (
20 <button
21 type="button"
22 class="code-tabs__btn"
23 data-tab-key={t.key}
24 data-active={i === 0}
25 >
26 {t.label}
27 </button>
28 ))}
29 </div>
30 {tabs.map((t, i) => (
31 <div
32 class="code-tabs__panel"
33 data-tab-panel={t.key}
34 data-active={i === 0}
35 >
36 <CodeBlock filename={t.filename} code={t.code} compact={t.compact} />
37 </div>
38 ))}
39</div>
40
41<script>
42 for (const root of document.querySelectorAll<HTMLElement>("[data-code-tabs]")) {
43 const buttons = root.querySelectorAll<HTMLButtonElement>("[data-tab-key]");
44 const panels = root.querySelectorAll<HTMLElement>("[data-tab-panel]");
45 for (const btn of buttons) {
46 btn.addEventListener("click", () => {
47 const k = btn.dataset.tabKey;
48 for (const b of buttons) b.dataset.active = String(b.dataset.tabKey === k);
49 for (const p of panels) p.dataset.active = String(p.dataset.tabPanel === k);
50 });
51 }
52 }
53</script>