66 lines
1.3 KiB
JavaScript
66 lines
1.3 KiB
JavaScript
|
import { Panel } from './Panel'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
title: 'SkynetLibrary/Panel',
|
||
|
|
component: Panel,
|
||
|
|
decorators: [
|
||
|
|
(Story) => (
|
||
|
|
<div className="inset-0 bg-palette-100 p-6">
|
||
|
|
<div style={{ maxWidth: 800 }}>
|
||
|
|
<Story />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
],
|
||
|
|
}
|
||
|
|
|
||
|
|
const SampleContent = () => (
|
||
|
|
<>
|
||
|
|
<p>This is the first paragraph</p>
|
||
|
|
<p>This is the second paragraph</p>
|
||
|
|
<p>This is the third paragraph</p>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
|
||
|
|
const Template = (args) => (
|
||
|
|
<Panel {...args}>
|
||
|
|
<SampleContent />
|
||
|
|
</Panel>
|
||
|
|
)
|
||
|
|
|
||
|
|
export const RawPanel = Template.bind({})
|
||
|
|
RawPanel.args = {}
|
||
|
|
|
||
|
|
export const TitledPanel = Template.bind({})
|
||
|
|
TitledPanel.args = {
|
||
|
|
title: 'Latest activity',
|
||
|
|
}
|
||
|
|
|
||
|
|
export const InlinePanelsExample = () => (
|
||
|
|
<div className="grid gap-4 grid-flow-col auto-cols-fr">
|
||
|
|
<Panel title="Upload" className="w-50">
|
||
|
|
<SampleContent />
|
||
|
|
</Panel>
|
||
|
|
<Panel title="Usage" className="w-50">
|
||
|
|
<SampleContent />
|
||
|
|
</Panel>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
|
||
|
|
export const FullWidthPanelsExample = () => (
|
||
|
|
<>
|
||
|
|
<Panel title="Latest activity">
|
||
|
|
<SampleContent />
|
||
|
|
</Panel>
|
||
|
|
<Panel title="Payment history">
|
||
|
|
<SampleContent />
|
||
|
|
</Panel>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
|
||
|
|
export const CustomPanelBackground = Template.bind({})
|
||
|
|
CustomPanelBackground.args = {
|
||
|
|
className: 'bg-red-500',
|
||
|
|
title: 'Background below should be red',
|
||
|
|
}
|