Skip to content

Commit e8ab686

Browse files
samejr0ski
samejr
authored and
0ski
committed
storybook update for the new style variants
1 parent 78c7746 commit e8ab686

1 file changed

Lines changed: 147 additions & 10 deletions

File tree

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

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

Lines changed: 147 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,155 @@
11
import { Outlet } from "@remix-run/react";
2+
import {
3+
ClientTabs,
4+
ClientTabsContent,
5+
ClientTabsList,
6+
ClientTabsTrigger,
7+
} from "~/components/primitives/ClientTabs";
8+
import { Header1 } from "~/components/primitives/Headers";
9+
import { Paragraph } from "~/components/primitives/Paragraph";
210
import { Tabs } from "~/components/primitives/Tabs";
311

412
export default function Story() {
513
return (
6-
<div className="w-96 p-8">
7-
<Tabs
8-
tabs={[
9-
{ label: "My first tab", to: "1" },
10-
{ label: "Second tab", to: "2" },
11-
{ label: "Third tab", to: "3" },
12-
]}
13-
layoutId="my-tabs"
14-
/>
15-
<Outlet />
14+
<div className="flex items-start justify-center gap-20 pt-20">
15+
<div className="flex flex-col gap-4">
16+
<div className="flex h-fit flex-col">
17+
<div className="flex flex-col gap-2">
18+
<Header1 spacing className="font-mono">
19+
{"<Tabs/>"} (updates the URL)
20+
</Header1>
21+
<Paragraph>Variant="underline"</Paragraph>
22+
</div>
23+
<Tabs
24+
tabs={[
25+
{ label: "First tab", to: "1" },
26+
{ label: "Second tab", to: "2" },
27+
{ label: "Third tab", to: "3" },
28+
]}
29+
layoutId="my-tabs-1"
30+
variant="underline"
31+
/>
32+
<Outlet />
33+
</div>
34+
<div className="flex h-fit flex-col gap-2">
35+
<Paragraph>Variant="pipe-divider"</Paragraph>
36+
<Tabs
37+
tabs={[
38+
{ label: "First tab", to: "1" },
39+
{ label: "Second tab", to: "2" },
40+
{ label: "Third tab", to: "3" },
41+
]}
42+
layoutId="my-tabs-2"
43+
variant="pipe-divider"
44+
/>
45+
<Outlet />
46+
</div>
47+
<div className="flex h-fit flex-col gap-2">
48+
<Paragraph>Variant="segmented"</Paragraph>
49+
<Tabs
50+
tabs={[
51+
{ label: "First tab", to: "1" },
52+
{ label: "Second tab", to: "2" },
53+
{ label: "Third tab", to: "3" },
54+
]}
55+
layoutId="my-tabs-3"
56+
variant="segmented"
57+
/>
58+
<Outlet />
59+
</div>
60+
</div>
61+
<div className="flex flex-col gap-4">
62+
<div className="flex flex-col gap-4">
63+
<div className="flex flex-col gap-2">
64+
<Header1 className="font-mono">{"<ClientTabs/>"}</Header1>
65+
<Paragraph>Variant="underline"</Paragraph>
66+
</div>
67+
<ClientTabs defaultValue="tab-1">
68+
<div className="flex items-center gap-4">
69+
<ClientTabsList variant="underline">
70+
<ClientTabsTrigger
71+
value={"tab-1"}
72+
variant="underline"
73+
layoutId="client-tabs-underline"
74+
>
75+
Tab 1
76+
</ClientTabsTrigger>
77+
<ClientTabsTrigger
78+
value={"tab-2"}
79+
variant="underline"
80+
layoutId="client-tabs-underline"
81+
>
82+
Tab 2
83+
</ClientTabsTrigger>
84+
<ClientTabsTrigger
85+
value={"tab-3"}
86+
variant="underline"
87+
layoutId="client-tabs-underline"
88+
>
89+
Tab 3
90+
</ClientTabsTrigger>
91+
</ClientTabsList>
92+
</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>
96+
</ClientTabs>
97+
</div>
98+
<div>
99+
<Paragraph>Variant="segmented"</Paragraph>
100+
<ClientTabs defaultValue="tab-1">
101+
<div className="flex items-center gap-4">
102+
<ClientTabsList variant="segmented">
103+
<ClientTabsTrigger
104+
value={"tab-1"}
105+
variant="segmented"
106+
layoutId="client-tabs-segmented"
107+
>
108+
Tab 1
109+
</ClientTabsTrigger>
110+
<ClientTabsTrigger
111+
value={"tab-2"}
112+
variant="segmented"
113+
layoutId="client-tabs-segmented"
114+
>
115+
Tab 2
116+
</ClientTabsTrigger>
117+
<ClientTabsTrigger
118+
value={"tab-3"}
119+
variant="segmented"
120+
layoutId="client-tabs-segmented"
121+
>
122+
Tab 3
123+
</ClientTabsTrigger>
124+
</ClientTabsList>
125+
</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>
129+
</ClientTabs>
130+
</div>
131+
<div>
132+
<Paragraph>Variant="pipe-divider"</Paragraph>
133+
<ClientTabs defaultValue="tab-1">
134+
<div className="flex items-center gap-4">
135+
<ClientTabsList variant="pipe-divider">
136+
<ClientTabsTrigger value={"tab-1"} variant="pipe-divider">
137+
Tab 1
138+
</ClientTabsTrigger>
139+
<ClientTabsTrigger value={"tab-2"} variant="pipe-divider">
140+
Tab 2
141+
</ClientTabsTrigger>
142+
<ClientTabsTrigger value={"tab-3"} variant="pipe-divider">
143+
Tab 3
144+
</ClientTabsTrigger>
145+
</ClientTabsList>
146+
</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>
150+
</ClientTabs>
151+
</div>
152+
</div>
16153
</div>
17154
);
18155
}

0 commit comments

Comments
 (0)