dify

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,
+  },
+}