358 lines
12 KiB
TypeScript
358 lines
12 KiB
TypeScript
import {
|
|
Example,
|
|
ExampleWrapper,
|
|
} from "@/registry/bases/aria/components/example"
|
|
import { Button } from "@/registry/bases/aria/ui/button"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/registry/bases/aria/ui/dropdown-menu"
|
|
import { Input } from "@/registry/bases/aria/ui/input"
|
|
import {
|
|
Tabs,
|
|
TabsContent,
|
|
TabsList,
|
|
TabsTrigger,
|
|
} from "@/registry/bases/aria/ui/tabs"
|
|
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
|
|
|
|
export default function TabsExample() {
|
|
return (
|
|
<ExampleWrapper>
|
|
<TabsBasic />
|
|
<TabsLine />
|
|
<TabsVariantsComparison />
|
|
<TabsDisabled />
|
|
<TabsWithIcons />
|
|
<TabsIconOnly />
|
|
<TabsMultiple />
|
|
<TabsWithContent />
|
|
<TabsLineWithContent />
|
|
<TabsLineDisabled />
|
|
<TabsWithDropdown />
|
|
<TabsVertical />
|
|
<TabsWithInputAndButton />
|
|
</ExampleWrapper>
|
|
)
|
|
}
|
|
|
|
function TabsBasic() {
|
|
return (
|
|
<Example title="Basic">
|
|
<Tabs defaultSelectedKey="home">
|
|
<TabsList>
|
|
<TabsTrigger id="home">Home</TabsTrigger>
|
|
<TabsTrigger id="settings">Settings</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function TabsLine() {
|
|
return (
|
|
<Example title="Line">
|
|
<Tabs defaultSelectedKey="overview">
|
|
<TabsList variant="line">
|
|
<TabsTrigger id="overview">Overview</TabsTrigger>
|
|
<TabsTrigger id="analytics">Analytics</TabsTrigger>
|
|
<TabsTrigger id="reports">Reports</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function TabsVariantsComparison() {
|
|
return (
|
|
<Example title="Variants Alignment">
|
|
<div className="flex gap-4">
|
|
<Tabs defaultSelectedKey="overview">
|
|
<TabsList>
|
|
<TabsTrigger id="overview">Overview</TabsTrigger>
|
|
<TabsTrigger id="analytics">Analytics</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
<Tabs defaultSelectedKey="overview">
|
|
<TabsList variant="line">
|
|
<TabsTrigger id="overview">Overview</TabsTrigger>
|
|
<TabsTrigger id="analytics">Analytics</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function TabsDisabled() {
|
|
return (
|
|
<Example title="Disabled">
|
|
<Tabs defaultSelectedKey="home">
|
|
<TabsList>
|
|
<TabsTrigger id="home">Home</TabsTrigger>
|
|
<TabsTrigger id="settings" isDisabled>
|
|
Disabled
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function TabsWithIcons() {
|
|
return (
|
|
<Example title="With Icons">
|
|
<Tabs defaultSelectedKey="preview">
|
|
<TabsList>
|
|
<TabsTrigger id="preview">
|
|
<IconPlaceholder
|
|
lucide="AppWindowIcon"
|
|
tabler="IconAppWindow"
|
|
hugeicons="CursorInWindowIcon"
|
|
phosphor="AppWindowIcon"
|
|
remixicon="RiWindowLine"
|
|
/>
|
|
Preview
|
|
</TabsTrigger>
|
|
<TabsTrigger id="code">
|
|
<IconPlaceholder
|
|
lucide="CodeIcon"
|
|
tabler="IconCode"
|
|
hugeicons="CodeIcon"
|
|
phosphor="CodeIcon"
|
|
remixicon="RiCodeLine"
|
|
/>
|
|
Code
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function TabsIconOnly() {
|
|
return (
|
|
<Example title="Icon Only">
|
|
<Tabs defaultSelectedKey="home">
|
|
<TabsList>
|
|
<TabsTrigger id="home">
|
|
<IconPlaceholder
|
|
lucide="HomeIcon"
|
|
tabler="IconHome"
|
|
hugeicons="HomeIcon"
|
|
phosphor="HouseIcon"
|
|
remixicon="RiHomeLine"
|
|
/>
|
|
</TabsTrigger>
|
|
<TabsTrigger id="search">
|
|
<IconPlaceholder
|
|
lucide="SearchIcon"
|
|
tabler="IconSearch"
|
|
hugeicons="SearchIcon"
|
|
phosphor="MagnifyingGlassIcon"
|
|
remixicon="RiSearchLine"
|
|
/>
|
|
</TabsTrigger>
|
|
<TabsTrigger id="settings">
|
|
<IconPlaceholder
|
|
lucide="SettingsIcon"
|
|
tabler="IconSettings"
|
|
hugeicons="SettingsIcon"
|
|
phosphor="GearIcon"
|
|
remixicon="RiSettingsLine"
|
|
/>
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function TabsMultiple() {
|
|
return (
|
|
<Example title="Multiple">
|
|
<Tabs defaultSelectedKey="overview">
|
|
<TabsList>
|
|
<TabsTrigger id="overview">Overview</TabsTrigger>
|
|
<TabsTrigger id="analytics">Analytics</TabsTrigger>
|
|
<TabsTrigger id="reports">Reports</TabsTrigger>
|
|
<TabsTrigger id="settings">Settings</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function TabsWithContent() {
|
|
return (
|
|
<Example title="With Content">
|
|
<Tabs defaultSelectedKey="account">
|
|
<TabsList>
|
|
<TabsTrigger id="account">Account</TabsTrigger>
|
|
<TabsTrigger id="password">Password</TabsTrigger>
|
|
<TabsTrigger id="notifications">Notifications</TabsTrigger>
|
|
</TabsList>
|
|
<div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-rhea:rounded-xl style-rhea:p-6">
|
|
<TabsContent id="account">
|
|
Manage your account preferences and profile information.
|
|
</TabsContent>
|
|
<TabsContent id="password">
|
|
Update your password to keep your account secure.
|
|
</TabsContent>
|
|
<TabsContent id="notifications">
|
|
Configure how you receive notifications and alerts.
|
|
</TabsContent>
|
|
</div>
|
|
</Tabs>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function TabsLineWithContent() {
|
|
return (
|
|
<Example title="Line With Content">
|
|
<Tabs defaultSelectedKey="account">
|
|
<TabsList variant="line">
|
|
<TabsTrigger id="account">Account</TabsTrigger>
|
|
<TabsTrigger id="password">Password</TabsTrigger>
|
|
<TabsTrigger id="notifications">Notifications</TabsTrigger>
|
|
</TabsList>
|
|
<div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-rhea:rounded-xl style-rhea:p-6">
|
|
<TabsContent id="account">
|
|
Manage your account preferences and profile information.
|
|
</TabsContent>
|
|
<TabsContent id="password">
|
|
Update your password to keep your account secure.
|
|
</TabsContent>
|
|
<TabsContent id="notifications">
|
|
Configure how you receive notifications and alerts.
|
|
</TabsContent>
|
|
</div>
|
|
</Tabs>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function TabsLineDisabled() {
|
|
return (
|
|
<Example title="Line Disabled">
|
|
<Tabs defaultSelectedKey="overview">
|
|
<TabsList variant="line">
|
|
<TabsTrigger id="overview">Overview</TabsTrigger>
|
|
<TabsTrigger id="analytics">Analytics</TabsTrigger>
|
|
<TabsTrigger id="reports" isDisabled>
|
|
Reports
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function TabsWithDropdown() {
|
|
return (
|
|
<Example title="With Dropdown">
|
|
<Tabs defaultSelectedKey="overview">
|
|
<div className="flex items-center justify-between">
|
|
<TabsList>
|
|
<TabsTrigger id="overview">Overview</TabsTrigger>
|
|
<TabsTrigger id="analytics">Analytics</TabsTrigger>
|
|
<TabsTrigger id="reports">Reports</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<DropdownMenuTrigger>
|
|
<Button variant="ghost" size="icon" className="size-8">
|
|
<IconPlaceholder
|
|
lucide="MoreHorizontalIcon"
|
|
tabler="IconDots"
|
|
hugeicons="MoreHorizontalCircle01Icon"
|
|
phosphor="DotsThreeOutlineIcon"
|
|
remixicon="RiMoreLine"
|
|
/>
|
|
<span className="sr-only">More options</span>
|
|
</Button>
|
|
<DropdownMenu placement="bottom end">
|
|
<DropdownMenuItem>Settings</DropdownMenuItem>
|
|
<DropdownMenuItem>Export</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>Archive</DropdownMenuItem>
|
|
</DropdownMenu>
|
|
</DropdownMenuTrigger>
|
|
</div>
|
|
|
|
<div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-rhea:rounded-xl style-rhea:p-6">
|
|
<TabsContent id="overview">
|
|
View your dashboard metrics and key performance indicators.
|
|
</TabsContent>
|
|
<TabsContent id="analytics">
|
|
Detailed analytics and insights about your data.
|
|
</TabsContent>
|
|
<TabsContent id="reports">
|
|
Generate and view custom reports.
|
|
</TabsContent>
|
|
</div>
|
|
</Tabs>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function TabsVertical() {
|
|
return (
|
|
<Example title="Vertical">
|
|
<Tabs defaultSelectedKey="account" orientation="vertical">
|
|
<TabsList>
|
|
<TabsTrigger id="account">Account</TabsTrigger>
|
|
<TabsTrigger id="password">Password</TabsTrigger>
|
|
<TabsTrigger id="notifications">Notifications</TabsTrigger>
|
|
</TabsList>
|
|
<div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-rhea:rounded-xl style-rhea:p-6">
|
|
<TabsContent id="account">
|
|
Manage your account preferences and profile information.
|
|
</TabsContent>
|
|
<TabsContent id="password">
|
|
Update your password to keep your account secure. Use a strong
|
|
password with a mix of letters, numbers, and symbols.
|
|
</TabsContent>
|
|
<TabsContent id="notifications">
|
|
Configure how you receive notifications and alerts. Choose which
|
|
types of notifications you want to receive and how you want to
|
|
receive them.
|
|
</TabsContent>
|
|
</div>
|
|
</Tabs>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function TabsWithInputAndButton() {
|
|
return (
|
|
<Example title="With Input and Button" containerClassName="col-span-full">
|
|
<Tabs defaultSelectedKey="overview" className="mx-auto w-full max-w-lg">
|
|
<div className="flex items-center gap-4">
|
|
<TabsList>
|
|
<TabsTrigger id="overview">Overview</TabsTrigger>
|
|
<TabsTrigger id="analytics">Analytics</TabsTrigger>
|
|
</TabsList>
|
|
<div className="ml-auto flex items-center gap-2">
|
|
<Input placeholder="Search..." className="w-44" />
|
|
<Button>Action</Button>
|
|
</div>
|
|
</div>
|
|
<div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-rhea:rounded-xl style-rhea:p-6">
|
|
<TabsContent id="overview">
|
|
View your dashboard metrics and key performance indicators.
|
|
</TabsContent>
|
|
<TabsContent id="analytics">
|
|
Detailed analytics and insights about your data.
|
|
</TabsContent>
|
|
<TabsContent id="reports">
|
|
Generate and view custom reports.
|
|
</TabsContent>
|
|
</div>
|
|
</Tabs>
|
|
</Example>
|
|
)
|
|
}
|