dify

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

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useState } from 'react'
+import { RiSparklingFill, RiTerminalBoxLine } from '@remixicon/react'
+import TabSliderNew from '.'
+
+const OPTIONS = [
+  { value: 'visual', text: 'Visual builder', icon: <RiSparklingFill className="mr-2 h-4 w-4 text-primary-500" /> },
+  { value: 'code', text: 'Code', icon: <RiTerminalBoxLine className="mr-2 h-4 w-4 text-text-tertiary" /> },
+]
+
+const TabSliderNewDemo = ({
+  initialValue = 'visual',
+}: {
+  initialValue?: string
+}) => {
+  const [value, setValue] = useState(initialValue)
+
+  return (
+    <div className="flex w-full max-w-sm 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">Pill tabs</div>
+      <TabSliderNew value={value} options={OPTIONS} onChange={setValue} />
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Base/Navigation/TabSliderNew',
+  component: TabSliderNewDemo,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Rounded pill tabs suited for switching between editors. Icons illustrate mixed text/icon options.',
+      },
+    },
+  },
+  argTypes: {
+    initialValue: {
+      control: 'radio',
+      options: OPTIONS.map(option => option.value),
+    },
+  },
+  args: {
+    initialValue: 'visual',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof TabSliderNewDemo>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}

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

@@ -0,0 +1,40 @@
+import type { FC } from 'react'
+import cn from '@/utils/classnames'
+
+type Option = {
+  value: string
+  text: string
+  icon?: React.ReactNode
+}
+type TabSliderProps = {
+  className?: string
+  value: string
+  onChange: (v: string) => void
+  options: Option[]
+}
+const TabSliderNew: FC<TabSliderProps> = ({
+  className,
+  value,
+  onChange,
+  options,
+}) => {
+  return (
+    <div className={cn(className, 'relative flex')}>
+      {options.map(option => (
+        <div
+          key={option.value}
+          onClick={() => onChange(option.value)}
+          className={cn(
+            'mr-1 flex h-[32px] cursor-pointer items-center rounded-lg border-[0.5px] border-transparent px-3 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-state-base-hover',
+            value === option.value && 'border-components-main-nav-nav-button-border bg-state-base-hover text-components-main-nav-nav-button-text-active shadow-xs',
+          )}
+        >
+          {option.icon}
+          {option.text}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default TabSliderNew