feat: add tabs docs and examples

adrian-ub · Aug 20, 2024 · 95aa803 · 95aa803
1 parent 91e231f
commit 95aa803
Show file tree

Hide file tree

Showing 3 changed files with 230 additions and 0 deletions.
diff --git a/apps/www/src/content/docs/docs/components/tabs.mdx b/apps/www/src/content/docs/docs/components/tabs.mdx
@@ -0,0 +1,54 @@
+---
+title: Tabs
+description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
+links:
+  doc: https://www.radix-ng.com/?path=/story/primitives-tabs--default
+---
+
+import { Tabs, TabItem } from "@astrojs/starlight/components";
+import { Steps } from "@astrojs/starlight/components";
+
+<ComponentPreview name="tabs-demo" />
+
+## Installation
+
+<Tabs>
+    <TabItem label="CLI">
+        ```bash frame="code"
+        npx shadcn-ng@latest add tabs
+        ```
+    </TabItem>
+
+    <TabItem label="Manual">
+        <Steps>
+            1. Copy and paste the following code into your project.
+                <ComponentSource name="tabs" />
+
+            2. Update the import paths to match your project setup.
+        </Steps>
+    </TabItem>
+
+</Tabs>
+
+## Usage
+
+```ts
+import {
+    UbTabsContentDirective,
+    UbTabsDirective,
+    UbTabsListDirective,
+    UbTabsTriggerDirective
+} from '@/components/ui/tabs.directive';
+```
+
+```angular-html
+<div ubTabs defaultValue="account" class="w-[400px]">
+    <div ubTabsList>
+        <button ubTabsTrigger value="account">Account</button>
+        <button ubTabsTrigger value="password">Password</button>
+    </div>
+
+    <section ubTabsContent value="account">Make changes to your account here.</section>
+    <section ubTabsContent value="password">Change your password here.</section>
+</div>
+```
diff --git a/apps/www/src/registry/default/example/tabs-demo.ts b/apps/www/src/registry/default/example/tabs-demo.ts
@@ -0,0 +1,88 @@
+import { Component } from '@angular/core';
+
+import { UbTabsContentDirective, UbTabsDirective, UbTabsListDirective, UbTabsTriggerDirective } from '@/registry/default/ui/tabs.directive';
+import { UbCardDirective, UbCardHeaderDirective, UbCardTitleDirective, UbCardDescriptionDirective, UbCardContentDirective, UbCardFooterDirective } from '@/registry/default/ui/card.directive';
+import { UbButtonDirective } from '@/registry/default/ui/button.directive';
+import { UbLabelDirective } from '@/registry/default/ui/label.directive';
+import { UbInputDirective } from '@/registry/default/ui/input.directive';
+
+@Component({
+    standalone: true,
+    imports: [
+        UbTabsDirective,
+        UbTabsListDirective,
+        UbTabsTriggerDirective,
+        UbTabsContentDirective,
+
+        UbCardDirective,
+        UbCardHeaderDirective,
+        UbCardTitleDirective,
+        UbCardDescriptionDirective,
+        UbCardContentDirective,
+        UbCardFooterDirective,
+
+        UbButtonDirective,
+
+        UbLabelDirective,
+        UbInputDirective
+    ],
+    template: `
+    <div ubTabs defaultValue="account" class="w-[400px]">
+        <div ubTabsList class="grid w-full grid-cols-2">
+            <button ubTabsTrigger value="account">Account</button>
+            <button ubTabsTrigger value="password">Password</button>
+        </div>
+
+        <section ubTabsContent value="account">
+            <div ubCard>
+                <div ubCardHeader>
+                    <h5 ubCardTitle>Account</h5>
+                    <div ubCardDescription>Make changes to your account here. Click save when you're done.</div>
+                </div>
+
+                <div ubCardContent class="space-y-2">
+                    <div class="space-y-1">
+                        <label ubLabel htmlFor="name">Name</label>
+                        <input ubInput type="text" id="name" value="Pedro Duarte" />
+                    </div>
+                    <div class="space-y-1">
+                        <label ubLabel htmlFor="username">Username</label>
+                        <input ubInput type="text" id="username" value="@peduarte" />
+                    </div>
+                </div>
+
+                <div ubCardFooter>
+                    <button ubButton>Save changes</button>
+                </div>
+            </div>
+        </section>
+
+        <section ubTabsContent value="password">
+            <div ubCard>
+                <div ubCardHeader>
+                    <h5 ubCardTitle>Password</h5>
+                    <div ubCardDescription>Change your password here. After saving, you'll be logged out.</div>
+                </div>
+
+                <div ubCardContent class="space-y-2">
+                    <div class="space-y-1">
+                        <label ubLabel htmlFor="current">Current password</label>
+                        <input ubInput type="password" id="current" />
+                    </div>
+                    <div class="space-y-1">
+                        <label ubLabel htmlFor="new">New password</label>
+                        <input ubInput type="password" id="new" />
+                    </div>
+                </div>
+
+                <div ubCardFooter>
+                    <button ubButton>Save changes</button>
+                </div>
+            </div>
+        </section>
+    </div>
+    `
+})
+export class TabsDemoDefaultComponent { }
+
+export default TabsDemoDefaultComponent;
diff --git a/apps/www/src/registry/new-york/example/tabs-demo.ts b/apps/www/src/registry/new-york/example/tabs-demo.ts
@@ -0,0 +1,88 @@
+import { Component } from '@angular/core';
+
+import { UbTabsContentDirective, UbTabsDirective, UbTabsListDirective, UbTabsTriggerDirective } from '@/registry/new-york/ui/tabs.directive';
+import { UbCardDirective, UbCardHeaderDirective, UbCardTitleDirective, UbCardDescriptionDirective, UbCardContentDirective, UbCardFooterDirective } from '@/registry/new-york/ui/card.directive';
+import { UbButtonDirective } from '@/registry/new-york/ui/button.directive';
+import { UbLabelDirective } from '@/registry/new-york/ui/label.directive';
+import { UbInputDirective } from '@/registry/new-york/ui/input.directive';
+
+@Component({
+    standalone: true,
+    imports: [
+        UbTabsDirective,
+        UbTabsListDirective,
+        UbTabsTriggerDirective,
+        UbTabsContentDirective,
+
+        UbCardDirective,
+        UbCardHeaderDirective,
+        UbCardTitleDirective,
+        UbCardDescriptionDirective,
+        UbCardContentDirective,
+        UbCardFooterDirective,
+
+        UbButtonDirective,
+
+        UbLabelDirective,
+        UbInputDirective
+    ],
+    template: `
+    <div ubTabs defaultValue="account" class="w-[400px]">
+        <div ubTabsList class="grid w-full grid-cols-2">
+            <button ubTabsTrigger value="account">Account</button>
+            <button ubTabsTrigger value="password">Password</button>
+        </div>
+
+        <section ubTabsContent value="account">
+            <div ubCard>
+                <div ubCardHeader>
+                    <h5 ubCardTitle>Account</h5>
+                    <div ubCardDescription>Make changes to your account here. Click save when you're done.</div>
+                </div>
+
+                <div ubCardContent class="space-y-2">
+                    <div class="space-y-1">
+                        <label ubLabel htmlFor="name">Name</label>
+                        <input ubInput type="text" id="name" value="Pedro Duarte" />
+                    </div>
+                    <div class="space-y-1">
+                        <label ubLabel htmlFor="username">Username</label>
+                        <input ubInput type="text" id="username" value="@peduarte" />
+                    </div>
+                </div>
+
+                <div ubCardFooter>
+                    <button ubButton>Save changes</button>
+                </div>
+            </div>
+        </section>
+
+        <section ubTabsContent value="password">
+            <div ubCard>
+                <div ubCardHeader>
+                    <h5 ubCardTitle>Password</h5>
+                    <div ubCardDescription>Change your password here. After saving, you'll be logged out.</div>
+                </div>
+
+                <div ubCardContent class="space-y-2">
+                    <div class="space-y-1">
+                        <label ubLabel htmlFor="current">Current password</label>
+                        <input ubInput type="password" id="current" />
+                    </div>
+                    <div class="space-y-1">
+                        <label ubLabel htmlFor="new">New password</label>
+                        <input ubInput type="password" id="new" />
+                    </div>
+                </div>
+
+                <div ubCardFooter>
+                    <button ubButton>Save changes</button>
+                </div>
+            </div>
+        </section>
+    </div>
+    `
+})
+export class TabsDemoDefaultComponent { }
+
+export default TabsDemoDefaultComponent;