From 2b9e18bef9ab7ab3429c71488d1a8183ea288b1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C5=A9=20An?= <63535363+um1chc5@users.noreply.github.com>
Date: Wed, 8 May 2024 06:58:15 +0700
Subject: [PATCH] Create card storybook (#46)

Co-authored-by: anvuvuong <anvuvuong05@gmail.com>
---
 packages/ui/src/stories/card.stories.tsx | 56 ++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 packages/ui/src/stories/card.stories.tsx

diff --git a/packages/ui/src/stories/card.stories.tsx b/packages/ui/src/stories/card.stories.tsx
new file mode 100644
index 0000000..b68600f
--- /dev/null
+++ b/packages/ui/src/stories/card.stories.tsx
@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../card';
+import { Label } from '../label';
+import { Input } from '../input';
+import { Button } from '../button';
+
+function CardDemo() {
+	return (
+		<Card className='w-[360px]'>
+			<CardHeader className='text-center'>
+				<CardTitle className='text-3xl font-bold'>Login</CardTitle>
+				<CardDescription>Enter credentials to access your account.</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<form>
+					<div className='mb-2 flex flex-col gap-2'>
+						<Label>Username or email</Label>
+						<Input className='rounded shadow-sm focus-visible:ring-0 focus-visible:ring-offset-0' />
+					</div>
+					<div className='mb-2 flex flex-col gap-2'>
+						<Label>Password</Label>
+						<Input className='rounded shadow-sm focus-visible:ring-0 focus-visible:ring-offset-0' />
+					</div>
+					<a
+						href='/'
+						className='text-muted-foreground text-sm'
+					>
+						Forgot password?
+					</a>
+				</form>
+			</CardContent>
+			<CardFooter className='flex-col gap-2'>
+				<Button className='w-full'>Submit</Button>
+				<Button
+					className='w-full'
+					variant='secondary'
+				>
+					Sign Up
+				</Button>
+			</CardFooter>
+		</Card>
+	);
+}
+
+const meta = {
+	title: 'Coderum/Card',
+	component: CardDemo,
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies Meta<typeof CardDemo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const CardExample: Story = {};