feat: added Faq section

components/Accordion.tsx

@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+interface AccordionItem {
+  question: string;
+  answer: string;
+  id: number;
+}
+
+interface AccordionProps {
+  items: AccordionItem[];
+}
+
+const Accordion: React.FC<AccordionProps> = ({ items }) => {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const router = useRouter();
+
+  const handleToggle = (index: number) => {
+    setActiveIndex((prevIndex) => (prevIndex === index ? null : index));
+  };
+
+  useEffect(() => {
+    const hash = router.asPath.split('#')[1];
+    if (hash) {
+      const id = parseInt(hash, 10);
+      const index = items.findIndex((item) => item.id === id);
+      if (index !== -1) {
+        setActiveIndex(index);
+
+        setTimeout(() => {
+          const element = document.getElementById(hash);
+          if (element) {
+            const navbarHeight = 150;
+            const offset = element.offsetTop - navbarHeight;
+            window.scrollTo({ top: offset, behavior: 'smooth' });
+          }
+        }, 0);
+      }
+    }
+  }, [items, router.asPath]);
+
+  const handleLinkClick = (id: number) => {
+    const index = items.findIndex((item) => item.id === id);
+    setActiveIndex(index);
+
+    const newUrl = `#${id}`;
+    router.push(newUrl, undefined, { shallow: true });
+  };
+
+  return (
+    <div>
+      {items.map((item, index) => (
+        <div
+          key={item.id || index}
+          className={`overflow-hidden transition-max-height border-t-2 ${
+            activeIndex === index ? 'max-h-96' : 'max-h-20'
+          } ${index === items.length - 1 ? 'border-b-2' : ''}`}
+        >
+          <div className='flex justify-between items-center p-4 cursor-pointer'>
+            <div className='text-[20px]'>
+              <a
+                href={`#${item.id}`}
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleLinkClick(item.id);
+                }}
+              >
+                {item.question}
+              </a>
+            </div>
+            <div
+              className={`transform transition-transform text-[20px] ${
+                activeIndex === index ? 'rotate-45' : ''
+              }`}
+              onClick={() => handleToggle(index)}
+            >
+              &#43;
+            </div>
+          </div>
+          {activeIndex === index && (
+            <div id={`${item.id}`} className='p-2 text-gray-500'>
+              {item.answer}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Accordion;

components/Faq.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import faqData from '../data/faq.json';
+import Accordion from '~/components/Accordion';
+
+export default function Faq({ category }: { category: string }) {
+  const filteredFAQs = faqData.filter((item) => item.category === category);
+
+  return (
+    <section>
+      <div className='max-w-screen-md mx-auto p-8'>
+        <h2 className='text-2xl font-bold text-[24px] mb-4'>
+          {category.toUpperCase()}
+        </h2>
+        <Accordion items={filteredFAQs} />
+      </div>
+    </section>
+  );
+}

components/Sidebar.tsx

@@ -126,7 +126,7 @@ export const SidebarLayout = ({ children }: { children: React.ReactNode }) => {
   const pathWtihoutFragment = extractPathWithoutFragment(router.asPath);
   return (
     <div className='max-w-[1400px] mx-auto flex flex-col items-center'>
-      <section>
+      <section className='w-full'>
         <div className='bg-primary w-full h-12 mt-[4.5rem] z-150 flex relative flex-col justify-between items-center lg:hidden'>
           <div
             className='z-[150] flex w-full bg-primary justify-between items-center mt-2'
@@ -286,6 +286,7 @@ export const DocsNav = () => {
             label='Similar Technologies'
           />
           <DocLink uri='/overview/code-of-conduct' label='Code of Conduct' />
+          <DocLink uri='/overview/faq' label='Faq' />
         </div>
       </div>
       {/* Get Started */}

data/faq.json

@@ -0,0 +1,50 @@
+[
+    {
+      "id": 1,
+      "question": "What is JSON Schema?",
+      "answer": "JSON Schema is a vocabulary that allows you to annotate and validate JSON documents. It defines the structure, data types, and constraints of JSON data.",
+      "category": "general"
+    },
+    {
+      "id": 2,
+      "question": "How do I create a simple JSON Schema?",
+      "answer": "You can create a simple JSON Schema using a JSON object with properties like 'type', 'properties', and 'required'. These define the data type, properties, and mandatory fields of your JSON document.",
+      "category": "general"
+    },
+    {
+      "id": 3,
+      "question": "What is the purpose of 'type' in JSON Schema?",
+      "answer": "The 'type' keyword specifies the data type of the JSON value. It can be 'string', 'number', 'object', 'array', 'boolean', 'null', or a combination of these.",
+      "category": "general"
+    },
+    {
+      "id": 4,
+      "question": "How can I define default values in a JSON Schema?",
+      "answer": "You can use the 'default' keyword to set a default value for a property in your JSON Schema. It provides a fallback value if the property is not present in the JSON document.",
+      "category": "general"
+    },
+    {
+      "id": 5,
+      "question": "What is the significance of 'required' in JSON Schema?",
+      "answer": "The 'required' keyword is an array that specifies which properties must be present in a JSON document. It enforces that these properties are not omitted.",
+      "category": "general"
+    },
+    {
+      "id": 6,
+      "question": "How can I validate a JSON document against a JSON Schema?",
+      "answer": "You can use various tools and libraries, such as AJV (Another JSON Schema Validator) in JavaScript, to validate a JSON document against a JSON Schema. These tools check if the document adheres to the specified schema rules.",
+      "category": "general"
+    },
+    {
+      "id": 7,
+      "question": "What is the difference between 'object' and 'array' types in JSON Schema?",
+      "answer": "In JSON Schema, 'object' is used to define an object with named properties, while 'array' is used to define an ordered list of values. 'object' contains key-value pairs, whereas 'array' contains elements identified by their index.",
+      "category": "general"
+    },
+    {
+      "id": 8,
+      "question": "Can I use JSON Schema to describe nested structures?",
+      "answer": "Yes, JSON Schema supports nested structures. You can define properties with their own JSON Schema, allowing you to describe complex hierarchical data.",
+      "category": "general"
+    }
+  ]

pages/overview/faq/index.page.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { getLayout } from '~/components/Sidebar';
+import Head from 'next/head';
+import { SectionContext } from '~/context';
+import Faq from '~/components/Faq';
+import { Headline1 } from '~/components/Headlines';
+
+export default function Content() {
+  const newTitle = 'Frequently Asked Questions';
+
+  return (
+    <SectionContext.Provider value='docs'>
+      <Head>
+        <title>{newTitle}</title>
+      </Head>
+      <Headline1>{newTitle}</Headline1>
+      <Faq category='general' />
+    </SectionContext.Provider>
+  );
+}
+Content.getLayout = getLayout;