Skip to content

Commit 5fd256e

Browse files
samejr0ski
samejr
authored and
0ski
committed
Update storybook tabs
1 parent 3c45244 commit 5fd256e

1 file changed

Lines changed: 61 additions & 27 deletions

File tree

  • apps/webapp/app/routes/storybook.tabs

‎apps/webapp/app/routes/storybook.tabs/route.tsx‎

Lines changed: 61 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,11 @@ import { Tabs } from "~/components/primitives/Tabs";
1111

1212
export default function Story() {
1313
return (
14-
<div className="flex items-start justify-center gap-20 pt-20">
15-
<div className="flex flex-col gap-4">
14+
<div className="flex items-start justify-center gap-20 px-16 pt-20">
15+
<div className="flex w-full max-w-2xl flex-col gap-4">
1616
<div className="flex h-fit flex-col">
1717
<div className="flex flex-col gap-2">
18-
<Header1 spacing className="font-mono">
19-
{"<Tabs/>"} (updates the URL)
20-
</Header1>
18+
<Header1 spacing>{"<Tabs/>"} (updates the URL)</Header1>
2119
<Paragraph>Variant="underline"</Paragraph>
2220
</div>
2321
<Tabs
@@ -58,10 +56,10 @@ export default function Story() {
5856
<Outlet />
5957
</div>
6058
</div>
61-
<div className="flex flex-col gap-4">
59+
<div className="flex w-full max-w-2xl flex-col gap-4">
6260
<div className="flex flex-col gap-4">
6361
<div className="flex flex-col gap-2">
64-
<Header1 className="font-mono">{"<ClientTabs/>"}</Header1>
62+
<Header1 spacing>{"<ClientTabs/>"}</Header1>
6563
<Paragraph>Variant="underline"</Paragraph>
6664
</div>
6765
<ClientTabs defaultValue="tab-1">
@@ -72,31 +70,43 @@ export default function Story() {
7270
variant="underline"
7371
layoutId="client-tabs-underline"
7472
>
75-
Tab 1
73+
First tab
7674
</ClientTabsTrigger>
7775
<ClientTabsTrigger
7876
value={"tab-2"}
7977
variant="underline"
8078
layoutId="client-tabs-underline"
8179
>
82-
Tab 2
80+
Second tab
8381
</ClientTabsTrigger>
8482
<ClientTabsTrigger
8583
value={"tab-3"}
8684
variant="underline"
8785
layoutId="client-tabs-underline"
8886
>
89-
Tab 3
87+
Third tab
9088
</ClientTabsTrigger>
9189
</ClientTabsList>
9290
</div>
93-
<ClientTabsContent value={"tab-1"}>Tab 1</ClientTabsContent>
94-
<ClientTabsContent value={"tab-2"}>Tab 2</ClientTabsContent>
95-
<ClientTabsContent value={"tab-3"}>Tab 3</ClientTabsContent>
91+
<ClientTabsContent value={"tab-1"}>
92+
<div className="flex items-center justify-center rounded bg-charcoal-700/50 py-8">
93+
<h1 className="text-5xl">1</h1>
94+
</div>
95+
</ClientTabsContent>
96+
<ClientTabsContent value={"tab-2"}>
97+
<div className="flex items-center justify-center rounded bg-charcoal-700/50 py-8">
98+
<h1 className="text-5xl">2</h1>
99+
</div>
100+
</ClientTabsContent>
101+
<ClientTabsContent value={"tab-3"}>
102+
<div className="flex items-center justify-center rounded bg-charcoal-700/50 py-8">
103+
<h1 className="text-5xl">3</h1>
104+
</div>
105+
</ClientTabsContent>
96106
</ClientTabs>
97107
</div>
98108
<div>
99-
<Paragraph>Variant="segmented"</Paragraph>
109+
<Paragraph spacing>Variant="segmented"</Paragraph>
100110
<ClientTabs defaultValue="tab-1">
101111
<div className="flex items-center gap-4">
102112
<ClientTabsList variant="segmented">
@@ -105,48 +115,72 @@ export default function Story() {
105115
variant="segmented"
106116
layoutId="client-tabs-segmented"
107117
>
108-
Tab 1
118+
First tab
109119
</ClientTabsTrigger>
110120
<ClientTabsTrigger
111121
value={"tab-2"}
112122
variant="segmented"
113123
layoutId="client-tabs-segmented"
114124
>
115-
Tab 2
125+
Second tab
116126
</ClientTabsTrigger>
117127
<ClientTabsTrigger
118128
value={"tab-3"}
119129
variant="segmented"
120130
layoutId="client-tabs-segmented"
121131
>
122-
Tab 3
132+
Third tab
123133
</ClientTabsTrigger>
124134
</ClientTabsList>
125135
</div>
126-
<ClientTabsContent value={"tab-1"}>Tab 1</ClientTabsContent>
127-
<ClientTabsContent value={"tab-2"}>Tab 2</ClientTabsContent>
128-
<ClientTabsContent value={"tab-3"}>Tab 3</ClientTabsContent>
136+
<ClientTabsContent value={"tab-1"}>
137+
<div className="flex items-center justify-center rounded bg-charcoal-700/50 py-8">
138+
<h1 className="text-5xl">1</h1>
139+
</div>
140+
</ClientTabsContent>
141+
<ClientTabsContent value={"tab-2"}>
142+
<div className="flex items-center justify-center rounded bg-charcoal-700/50 py-8">
143+
<h1 className="text-5xl">2</h1>
144+
</div>
145+
</ClientTabsContent>
146+
<ClientTabsContent value={"tab-3"}>
147+
<div className="flex items-center justify-center rounded bg-charcoal-700/50 py-8">
148+
<h1 className="text-5xl">3</h1>
149+
</div>
150+
</ClientTabsContent>
129151
</ClientTabs>
130152
</div>
131153
<div>
132-
<Paragraph>Variant="pipe-divider"</Paragraph>
154+
<Paragraph spacing>Variant="pipe-divider"</Paragraph>
133155
<ClientTabs defaultValue="tab-1">
134156
<div className="flex items-center gap-4">
135157
<ClientTabsList variant="pipe-divider">
136158
<ClientTabsTrigger value={"tab-1"} variant="pipe-divider">
137-
Tab 1
159+
First tab
138160
</ClientTabsTrigger>
139161
<ClientTabsTrigger value={"tab-2"} variant="pipe-divider">
140-
Tab 2
162+
Second tab
141163
</ClientTabsTrigger>
142164
<ClientTabsTrigger value={"tab-3"} variant="pipe-divider">
143-
Tab 3
165+
Third tab
144166
</ClientTabsTrigger>
145167
</ClientTabsList>
146168
</div>
147-
<ClientTabsContent value={"tab-1"}>Tab 1</ClientTabsContent>
148-
<ClientTabsContent value={"tab-2"}>Tab 2</ClientTabsContent>
149-
<ClientTabsContent value={"tab-3"}>Tab 3</ClientTabsContent>
169+
<ClientTabsContent value={"tab-1"}>
170+
<div className="flex items-center justify-center rounded bg-charcoal-700/50 py-8">
171+
<h1 className="text-5xl">1</h1>
172+
</div>
173+
</ClientTabsContent>
174+
<ClientTabsContent value={"tab-2"}>
175+
<div className="flex items-center justify-center rounded bg-charcoal-700/50 py-8">
176+
<h1 className="text-5xl">2</h1>
177+
</div>
178+
</ClientTabsContent>
179+
<ClientTabsContent value={"tab-3"}>
180+
<div className="flex items-center justify-center rounded bg-charcoal-700/50 py-8">
181+
<h1 className="text-5xl">3</h1>
182+
</div>
183+
</ClientTabsContent>
150184
</ClientTabs>
151185
</div>
152186
</div>

0 commit comments

Comments
 (0)