feat: improve faqs (#52)

* ✨ fix: Improved FAQ layout * chore: fix styles * Update faq.mdx --------- Co-authored-by: Arjun Aditya <[email protected]>
zeropsio · Sep 29, 2024 · 2c79b5f · 2c79b5f
1 parent 8df9e1d
commit 2c79b5f
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 16 deletions.
diff --git a/apps/docs/content/help/faq.mdx b/apps/docs/content/help/faq.mdx
@@ -2,24 +2,24 @@
 title: Frequently Asked Questions
 ---
 import Accordion from "/src/components/Accordion"
+import { FAQ, FAQItem } from "/src/components/Faq"
 
-## General
 
-{/* <Accordion title="What is Docusaurus?">
-  Docusaurus is an open-source static site generator that helps you build optimized websites quickly, focusing on documentation sites.
-</Accordion> */}
+### General
 
-<details>
-  <summary>1. What is the Zerops GUI URL?</summary>
-  <p>
-  Head straight to <a href="https://app.zerops.io">https://app.zerops.io</a>
-  </p>
-</details>
+<FAQ>
+  <FAQItem>
+    <span>Where can I find the Zerops Dashboard GUI?</span>
+    <span>You can access the Zerops Dashboard GUI directly at <a href="https://app.zerops.io">app.zerops.io</a></span>
+  </FAQItem>
+  <FAQItem>
+    <span>How much does it cost to get started?</span>
+    <span>It's free to get started, and no credit card is required! However, we recommend visiting our <a href="https://zerops.io/#pricing">pricing page</a> to explore the options that best suit your needs.</span>
+  </FAQItem>
+  <FAQItem>
+    <span>I have more questions. Where can I reach out to get help?</span>
+    <span>You can reach us on our <a href="https://discord.gg/xxzmJSDKPT" target="_blank">Discord server</a> for support. For additional contact options, please visit our <a href="http://localhost:3001/help/contacts">contacts page</a>.</span>
+  </FAQItem>
+</FAQ>
 
 
-<details>
-  <summary>2. What is the current Zerops pricing?</summary>
-  <p>
-  See <a href="https://zerops.io/#pricing">our pricing</a>.
-  </p>
-</details>
diff --git a/apps/docs/src/components/Faq/index.tsx b/apps/docs/src/components/Faq/index.tsx
@@ -0,0 +1,53 @@
+import { ChevronDownMini, ChevronUpMini } from "@medusajs/icons";
+import React, { ReactNode, useState, useRef, useEffect } from "react";
+
+interface FAQ {
+  question: string;
+  answer: string | ReactNode;
+}
+
+export function FAQItem({ children }: Readonly<{ children: ReactNode[] }>) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [question, answer] = React.Children.toArray(children);
+  const answerRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState<number | undefined>(0);
+
+  useEffect(() => {
+    if (isOpen && answerRef.current) {
+      setHeight(answerRef.current.scrollHeight);
+    } else {
+      setHeight(0);
+    }
+  }, [isOpen]);
+
+  return (
+    <div className="py-0.5">
+      <div className="card bg-medusa-bg-subtle dark:bg-medusa-bg-base shadow-card-rest dark:shadow-card-rest-dark w-full py-1 px-0.5 rounded-md">
+        <button
+          className="flex w-full justify-between items-center text-left bg-transparent border-none cursor-pointer"
+          onClick={() => setIsOpen(!isOpen)}
+          aria-expanded={isOpen}
+        >
+          <span className="text-lg font-medium cursor-pointer">{question}</span>
+          {isOpen ? (
+            <ChevronUpMini className="text-gray-500" />
+          ) : (
+            <ChevronDownMini className="text-gray-500" />
+          )}
+        </button>
+        <div
+          ref={answerRef}
+          className={`overflow-hidden transition-all duration-300 ease-in-out`}
+          style={{ height: height }}
+          role="region"
+        >
+          <div className="px-[0.3rem] py-[0.8rem]">{answer}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function FAQ({ children }: Readonly<{ children: ReactNode }>) {
+  return <div className="flex flex-col">{children}</div>;
+}