Merge pull request appwrite#1542 from appwrite/fix-tabs-active-state

Fix so the active state will be visible again
AdityaSrivastava185 · Dec 9, 2024 · 0a2de9a · 0a2de9a
2 parents 04677af + 4cbff4f
commit 0a2de9a
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/src/markdoc/tags/Tabs.svelte b/src/markdoc/tags/Tabs.svelte
@@ -32,13 +32,22 @@
     >
         <ul class="tabs-list flex items-center gap-4" {...$list} use:list>
             {#each $ctx.triggers.entries() as [id, title]}
-                <li class="tabs-item rounded-t-[0.625rem] hover:bg-white/4">
+                <li
+                    class="tabs-item rounded-t-[0.625rem] hover:bg-white/4"
+                    class:text-[var(--color-primary)]={$value === id}
+                >
                     <button
                         class="tabs-button cursor-pointer bg-clip-padding py-[0.625rem] px-1 font-light outline-none"
-                        class:is-selected={$value === id}
                         {...$trigger(id)}
                         use:trigger>{title}</button
                     >
+                    {#if $value === id}
+                        <div
+                            class="absolute mt-0.5 h-px overflow-hidden bg-[var(--color-primary)] px-1"
+                        >
+                            {title}
+                        </div>
+                    {/if}
                 </li>
             {/each}
         </ul>