d1a1135328
* docs: create a new UI docs project (#13233) * docs: create a new UI docs project * fix installation errors * docs: migrate UI docs content to new project (#13241) * Fix content * added examples for some components * finish adding examples * lint fix * fix build errors * delete empty files * path fixes + refactor * fix build error
38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import { Tabs, Text } from "@medusajs/ui"
|
|
import { TruckFast, CreditCard, InformationCircle } from "@medusajs/icons"
|
|
|
|
export default function TabsIcons() {
|
|
return (
|
|
<div className="w-full px-4 flex flex-col gap-4">
|
|
<Tabs defaultValue="general">
|
|
<Tabs.List>
|
|
<Tabs.Trigger value="general">
|
|
<InformationCircle className="mr-1.5 h-4 w-4" /> General
|
|
</Tabs.Trigger>
|
|
<Tabs.Trigger value="shipping">
|
|
<TruckFast className="mr-1.5 h-4 w-4" /> Shipping
|
|
</Tabs.Trigger>
|
|
<Tabs.Trigger value="payment">
|
|
<CreditCard className="mr-1.5 h-4 w-4" /> Payment
|
|
</Tabs.Trigger>
|
|
</Tabs.List>
|
|
<div className="mt-2">
|
|
<Tabs.Content value="general">
|
|
<Text size="small">This is the General tab with an icon.</Text>
|
|
</Tabs.Content>
|
|
<Tabs.Content value="shipping">
|
|
<Text size="small">This is the Shipping tab with an icon.</Text>
|
|
</Tabs.Content>
|
|
<Tabs.Content value="payment">
|
|
<Text size="small">This is the Payment tab with an icon.</Text>
|
|
</Tabs.Content>
|
|
</div>
|
|
</Tabs>
|
|
<Text size="xsmall" className="text-ui-fg-muted">
|
|
Use the left and right arrow keys to navigate between the tabs. You must
|
|
focus on a tab first.
|
|
</Text>
|
|
</div>
|
|
)
|
|
}
|