From 0eefc025334142dced627f35181d0ba8ad4ae7db Mon Sep 17 00:00:00 2001
From: zhengqi zhang <770166635@qq.com>
Date: Sat, 18 May 2024 19:44:42 +0800
Subject: [PATCH] improve tabs style

---
 src/components/Tabs/Tabs.module.css | 15 +++++++++++++++
 src/components/Tabs/Tabs.tsx        |  4 ++--
 src/components/Tabs/TabsContent.tsx |  2 +-
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/Tabs/Tabs.module.css b/src/components/Tabs/Tabs.module.css
index 59cf80bd9..2a1c43175 100644
--- a/src/components/Tabs/Tabs.module.css
+++ b/src/components/Tabs/Tabs.module.css
@@ -1,6 +1,21 @@
 .container {
   @apply mt-4;
 }
+.tablist {
+  @apply border-0 border-b border-solid border-black mb-4;
+}
+
+.tablist button {
+  @apply bg-transparent text-black border-none text-xl font-semibold leading-8 outline-none mb-[-1px] mr-12 capitalize;
+}
+
+button.primary,
+button.contentTabPrimary {
+  @apply text-link border-link border-0 border-b-4 border-solid;
+}
+
+button.secondary {
+}
 
 .tab {
   @apply py-1 px-2 mr-2;
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index 6860905bc..664790ede 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -65,7 +65,7 @@ export function Tabs({ sharedStore, ...slots }: Props) {
 
   return (
     <div class={styles.container}>
-      <div role="tablist" onKeyDown={moveFocus}>
+      <div role="tablist" class={styles.tablist} onKeyDown={moveFocus}>
         {tabs.map(([key, content]) => (
           <button
             ref={(el) => (tabButtonRefs.current[key] = el)}
@@ -79,7 +79,7 @@ export function Tabs({ sharedStore, ...slots }: Props) {
             data-astro-tab
             id={key}
             key={key}
-            class={clsx(curr === getBaseKeyFromTab(key) ? button.primary : button.secondary, styles.tab)}
+            class={clsx(curr === getBaseKeyFromTab(key) ? styles.primary : styles.secondary, styles.tab)}
           >
             {content}
           </button>
diff --git a/src/components/Tabs/TabsContent.tsx b/src/components/Tabs/TabsContent.tsx
index f076839ee..5742968fe 100644
--- a/src/components/Tabs/TabsContent.tsx
+++ b/src/components/Tabs/TabsContent.tsx
@@ -64,7 +64,7 @@ export function TabsContent({ sharedStore, ...slots }: Props) {
 
   return (
     <div className={styles.contentContainer}>
-      <div role="tablist" onKeyDown={moveFocus}>
+      <div role="tablist" class={styles.tablist} onKeyDown={moveFocus}>
         {tabs.map(([key, content]) => (
           <button
             ref={(el) => (tabButtonRefs.current[key] = el)}