FEAT: NEW WORKFLOW ENGINE (#3160)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Yeuoly <admin@srmxy.cn>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: jyong <jyong@dify.ai>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: jyong <718720800@qq.com>

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

@@ -0,0 +1,40 @@
+import type { FC } from 'react'
+import cn from '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 px-3 py-[7px] h-[32px] flex items-center rounded-lg border-[0.5px] border-transparent text-gray-700 text-[13px] font-medium leading-[18px] cursor-pointer hover:bg-gray-200',
+            value === option.value && 'bg-white border-gray-200 shadow-xs text-primary-600 hover:bg-white',
+          )}
+        >
+          {option.icon}
+          {option.text}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default TabSliderNew