Improve the design of tabs and tab items

vertex-center · Nov 15, 2023 · 64ce78a · 64ce78a
1 parent a5caeb3
commit 64ce78a
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 5 deletions.
diff --git a/lib/components/Tabs/TabItem.tsx b/lib/components/Tabs/TabItem.tsx
@@ -3,12 +3,16 @@ import cx from "classnames";
 
 type TabItemProps = HTMLProps<HTMLDivElement> & {
     label?: string;
+    active?: boolean;
 };
 
 export function TabItem(props: Readonly<TabItemProps>) {
-    const { label, className, ...others } = props;
+    const { label, active, className, ...others } = props;
     return (
-        <div className={cx("tab-item", className)} {...others}>
+        <div
+            className={cx("tab-item", { "tab-item-active": active }, className)}
+            {...others}
+        >
             {label}
         </div>
     );

diff --git a/lib/components/Tabs/Tabs.sass b/lib/components/Tabs/Tabs.sass
@@ -5,12 +5,45 @@
     &-row
         display: flex
         flex-direction: row
+        gap: 30px
         margin-bottom: 15px
 
 .tab-item
-    padding: 10px 20px
-    border-radius: dimensions.$border-radius
+    height: dimensions.$component-height
+    padding: 0
+    display: flex
+    align-items: center
     cursor: pointer
+    position: relative
+    z-index: 1
 
-    &:hover
+    &::before
+        content: ''
+        position: absolute
+        top: 0
+        bottom: 0
+        left: -15px
+        right: -15px
+        z-index: -1
+        border-radius: dimensions.$border-radius
+
+    &:hover::before
         background-color: colors.$bg-secondary-hover
+
+    &::after
+        content: ''
+        position: absolute
+        left: 50%
+        right: 50%
+        bottom: -1px
+        height: 2px
+        border-radius: 1px
+        transition: all 0.1s ease
+        opacity: 0
+        background-color: colors.$bg-accent
+
+    &-active::after
+        left: 0
+        right: 0
+        opacity: 1
+        background-color: colors.$bg-accent
diff --git a/lib/components/Tabs/Tabs.tsx b/lib/components/Tabs/Tabs.tsx
@@ -15,6 +15,7 @@ export function Tabs(props: Readonly<TabsProps>) {
                 {Children.map(children, (child: any, i) => {
                     return React.cloneElement(child, {
                         onClick: () => setActive(i),
+                        active: i === active,
                     });
                 })}
             </div>