dify

dify/web/app/components/base/premium-badge/index.css

@@ -0,0 +1,56 @@
+@tailwind components;
+
+@layer components {
+  .premium-badge {
+    @apply shrink-0 relative inline-flex justify-center items-center rounded-md box-border border border-transparent text-white shadow-xs hover:shadow-lg bg-origin-border overflow-hidden transition-all duration-100 ease-out;
+    background-clip: padding-box, border-box;
+  }
+  .allowHover {
+    @apply cursor-pointer;
+  }
+
+  /* m is for the regular button */
+  .premium-badge-m {
+    @apply !p-1 h-6 w-auto
+  }
+
+  .premium-badge-s {
+    @apply border-[0.5px] !px-1 !py-[3px] h-[18px] w-auto
+  }
+
+  .premium-badge-blue {
+    @apply bg-util-colors-blue-blue-200;
+    background-image: linear-gradient(90deg, #5289ffe6 0%, #155aefe6 100%), linear-gradient(135deg, var(--color-premium-badge-border-highlight-color) 0%, #155aef 100%);
+  }
+  .premium-badge-blue.allowHover:hover {
+    @apply bg-util-colors-blue-blue-300;
+    background-image: linear-gradient(90deg, #296dffe6 0%, #004aebe6 100%), linear-gradient(135deg, var(--color-premium-badge-border-highlight-color) 0%, #00329e 100%);
+  }
+
+  .premium-badge-indigo {
+    @apply bg-util-colors-indigo-indigo-200;
+    background-image: linear-gradient(90deg, #8098f9e6 0%, #444ce7e6 100%), linear-gradient(135deg, var(--color-premium-badge-border-highlight-color) 0%, #6172f3 100%);
+  }
+  .premium-badge-indigo.allowHover:hover {
+    @apply bg-util-colors-indigo-indigo-300;
+    background-image: linear-gradient(90deg, #6172f3e6 0%, #2d31a6e6 100%), linear-gradient(135deg, var(--color-premium-badge-border-highlight-color) 0%, #2d31a6 100%);
+  }
+
+  .premium-badge-gray {
+    @apply bg-util-colors-gray-gray-200;
+    background-image: linear-gradient(90deg, #98a2b2e6 0%, #676f83e6 100%), linear-gradient(135deg, var(--color-premium-badge-border-highlight-color) 0%, #676f83 100%);
+  }
+  .premium-badge-gray.allowHover:hover {
+    @apply bg-util-colors-gray-gray-300;
+    background-image: linear-gradient(90deg, #676f83e6 0%, #354052e6 100%), linear-gradient(135deg, var(--color-premium-badge-border-highlight-color) 0%, #354052 100%);
+  }
+
+  .premium-badge-orange {
+    @apply bg-util-colors-orange-orange-200;
+    background-image: linear-gradient(90deg, #ff692ee6 0%, #e04f16e6 100%), linear-gradient(135deg, var(--color-premium-badge-border-highlight-color) 0%, #e62e05 100%);
+  }
+  .premium-badge-orange.allowHover:hover {
+    @apply bg-util-colors-orange-orange-300;
+    background-image: linear-gradient(90deg, #ff4405e6 0%, #b93815e6 100%), linear-gradient(135deg, var(--color-premium-badge-border-highlight-color) 0%, #e62e05 100%);
+  }
+}

dify/web/app/components/base/premium-badge/index.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import PremiumBadge from '.'
+
+const colors: Array<NonNullable<React.ComponentProps<typeof PremiumBadge>['color']>> = ['blue', 'indigo', 'gray', 'orange']
+
+const PremiumBadgeGallery = ({
+  size = 'm',
+  allowHover = false,
+}: {
+  size?: 's' | 'm'
+  allowHover?: boolean
+}) => {
+  return (
+    <div className="flex w-full max-w-xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
+      <p className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Brand badge variants</p>
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
+        {colors.map(color => (
+          <div key={color} className="flex flex-col items-center gap-2 rounded-xl border border-transparent px-2 py-4 hover:border-divider-subtle hover:bg-background-default-subtle">
+            <PremiumBadge color={color} size={size} allowHover={allowHover}>
+              <span className="px-2 text-xs font-semibold uppercase tracking-[0.14em]">Premium</span>
+            </PremiumBadge>
+            <span className="text-[11px] uppercase tracking-[0.16em] text-text-tertiary">{color}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Base/General/PremiumBadge',
+  component: PremiumBadgeGallery,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Gradient badge used for premium features and upsell prompts. Hover animations can be toggled per instance.',
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: 'radio',
+      options: ['s', 'm'],
+    },
+    allowHover: { control: 'boolean' },
+  },
+  args: {
+    size: 'm',
+    allowHover: false,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof PremiumBadgeGallery>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+
+export const HoverEnabled: Story = {
+  args: {
+    allowHover: true,
+  },
+}

dify/web/app/components/base/premium-badge/index.tsx

@@ -0,0 +1,74 @@
+import type { CSSProperties, ReactNode } from 'react'
+import React from 'react'
+import { type VariantProps, cva } from 'class-variance-authority'
+import { Highlight } from '@/app/components/base/icons/src/public/common'
+import classNames from '@/utils/classnames'
+import './index.css'
+
+const PremiumBadgeVariants = cva(
+  'premium-badge',
+  {
+    variants: {
+      size: {
+        s: 'premium-badge-s',
+        m: 'premium-badge-m',
+      },
+      color: {
+        blue: 'premium-badge-blue',
+        indigo: 'premium-badge-indigo',
+        gray: 'premium-badge-gray',
+        orange: 'premium-badge-orange',
+      },
+      allowHover: {
+        true: 'allowHover',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      size: 'm',
+      color: 'blue',
+      allowHover: false,
+    },
+  },
+)
+
+type PremiumBadgeProps = {
+  size?: 's' | 'm'
+  color?: 'blue' | 'indigo' | 'gray' | 'orange'
+  allowHover?: boolean
+  styleCss?: CSSProperties
+  children?: ReactNode
+} & React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof PremiumBadgeVariants>
+
+const PremiumBadge: React.FC<PremiumBadgeProps> = ({
+  className,
+  size,
+  color,
+  allowHover,
+  styleCss,
+  children,
+  ...props
+}) => {
+  return (
+    <div
+      className={classNames(
+        PremiumBadgeVariants({ size, color, allowHover, className }),
+        'relative text-nowrap',
+      )}
+      style={styleCss}
+      {...props}
+    >
+      {children}
+      <Highlight
+        className={classNames(
+          'absolute right-1/2 top-0 translate-x-[20%] opacity-50 transition-all duration-100 ease-out hover:translate-x-[30%] hover:opacity-80',
+          size === 's' ? 'h-[18px] w-12' : 'h-6 w-12',
+        )}
+      />
+    </div>
+  )
+}
+PremiumBadge.displayName = 'PremiumBadge'
+
+export default PremiumBadge
+export { PremiumBadge, PremiumBadgeVariants }