dify

dify/web/app/components/base/file-uploader/file-image-render.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import FileImageRender from './file-image-render'
+
+const SAMPLE_IMAGE = 'data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'320\' height=\'180\'><defs><linearGradient id=\'grad\' x1=\'0%\' y1=\'0%\' x2=\'100%\' y2=\'100%\'><stop offset=\'0%\' stop-color=\'#FEE2FF\'/><stop offset=\'100%\' stop-color=\'#E0EAFF\'/></linearGradient></defs><rect width=\'320\' height=\'180\' rx=\'18\' fill=\'url(#grad)\'/><text x=\'50%\' y=\'50%\' dominant-baseline=\'middle\' text-anchor=\'middle\' font-family=\'sans-serif\' font-size=\'24\' fill=\'#1F2937\'>Preview</text></svg>'
+
+const meta = {
+  title: 'Base/General/FileImageRender',
+  component: FileImageRender,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Renders image previews inside a bordered frame. Often used in upload galleries and logs.',
+      },
+      source: {
+        language: 'tsx',
+        code: `
+<FileImageRender imageUrl="https://example.com/preview.png" className="h-32 w-52" />
+        `.trim(),
+      },
+    },
+  },
+  tags: ['autodocs'],
+  args: {
+    imageUrl: SAMPLE_IMAGE,
+    className: 'h-32 w-52',
+  },
+} satisfies Meta<typeof FileImageRender>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}