mirror of
https://github.com/langgenius/dify.git
synced 2026-07-27 15:08:35 +08:00
57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
|
|
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 tracking-[0.16em] text-white/70 uppercase">Grid Mask Demo</span>
|
|
<span className="text-2xl/tight font-semibold">
|
|
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-linear-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/tight font-semibold">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>
|
|
),
|
|
},
|
|
}
|