From 547a5ae03980cc07b10d60075d7af99efd05e538 Mon Sep 17 00:00:00 2001 From: Akshay Bagai <100753870+Akshaybagai52@users.noreply.github.com> Date: Wed, 13 Mar 2024 22:15:37 +0530 Subject: [PATCH] feat: added Faq section --- components/Accordion.tsx | 91 +++++++++++++++++++++++++++++++ components/Faq.tsx | 18 ++++++ components/Sidebar.tsx | 3 +- data/faq.json | 50 +++++++++++++++++ pages/overview/faq/index.page.tsx | 21 +++++++ 5 files changed, 182 insertions(+), 1 deletion(-) create mode 100644 components/Accordion.tsx create mode 100644 components/Faq.tsx create mode 100644 data/faq.json create mode 100644 pages/overview/faq/index.page.tsx diff --git a/components/Accordion.tsx b/components/Accordion.tsx new file mode 100644 index 000000000..70f73a591 --- /dev/null +++ b/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 = ({ items }) => { + const [activeIndex, setActiveIndex] = useState(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 ( +
+ {items.map((item, index) => ( +
+
+ +
handleToggle(index)} + > + + +
+
+ {activeIndex === index && ( +
+ {item.answer} +
+ )} +
+ ))} +
+ ); +}; + +export default Accordion; diff --git a/components/Faq.tsx b/components/Faq.tsx new file mode 100644 index 000000000..b78bd78e7 --- /dev/null +++ b/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 ( +
+
+

+ {category.toUpperCase()} +

+ +
+
+ ); +} diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx index c9d098fc9..f9bb5b27c 100644 --- a/components/Sidebar.tsx +++ b/components/Sidebar.tsx @@ -126,7 +126,7 @@ export const SidebarLayout = ({ children }: { children: React.ReactNode }) => { const pathWtihoutFragment = extractPathWithoutFragment(router.asPath); return (
-
+
{ label='Similar Technologies' /> +
{/* Get Started */} diff --git a/data/faq.json b/data/faq.json new file mode 100644 index 000000000..6146f0fe6 --- /dev/null +++ b/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" + } + ] \ No newline at end of file diff --git a/pages/overview/faq/index.page.tsx b/pages/overview/faq/index.page.tsx new file mode 100644 index 000000000..27545f158 --- /dev/null +++ b/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 ( + + + {newTitle} + + {newTitle} + + + ); +} +Content.getLayout = getLayout;