feat: add breadcrumb docs

adrian-ub · Aug 3, 2024 · cea3ef5 · cea3ef5
1 parent 054354f
commit cea3ef5
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 0 deletions.
diff --git a/apps/www/src/content/docs/docs/components/breadcrumb.mdx b/apps/www/src/content/docs/docs/components/breadcrumb.mdx
@@ -0,0 +1,29 @@
+---
+title: Breadcrumb
+description: Displays the path to the current resource using a hierarchy of links.
+---
+
+import { Steps } from "@astrojs/starlight/components";
+import { Tabs, TabItem, Code } from "@astrojs/starlight/components";
+
+<ComponentPreview name="breadcrumb-demo" />
+
+## Installation
+
+<Tabs>
+  <TabItem label="CLI">
+    ```bash frame="code"
+    npx shadcn-ng@latest add breadcrumb
+    ```
+  </TabItem>
+
+  <TabItem label="Manual">
+    <Steps>
+        1. Copy and paste the following code into your project.
+            <ComponentSource name="breadcrumb" />
+
+        2. Update the import paths to match your project setup.
+    </Steps>
+
+  </TabItem>
+</Tabs>
diff --git a/apps/www/src/registry/default/example/breadcrumb-demo.ts b/apps/www/src/registry/default/example/breadcrumb-demo.ts
@@ -0,0 +1,48 @@
+import { Component } from "@angular/core";
+
+import {
+  UbBreadcrumbDirective,
+  UbBreadcrumbListDirective,
+  UbBreadcrumbItemDirective,
+  UbBreadcrumbLinkDirective,
+  UbBreadcrumbSeparatorComponent,
+  UbBreadcrumbEllipsisComponent,
+  UbBreadcrumbPageDirective,
+} from "@/registry/default/ui/breadcrumb.directive";
+
+@Component({
+  standalone: true,
+  imports: [
+    UbBreadcrumbDirective,
+    UbBreadcrumbListDirective,
+    UbBreadcrumbItemDirective,
+    UbBreadcrumbLinkDirective,
+    UbBreadcrumbSeparatorComponent,
+    UbBreadcrumbEllipsisComponent,
+    UbBreadcrumbPageDirective,
+  ],
+  template: `
+    <nav ubBreadcrumb>
+      <ol ubBreadcrumbList>
+        <li ubBreadcrumbItem>
+          <a ubBreadcrumbLink>Home</a>
+        </li>
+        <li ubBreadcrumbSeparator></li>
+        <li ubBreadcrumbItem>
+          <span ubBreadcrumbEllipsis></span>
+        </li>
+        <li ubBreadcrumbSeparator></li>
+        <li ubBreadcrumbItem>
+          <a ubBreadcrumbLink>Components</a>
+        </li>
+        <li ubBreadcrumbSeparator></li>
+        <li ubBreadcrumbItem>
+          <span ubBreadcrumbPage>Breadcrumb</span>
+        </li>
+      </ol>
+    </nav>
+  `,
+})
+export class BreadcrumbDemoComponent {}
+
+export default BreadcrumbDemoComponent;
diff --git a/apps/www/src/registry/new-york/example/breadcrumb-demo.ts b/apps/www/src/registry/new-york/example/breadcrumb-demo.ts
@@ -0,0 +1,48 @@
+import { Component } from "@angular/core";
+
+import {
+  UbBreadcrumbDirective,
+  UbBreadcrumbListDirective,
+  UbBreadcrumbItemDirective,
+  UbBreadcrumbLinkDirective,
+  UbBreadcrumbSeparatorComponent,
+  UbBreadcrumbEllipsisComponent,
+  UbBreadcrumbPageDirective,
+} from "@/registry/new-york/ui/breadcrumb.directive";
+
+@Component({
+  standalone: true,
+  imports: [
+    UbBreadcrumbDirective,
+    UbBreadcrumbListDirective,
+    UbBreadcrumbItemDirective,
+    UbBreadcrumbLinkDirective,
+    UbBreadcrumbSeparatorComponent,
+    UbBreadcrumbEllipsisComponent,
+    UbBreadcrumbPageDirective,
+  ],
+  template: `
+    <nav ubBreadcrumb>
+      <ol ubBreadcrumbList>
+        <li ubBreadcrumbItem>
+          <a ubBreadcrumbLink>Home</a>
+        </li>
+        <li ubBreadcrumbSeparator></li>
+        <li ubBreadcrumbItem>
+          <span ubBreadcrumbEllipsis></span>
+        </li>
+        <li ubBreadcrumbSeparator></li>
+        <li ubBreadcrumbItem>
+          <a ubBreadcrumbLink>Components</a>
+        </li>
+        <li ubBreadcrumbSeparator></li>
+        <li ubBreadcrumbItem>
+          <span ubBreadcrumbPage>Breadcrumb</span>
+        </li>
+      </ol>
+    </nav>
+  `,
+})
+export class BreadcrumbDemoComponent {}
+
+export default BreadcrumbDemoComponent;