dify

dify/web/app/components/base/grid-mask/index.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import GridMask from '.'
+
+const meta = {
+  title: 'Base/Layout/GridMask',
+  component: GridMask,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Displays a soft grid overlay with gradient mask, useful for framing hero sections or marketing callouts.',
+      },
+    },
+  },
+  args: {
+    wrapperClassName: 'rounded-2xl p-10',
+    canvasClassName: '',
+    gradientClassName: '',
+    children: (
+      <div className="relative z-10 flex flex-col gap-3 text-left text-white">
+        <span className="text-xs uppercase tracking-[0.16em] text-white/70">Grid Mask Demo</span>
+        <span className="text-2xl font-semibold leading-tight">Beautiful backgrounds for feature highlights</span>
+        <p className="max-w-md text-sm text-white/80">
+          Place any content inside the mask. On dark backgrounds the grid and soft gradient add depth without distracting from the main message.
+        </p>
+      </div>
+    ),
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof GridMask>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+
+export const CustomBackground: Story = {
+  args: {
+    wrapperClassName: 'rounded-3xl p-10 bg-[#0A0A1A]',
+    gradientClassName: 'bg-gradient-to-r from-[#0A0A1A]/90 via-[#101030]/60 to-[#05050A]/90',
+    children: (
+      <div className="flex flex-col gap-2 text-white">
+        <span className="text-sm font-medium text-white/80">Custom gradient</span>
+        <span className="text-3xl font-semibold leading-tight">Use your own colors</span>
+        <p className="max-w-md text-sm text-white/70">
+          Override gradient and canvas classes to match brand palettes while keeping the grid texture.
+        </p>
+      </div>
+    ),
+  },
+}