33 lines
1.3 KiB
TypeScript
33 lines
1.3 KiB
TypeScript
|
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 = {}
|