From 30507e60049036a47d4a20d6736452dc8e5fa4e3 Mon Sep 17 00:00:00 2001
From: ynguyen2k2 <73071640+ynguyen2k2@users.noreply.github.com>
Date: Tue, 21 May 2024 06:27:51 +0700
Subject: [PATCH] feat:#52 add tabs story (#73)

---
 packages/ui/src/stories/tabs.stories.tsx | 85 ++++++++++++++++++++++++
 packages/ui/src/styles/tailwind.css      | 34 ++++++++++
 2 files changed, 119 insertions(+)
 create mode 100644 packages/ui/src/stories/tabs.stories.tsx

diff --git a/packages/ui/src/stories/tabs.stories.tsx b/packages/ui/src/stories/tabs.stories.tsx
new file mode 100644
index 0000000..3da65f6
--- /dev/null
+++ b/packages/ui/src/stories/tabs.stories.tsx
@@ -0,0 +1,85 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../button';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../card';
+import { Input } from '../input';
+import { Label } from '../label';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../tabs';
+function TabsDemo() {
+	return (
+		<Tabs
+			defaultValue='account'
+			className='w-[400px]'
+		>
+			<TabsList className='grid w-full grid-cols-2'>
+				<TabsTrigger value='account'>Account</TabsTrigger>
+				<TabsTrigger value='password'>Password</TabsTrigger>
+			</TabsList>
+			<TabsContent value='account'>
+				<Card>
+					<CardHeader>
+						<CardTitle>Account</CardTitle>
+						<CardDescription>Make changes to your account here. Click save when you're done.</CardDescription>
+					</CardHeader>
+					<CardContent className='space-y-2'>
+						<div className='space-y-1'>
+							<Label htmlFor='name'>Name</Label>
+							<Input
+								id='name'
+								defaultValue='Pedro Duarte'
+							/>
+						</div>
+						<div className='space-y-1'>
+							<Label htmlFor='username'>Username</Label>
+							<Input
+								id='username'
+								defaultValue='@peduarte'
+							/>
+						</div>
+					</CardContent>
+					<CardFooter>
+						<Button>Save changes</Button>
+					</CardFooter>
+				</Card>
+			</TabsContent>
+			<TabsContent value='password'>
+				<Card>
+					<CardHeader>
+						<CardTitle>Password</CardTitle>
+						<CardDescription>Change your password here. After saving, you'll be logged out.</CardDescription>
+					</CardHeader>
+					<CardContent className='space-y-2'>
+						<div className='space-y-1'>
+							<Label htmlFor='current'>Current password</Label>
+							<Input
+								id='current'
+								type='password'
+							/>
+						</div>
+						<div className='space-y-1'>
+							<Label htmlFor='new'>New password</Label>
+							<Input
+								id='new'
+								type='password'
+							/>
+						</div>
+					</CardContent>
+					<CardFooter>
+						<Button>Save password</Button>
+					</CardFooter>
+				</Card>
+			</TabsContent>
+		</Tabs>
+	);
+}
+const meta = {
+	title: 'CODERUM/Tabs',
+	component: TabsDemo,
+
+	parameters: {
+		// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+		layout: 'centered',
+	},
+} satisfies Meta<typeof TabsDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const TabsExample: Story = {};
diff --git a/packages/ui/src/styles/tailwind.css b/packages/ui/src/styles/tailwind.css
index ada50f3..9ad451d 100644
--- a/packages/ui/src/styles/tailwind.css
+++ b/packages/ui/src/styles/tailwind.css
@@ -638,6 +638,10 @@ body {
   margin-bottom: 0.5rem;
 }
 
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -714,6 +718,10 @@ body {
   width: 16rem;
 }
 
+.w-80 {
+  width: 20rem;
+}
+
 .w-9 {
   width: 2.25rem;
 }
@@ -730,6 +738,10 @@ body {
   width: 360px;
 }
 
+.w-\[400px\] {
+  width: 400px;
+}
+
 .w-full {
   width: 100%;
 }
@@ -766,6 +778,10 @@ body {
   cursor: pointer;
 }
 
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -786,6 +802,10 @@ body {
   justify-content: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }
@@ -808,6 +828,12 @@ body {
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -990,6 +1016,10 @@ body {
   padding-top: 0px;
 }
 
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1087,6 +1117,10 @@ body {
   text-underline-offset: 4px;
 }
 
+.opacity-70 {
+  opacity: 0.7;
+}
+
 .shadow-\[0_2px_10px\] {
   --tw-shadow: 0 2px 10px;
   --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color);