98 lines
2.3 KiB
TypeScript
98 lines
2.3 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
|
|
import {
|
|
Card,
|
|
CardHeader,
|
|
CardTitle,
|
|
CardDescription,
|
|
CardContent,
|
|
CardFooter,
|
|
CardAction,
|
|
} from '@/components/ui/card'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
const meta = {
|
|
title: 'Layout/Card',
|
|
component: Card,
|
|
tags: ['autodocs'],
|
|
parameters: { layout: 'centered' },
|
|
} satisfies Meta<typeof Card>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {
|
|
render: () => (
|
|
<Card className="w-87.5">
|
|
<CardHeader>
|
|
<CardTitle>Card Title</CardTitle>
|
|
<CardDescription>Card description goes here.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p>Card content with some example text to demonstrate the layout.</p>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button>Action</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
),
|
|
}
|
|
|
|
export const WithAction: Story = {
|
|
render: () => (
|
|
<Card className="w-87.5">
|
|
<CardHeader>
|
|
<CardTitle>Notifications</CardTitle>
|
|
<CardDescription>You have 3 unread messages.</CardDescription>
|
|
<CardAction>
|
|
<Button variant="outline" size="sm">Mark all read</Button>
|
|
</CardAction>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p>Here are your latest notifications.</p>
|
|
</CardContent>
|
|
</Card>
|
|
),
|
|
}
|
|
|
|
export const Simple: Story = {
|
|
render: () => (
|
|
<Card className="w-87.5">
|
|
<CardHeader>
|
|
<CardTitle>Simple Card</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p>A card with just a title and content.</p>
|
|
</CardContent>
|
|
</Card>
|
|
),
|
|
}
|
|
|
|
export const WithFooter: Story = {
|
|
render: () => (
|
|
<Card className="w-87.5">
|
|
<CardHeader>
|
|
<CardTitle>Create project</CardTitle>
|
|
<CardDescription>Deploy your new project in one click.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p>Configure your project settings below.</p>
|
|
</CardContent>
|
|
<CardFooter className="flex justify-between">
|
|
<Button variant="outline">Cancel</Button>
|
|
<Button>Deploy</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
),
|
|
}
|
|
|
|
export const ContentOnly: Story = {
|
|
render: () => (
|
|
<Card className="w-87.5">
|
|
<CardContent>
|
|
<p>A minimal card with only content, no header or footer.</p>
|
|
</CardContent>
|
|
</Card>
|
|
),
|
|
}
|