33 lines
974 B
TypeScript
33 lines
974 B
TypeScript
import { Button } from '@mantine/core'
|
|
import { Plus } from 'lucide-react'
|
|
import type { Story, StoryMeta } from './csf.types'
|
|
import { PageHeader } from './PageHeader'
|
|
|
|
const meta: StoryMeta = {
|
|
title: 'PageHeader',
|
|
component: PageHeader,
|
|
tags: ['layout'],
|
|
argTypes: {
|
|
title: { description: 'Page title', control: 'text' },
|
|
description: { description: 'Optional sub-text', control: 'text' },
|
|
actions: { description: 'Right-aligned actions slot', control: false },
|
|
},
|
|
}
|
|
export default meta
|
|
|
|
function DefaultStory() {
|
|
return <PageHeader title="Tasks" description="Everything on your plate, in one place." />
|
|
}
|
|
export const Default: Story = { render: DefaultStory }
|
|
|
|
function WithActionStory() {
|
|
return (
|
|
<PageHeader
|
|
title="Tasks"
|
|
description="Everything on your plate, in one place."
|
|
actions={<Button leftSection={<Plus size={16} />}>New task</Button>}
|
|
/>
|
|
)
|
|
}
|
|
export const WithAction: Story = { render: WithActionStory }
|