feat: Add SegmentedControl component with styling and option handling

web/app/(commonLayout)/datasets/Container.tsx

@@ -13,7 +13,8 @@ import Datasets from './Datasets'
 import DatasetFooter from './DatasetFooter'
 import ApiServer from '../../components/develop/ApiServer'
 import Doc from './Doc'
-import TabSliderNew from '@/app/components/base/tab-slider-new'
+import SegmentedControl from '@/app/components/base/segmented-control'
+import { RiBook2Line, RiTerminalBoxLine } from '@remixicon/react'
 import TagManagementModal from '@/app/components/base/tag-management'
 import TagFilter from '@/app/components/base/tag-management/filter'
 import Button from '@/app/components/base/button'
@@ -42,8 +43,10 @@ const Container = () => {
 
   const options = useMemo(() => {
     return [
-      { value: 'dataset', text: t('dataset.datasets') },
-      ...(currentWorkspace.role === 'dataset_operator' ? [] : [{ value: 'api', text: t('dataset.datasetsApi') }]),
+      { value: 'dataset', text: t('dataset.datasets'), Icon: RiBook2Line, count: 1 },
+      ...(currentWorkspace.role === 'dataset_operator' ? [] : [{
+        value: 'api', text: t('dataset.datasetsApi'), Icon: RiTerminalBoxLine, count: 5,
+      }]),
     ]
   }, [currentWorkspace.role, t])
 
@@ -85,11 +88,13 @@ const Container = () => {
 
   return (
     <div ref={containerRef} className='scroll-container relative flex grow flex-col overflow-y-auto bg-background-body'>
-      <div className='sticky top-0 z-10 flex flex-wrap justify-between gap-y-2 bg-background-body px-12 pb-2 pt-4 leading-[56px]'>
-        <TabSliderNew
+      <div className='sticky top-0 z-10 flex items-center justify-between gap-x-1 bg-background-body px-12 pb-2 pt-4'>
+        <SegmentedControl
           value={activeTab}
-          onChange={newActiveTab => setActiveTab(newActiveTab)}
+          onChange={newActiveTab => setActiveTab(newActiveTab as string)}
           options={options}
+          size='large'
+          activeClassName='text-text-primary'
         />
         {activeTab === 'dataset' && (
           <div className='flex items-center justify-center gap-2'>

web/app/components/base/segmented-control/index.css

@@ -0,0 +1,78 @@
+@tailwind components;
+
+@layer components {
+  .segmented-control {
+    @apply flex items-center bg-components-segmented-control-bg-normal gap-x-px
+  }
+
+  .segmented-control-regular,
+  .segmented-control-large {
+    @apply rounded-lg
+  }
+  
+  .segmented-control-large.padding,
+  .segmented-control-regular.padding {
+    @apply p-0.5
+  }
+
+  .segmented-control-small {
+    @apply rounded-md
+  }
+
+  .segmented-control-small.padding {
+    @apply p-px
+  }
+
+  .no-padding {
+    @apply border-[0.5px] border-divider-subtle
+  }
+
+  .segmented-control-item {
+    @apply flex items-center justify-center relative border-[0.5px] border-transparent
+  }
+
+  .segmented-control-item-regular {
+    @apply px-2 h-7 gap-x-0.5 rounded-lg
+  }
+
+  .segmented-control-item-small {
+    @apply p-px h-[22px] rounded-md
+  }
+
+  .segmented-control-item-large {
+    @apply px-2.5 h-8 gap-x-0.5 rounded-lg
+  }
+
+  .segmented-control-item-disabled {
+    @apply cursor-not-allowed text-text-disabled
+  }
+
+  .default {
+    @apply hover:bg-state-base-hover text-text-tertiary hover:text-text-secondary
+  }
+
+  .active {
+    @apply border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg shadow-xs shadow-shadow-shadow-3
+    text-text-secondary
+  }
+
+  .active.accent {
+    @apply text-text-accent
+  }
+
+  .active.accent-light {
+    @apply text-text-accent-light-mode-only
+  }
+
+  .item-text-regular {
+    @apply p-0.5
+  }
+
+  .item-text-small {
+    @apply p-0.5 pr-1
+  }
+
+  .item-text-large {
+    @apply px-0.5
+  }
+}

web/app/components/base/segmented-control/index.tsx

@@ -1,31 +1,107 @@
 import React from 'react'
-import classNames from '@/utils/classnames'
+import cn from '@/utils/classnames'
 import type { RemixiconComponentType } from '@remixicon/react'
 import Divider from '../divider'
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+import './index.css'
+
+type SegmentedControlOption<T> = {
+  value: T
+  text?: string
+  Icon: RemixiconComponentType
+  count?: number
+}
 
-// Updated generic type to allow enum values
 type SegmentedControlProps<T extends string | number | symbol> = {
-  options: { Icon: RemixiconComponentType, text: string, value: T }[]
+  options: SegmentedControlOption<T>[]
   value: T
   onChange: (value: T) => void
   className?: string
+  activeClassName?: string
 }
 
+const SegmentedControlVariants = cva(
+  'segmented-control',
+  {
+    variants: {
+      size: {
+        regular: 'segmented-control-regular',
+        small: 'segmented-control-small',
+        large: 'segmented-control-large',
+      },
+      padding: {
+        none: 'no-padding',
+        with: 'padding',
+      },
+    },
+    defaultVariants: {
+      size: 'regular',
+      padding: 'with',
+    },
+  },
+)
+
+const SegmentedControlItemVariants = cva(
+  'segmented-control-item disabled:segmented-control-item-disabled',
+  {
+    variants: {
+      size: {
+        regular: ['segmented-control-item-regular', 'system-sm-medium'],
+        small: ['segmented-control-item-small', 'system-xs-medium'],
+        large: ['segmented-control-item-large', 'system-md-semibold'],
+      },
+      activeState: {
+        default: '',
+        accent: 'accent',
+        accentLight: 'accent-light',
+      },
+    },
+    defaultVariants: {
+      size: 'regular',
+      activeState: 'default',
+    },
+  },
+)
+
+const ItemTextWrapperVariants = cva(
+  'item-text',
+  {
+    variants: {
+      size: {
+        regular: 'item-text-regular',
+        small: 'item-text-small',
+        large: 'item-text-large',
+      },
+    },
+    defaultVariants: {
+      size: 'regular',
+    },
+  },
+)
+
 export const SegmentedControl = <T extends string | number | symbol>({
   options,
   value,
   onChange,
   className,
-}: SegmentedControlProps<T>): JSX.Element => {
+  size,
+  padding,
+  activeState,
+  activeClassName,
+}: SegmentedControlProps<T>
+& VariantProps<typeof SegmentedControlVariants>
+& VariantProps<typeof SegmentedControlItemVariants>
+& VariantProps<typeof ItemTextWrapperVariants>) => {
   const selectedOptionIndex = options.findIndex(option => option.value === value)
 
   return (
-    <div className={classNames(
-      'flex items-center rounded-lg bg-components-segmented-control-bg-normal gap-x-[1px] p-0.5',
+    <div className={cn(
+      SegmentedControlVariants({ size, padding }),
       className,
     )}>
       {options.map((option, index) => {
-        const { Icon } = option
+        const { Icon, text, count } = option
         const isSelected = index === selectedOptionIndex
         const isNextSelected = index === selectedOptionIndex - 1
         const isLast = index === options.length - 1
@@ -33,26 +109,24 @@ export const SegmentedControl = <T extends string | number | symbol>({
           <button
             type='button'
             key={String(option.value)}
-            className={classNames(
-              'flex items-center justify-center relative px-2 py-1 rounded-lg gap-x-0.5 group border-0.5 border-transparent',
-              isSelected
-                ? 'border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg shadow-xs shadow-shadow-shadow-3'
-                : 'hover:bg-state-base-hover',
+            className={cn(
+              isSelected ? 'active' : 'default',
+              SegmentedControlItemVariants({ size, activeState: isSelected ? activeState : 'default' }),
+              isSelected && activeClassName,
             )}
             onClick={() => onChange(option.value)}
           >
-            <span className='flex h-5 w-5 items-center justify-center'>
-              <Icon className={classNames(
-                'w-4 h-4 text-text-tertiary',
-                isSelected ? 'text-text-accent-light-mode-only' : 'group-hover:text-text-secondary',
-              )} />
-            </span>
-            <span className={classNames(
-              'p-0.5 text-text-tertiary system-sm-medium',
-              isSelected ? 'text-text-accent-light-mode-only' : 'group-hover:text-text-secondary',
-            )}>
-              {option.text}
-            </span>
+            <Icon className='size-4' />
+            {text && (
+              <div className={cn('inline-flex items-center gap-x-1', ItemTextWrapperVariants({ size }))}>
+                <span>{text}</span>
+                {count && size === 'large' && (
+                  <div className='system-2xs-medium-uppercase inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] text-text-tertiary'>
+                    {count}
+                  </div>
+                )}
+              </div>
+            )}
             {!isLast && !isSelected && !isNextSelected && (
               <div className='absolute right-[-1px] top-0 flex h-full items-center'>
                 <Divider type='vertical' className='mx-0 h-3.5' />
@@ -65,4 +139,4 @@ export const SegmentedControl = <T extends string | number | symbol>({
   )
 }
 
-export default React.memo(SegmentedControl) as typeof SegmentedControl
+export default React.memo(SegmentedControl)