dify

dify/web/app/components/base/tab-slider-plain/index.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useState } from 'react'
+import TabSliderPlain from '.'
+
+const OPTIONS = [
+  { value: 'analytics', text: 'Analytics' },
+  { value: 'activity', text: 'Recent activity' },
+  { value: 'alerts', text: 'Alerts' },
+]
+
+const TabSliderPlainDemo = ({
+  initialValue = 'analytics',
+}: {
+  initialValue?: string
+}) => {
+  const [value, setValue] = useState(initialValue)
+
+  return (
+    <div className="flex w-full max-w-2xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
+      <div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Underline tabs</div>
+      <TabSliderPlain
+        value={value}
+        onChange={setValue}
+        options={OPTIONS}
+      />
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Base/Navigation/TabSliderPlain',
+  component: TabSliderPlainDemo,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Underline-style navigation commonly used in dashboards. Toggle between three sections.',
+      },
+    },
+  },
+  argTypes: {
+    initialValue: {
+      control: 'radio',
+      options: OPTIONS.map(option => option.value),
+    },
+  },
+  args: {
+    initialValue: 'analytics',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof TabSliderPlainDemo>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}

dify/web/app/components/base/tab-slider-plain/index.tsx

@@ -0,0 +1,78 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from '@/utils/classnames'
+
+type Option = {
+  value: string
+  text: string | React.JSX.Element
+}
+
+type ItemProps = {
+  className?: string
+  isActive: boolean
+  onClick: (v: string) => void
+  option: Option
+  smallItem?: boolean
+}
+const Item: FC<ItemProps> = ({
+  className,
+  isActive,
+  onClick,
+  option,
+  smallItem,
+}) => {
+  return (
+    <div
+      key={option.value}
+      className={cn(
+        'relative pb-2.5 ',
+        !isActive && 'cursor-pointer',
+        smallItem ? 'system-sm-semibold-uppercase' : 'system-xl-semibold',
+        className,
+      )}
+      onClick={() => !isActive && onClick(option.value)}
+    >
+      <div className={cn(isActive ? 'text-text-primary' : 'text-text-tertiary')}>{option.text}</div>
+      {isActive && (
+        <div className='absolute bottom-0 left-0 right-0 h-0.5 bg-util-colors-blue-brand-blue-brand-600'></div>
+      )}
+    </div>
+  )
+}
+
+type Props = {
+  className?: string
+  value: string
+  onChange: (v: string) => void
+  options: Option[]
+  noBorderBottom?: boolean
+  smallItem?: boolean
+  itemClassName?: string
+}
+
+const TabSlider: FC<Props> = ({
+  className,
+  value,
+  onChange,
+  options,
+  noBorderBottom,
+  itemClassName,
+  smallItem,
+}) => {
+  return (
+    <div className={cn(className, !noBorderBottom && 'border-b border-divider-subtle', 'flex  space-x-6')}>
+      {options.map(option => (
+        <Item
+          isActive={option.value === value}
+          option={option}
+          onClick={onChange}
+          key={option.value}
+          className={itemClassName}
+          smallItem={smallItem}
+        />
+      ))}
+    </div>
+  )
+}
+export default React.memo(TabSlider)