wehub/triggerdotdev--trigger.dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Deployments Models Agent Notes Packages Projects Releases Wiki Activity

chore: import upstream snapshot with attribution

Browse Source
This commit is contained in:
wehub-resource-sync
2026-07-13 13:32:57 +08:00
commit cd420f9332
4811 changed files with 884702 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/webapp/app/routes/storybook.tabs/route.tsx
+188
View File
@@ -0,0 +1,188 @@
import { Outlet } from "@remix-run/react";
import {
ClientTabs,
ClientTabsContent,
ClientTabsList,
ClientTabsTrigger,
} from "~/components/primitives/ClientTabs";
import { Header1 } from "~/components/primitives/Headers";
import { Paragraph } from "~/components/primitives/Paragraph";
import { Tabs } from "~/components/primitives/Tabs";
export default function Story() {
return (
<div className="flex items-start justify-center gap-20 px-16 pt-20">
<div className="flex w-full max-w-2xl flex-col gap-4">
<div className="flex h-fit flex-col gap-2">
<div className="flex flex-col gap-2">
<Header1 spacing>{"<Tabs/>"} (updates the URL)</Header1>
<Paragraph>Variant="underline"</Paragraph>
</div>
<Tabs
tabs={[
{ label: "First tab", to: "1" },
{ label: "Second tab", to: "2" },
{ label: "Third tab", to: "3" },
]}
layoutId="my-tabs-1"
variant="underline"
/>
<Outlet />
</div>
<div className="flex h-fit flex-col gap-2">
<Paragraph>Variant="pipe-divider"</Paragraph>
<Tabs
tabs={[
{ label: "First tab", to: "1" },
{ label: "Second tab", to: "2" },
{ label: "Third tab", to: "3" },
]}
layoutId="my-tabs-2"
variant="pipe-divider"
/>
<Outlet />
</div>
<div className="flex h-fit flex-col gap-2">
<Paragraph>Variant="segmented"</Paragraph>
<Tabs
tabs={[
{ label: "First tab", to: "1" },
{ label: "Second tab", to: "2" },
{ label: "Third tab", to: "3" },
]}
layoutId="my-tabs-3"
variant="segmented"
/>
<Outlet />
</div>
</div>
<div className="flex w-full max-w-2xl flex-col gap-4">
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-2">
<Header1 spacing>{"<ClientTabs/>"}</Header1>
<Paragraph>Variant="underline"</Paragraph>
</div>
<ClientTabs defaultValue="tab-1">
<div className="flex items-center gap-4">
<ClientTabsList variant="underline">
<ClientTabsTrigger
value={"tab-1"}
variant="underline"
layoutId="client-tabs-underline"
>
First tab
</ClientTabsTrigger>
<ClientTabsTrigger
value={"tab-2"}
variant="underline"
layoutId="client-tabs-underline"
>
Second tab
</ClientTabsTrigger>
<ClientTabsTrigger
value={"tab-3"}
variant="underline"
layoutId="client-tabs-underline"
>
Third tab
</ClientTabsTrigger>
</ClientTabsList>
</div>
<ClientTabsContent value={"tab-1"}>
<div className="flex items-center justify-center rounded bg-background-raised/50 py-8">
<h1 className="text-5xl">1</h1>
</div>
</ClientTabsContent>
<ClientTabsContent value={"tab-2"}>
<div className="flex items-center justify-center rounded bg-background-raised/50 py-8">
<h1 className="text-5xl">2</h1>
</div>
</ClientTabsContent>
<ClientTabsContent value={"tab-3"}>
<div className="flex items-center justify-center rounded bg-background-raised/50 py-8">
<h1 className="text-5xl">3</h1>
</div>
</ClientTabsContent>
</ClientTabs>
</div>
<div>
<Paragraph spacing>Variant="pipe-divider"</Paragraph>
<ClientTabs defaultValue="tab-1">
<div className="flex items-center gap-4">
<ClientTabsList variant="pipe-divider">
<ClientTabsTrigger value={"tab-1"} variant="pipe-divider">
First tab
</ClientTabsTrigger>
<ClientTabsTrigger value={"tab-2"} variant="pipe-divider">
Second tab
</ClientTabsTrigger>
<ClientTabsTrigger value={"tab-3"} variant="pipe-divider">
Third tab
</ClientTabsTrigger>
</ClientTabsList>
</div>
<ClientTabsContent value={"tab-1"}>
<div className="flex items-center justify-center rounded bg-background-raised/50 py-8">
<h1 className="text-5xl">1</h1>
</div>
</ClientTabsContent>
<ClientTabsContent value={"tab-2"}>
<div className="flex items-center justify-center rounded bg-background-raised/50 py-8">
<h1 className="text-5xl">2</h1>
</div>
</ClientTabsContent>
<ClientTabsContent value={"tab-3"}>
<div className="flex items-center justify-center rounded bg-background-raised/50 py-8">
<h1 className="text-5xl">3</h1>
</div>
</ClientTabsContent>
</ClientTabs>
</div>
<div>
<Paragraph spacing>Variant="segmented"</Paragraph>
<ClientTabs defaultValue="tab-1">
<ClientTabsList variant="segmented">
<ClientTabsTrigger
value={"tab-1"}
variant="segmented"
layoutId="client-tabs-segmented"
>
First tab
</ClientTabsTrigger>
<ClientTabsTrigger
value={"tab-2"}
variant="segmented"
layoutId="client-tabs-segmented"
>
Second tab
</ClientTabsTrigger>
<ClientTabsTrigger
value={"tab-3"}
variant="segmented"
layoutId="client-tabs-segmented"
>
Third tab
</ClientTabsTrigger>
</ClientTabsList>
<ClientTabsContent value={"tab-1"}>
<div className="flex items-center justify-center rounded bg-background-raised/50 py-8">
<h1 className="text-5xl">1</h1>
</div>
</ClientTabsContent>
<ClientTabsContent value={"tab-2"}>
<div className="flex items-center justify-center rounded bg-background-raised/50 py-8">
<h1 className="text-5xl">2</h1>
</div>
</ClientTabsContent>
<ClientTabsContent value={"tab-3"}>
<div className="flex items-center justify-center rounded bg-background-raised/50 py-8">
<h1 className="text-5xl">3</h1>
</div>
</ClientTabsContent>
</ClientTabs>
</div>
</div>
</div>
);
}