chore: add slider tab type

DistributedCollective · Jul 31, 2024 · ef72fbe · ef72fbe
1 parent bc70b8f
commit ef72fbe
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 1 deletion.
diff --git a/packages/ui/src/2_molecules/Tabs/Tabs.module.css b/packages/ui/src/2_molecules/Tabs/Tabs.module.css
@@ -7,6 +7,9 @@
     &.primary {
       @apply border border-b-0 border-gray-50 bg-gray-90;
     }
+    &.slider {
+      @apply bg-gray-80 p-1 rounded;
+    }
   }
 
   .content {

diff --git a/packages/ui/src/2_molecules/Tabs/Tabs.stories.tsx b/packages/ui/src/2_molecules/Tabs/Tabs.stories.tsx
@@ -125,3 +125,22 @@ Secondary.args = {
 Secondary.argTypes = {
   ...Primary.argTypes,
 };
+
+export const Slider = Template.bind({});
+Slider.args = {
+  items: [
+    {
+      label: 'Lend',
+      dataAttribute: 'lend',
+    },
+    {
+      label: 'Borrow',
+      dataAttribute: 'borrow',
+    },
+  ],
+  index: 0,
+  contentClassName: '',
+  className: '',
+  size: TabSize.normal,
+  type: TabType.slider,
+};
diff --git a/packages/ui/src/2_molecules/Tabs/Tabs.types.ts b/packages/ui/src/2_molecules/Tabs/Tabs.types.ts
@@ -6,4 +6,5 @@ export enum TabSize {
 export enum TabType {
   primary = 'primary',
   secondary = 'secondary',
+  slider = 'slider',
 }
diff --git a/packages/ui/src/2_molecules/Tabs/components/Tab/Tab.module.css b/packages/ui/src/2_molecules/Tabs/components/Tab/Tab.module.css
@@ -1,5 +1,5 @@
 .button {
-  @apply cursor-pointer inline-flex box-border items-center justify-center text-center rounded cursor-pointer transition-colors relative flex-grow;
+  @apply cursor-pointer inline-flex box-border items-center justify-center text-center rounded transition-colors relative flex-grow;
 
   &.primary {
     @apply border-t-2 border-t-transparent border-b text-base text-gray-10/50 rounded-b-none h-12;
@@ -68,6 +68,29 @@
     }
   }
 
+  &.slider {
+    &.normal {
+      @apply text-sm font-semibold px-3 py-1.5;
+      min-width: 5rem;
+    }
+
+    &.small {
+      @apply font-semibold text-xs px-2 py-1;
+      min-width: 3rem;
+    }
+
+    &.active {
+      @apply text-primary-20 bg-gray-70;
+    }
+
+    &:not(.active) {
+      @apply text-gray-30/75;
+      &:not(:disabled):hover {
+        @apply text-gray-10;
+      }
+    }
+  }
+
   &:disabled {
     @apply cursor-not-allowed;
   }