Add Custom Tab component, BetterLeavesLite wiki

src/components/CustomTabs.astro

@@ -0,0 +1,81 @@
+---
+interface Props {
+  tabs: {
+        name: string
+        id: string
+        icon?: string
+        active?: boolean
+        disabled?: boolean
+    }[]
+  className?: string
+}
+const { tabs, className } = Astro.props
+import { Icon } from 'astro-icon/components'
+---
+
+<custom-tabs>
+  <section class="my-6">
+    <div class="flex" id="tabs-header">
+    {
+        tabs.map((tab) => (
+            <button class={`tab ${className} ${tab.disabled ? "disabled" : ""}`} id={tab.id+"-tab"} data-active={tab.active}>
+                <div class="flex">
+                    {tab.icon ? <Icon name={tab.icon} class="mr-2" /> : ''}
+                    {tab.name}
+                </div>
+            </button>
+            ),
+        )
+    }
+    </div>
+    <div id="tabs-content">
+        <slot />
+    </div>
+</custom-tabs>
+
+<script>
+
+  // Define the behaviour for our new type of HTML element.
+  class CustomTabs extends HTMLElement {
+    connectedCallback() {
+        const buttons = document.querySelectorAll('button.tab');
+
+        buttons.forEach((button) => {
+            button.addEventListener('click', () => {
+                buttons.forEach((but) => {
+                    but?.classList.remove('color-secondary');
+                    const div = document.getElementById(but.id.replace('-tab', ''));
+                    div?.classList.add('hidden');
+                    but.setAttribute('data-active', 'false');
+                })
+                const tabDiv = document.getElementById(button.id.replace('-tab', ''));
+                button?.classList.add('color-secondary');
+                tabDiv?.classList.remove('hidden');
+                button.setAttribute('data-active', 'true');
+            });
+        });
+    }
+  }
+
+  customElements.define('custom-tabs', CustomTabs);
+</script>
+<style lang="scss" is:global>
+    button.tab {
+        color: var(--font-color);
+        border: none;
+        opacity: 75%;
+    }
+    button.tab[data-active="true"] {
+        opacity: 100%;
+        border-bottom: 2px solid var(--action-color);
+        background: linear-gradient(0deg, var(--action-color) 0%, transparent 15%);
+    }
+    #tabs-header {
+        margin-left: 6px;
+    }
+    #tabs-content {
+        padding: 9px;
+        border: 2px dashed var(--action-color);
+        border-radius: 8px;
+    }
+</style>

src/components/SiteMeta.astro

@@ -1,5 +1,5 @@
 ---
-import { ViewTransitions } from 'astro:transitions'
+import { ClientRouter } from 'astro:transitions'
 
 const { title, description, url, image, author } = Astro.props
 
@@ -23,4 +23,4 @@ let subtitle = 'MidnightDust'
 <!-- page title -->
 <title>{title} - {subtitle}</title>
 
-<ViewTransitions />
+<ClientRouter />