From 83dd95518a1db82b68406ddd42bf8557ca1951cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A1n=20UB?=
 <22903142+adrian-ub@users.noreply.github.com>
Date: Sat, 9 Nov 2024 11:18:11 -0500
Subject: [PATCH] docs: add FAQ component

---
 docs/src/components/faq.ts      | 47 +++++++++++++++++++++++++++++++++
 docs/src/content/docs/index.mdx |  6 +++++
 2 files changed, 53 insertions(+)
 create mode 100644 docs/src/components/faq.ts

diff --git a/docs/src/components/faq.ts b/docs/src/components/faq.ts
new file mode 100644
index 0000000..c0959bd
--- /dev/null
+++ b/docs/src/components/faq.ts
@@ -0,0 +1,47 @@
+import { UbAccordionContentDirective, UbAccordionDirective, UbAccordionItemDirective, UbAccordionTriggerDirective } from '@/registry/new-york/ui/accordion'
+
+import { Component } from '@angular/core'
+
+@Component({
+  standalone: true,
+  imports: [
+    UbAccordionDirective,
+    UbAccordionItemDirective,
+    UbAccordionTriggerDirective,
+    UbAccordionContentDirective,
+  ],
+  selector: 'shadcn-ng-faq',
+  template: `
+  <div ubAccordion type="multiple">
+    <div ubAccordionItem value="faq-1">
+      <h3 ubAccordionTrigger>What is the meaning of life?</h3>
+      <div ubAccordionContent>
+        <p class="leading-7 [&:not(:first-child)]:mt-6">The idea behind this is to give you ownership and control over the code, allowing you to decide how the components are built and styled.</p>
+
+        <p class="leading-7 [&:not(:first-child)]:mt-6">Start with some sensible defaults, then customize the components to your needs.</p>
+
+        <p class="leading-7 [&:not(:first-child)]:mt-6">One of the drawbacks of packaging the components in an npm package is that the style is coupled with the implementation. <em>The design of your components should be separate from their implementation.</em></p>
+      </div>
+    </div>
+
+    <div ubAccordionItem value="faq-2">
+      <h3 ubAccordionTrigger>Do you plan to publish it as an npm package?</h3>
+      <div ubAccordionContent>No. I have no plans to publish it as an npm package.</div>
+    </div>
+
+    <div ubAccordionItem value="faq-3">
+      <h3 ubAccordionTrigger>Which frameworks are supported?</h3>
+      <div ubAccordionContent>You can use any framework that supports Angular.</div>
+    </div>
+
+    <div ubAccordionItem value="faq-4">
+      <h3 ubAccordionTrigger>Can I use this in my project?</h3>
+      <div ubAccordionContent>
+      <p class="leading-7 [&:not(:first-child)]:mt-6">Yes. Free to use for personal and commercial projects. No attribution required.</p>
+      <p class="leading-7 [&:not(:first-child)]:mt-6">But hey, let me know if you do. I'd love to see what you build.</p>
+      </div>
+    </div>
+  </div>
+  `,
+})
+export class Faq { }
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index f5767a3..ceee1dc 100644
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -14,3 +14,9 @@ I mean you do not install it as a dependency. It is not available or distributed
 Pick the components you need. Copy and paste the code into your project and customize to your needs. The code is yours.
 
 _Use this as a reference to build your own component libraries._
+
+import { Faq } from '@/components/faq.ts'
+
+## FAQ
+
+<Faq client:load />