From 3f7cb9e2497b435ac59842a077c72bbb7c27cc64 Mon Sep 17 00:00:00 2001 From: MIGHTY1o1 Date: Wed, 2 Oct 2024 19:22:26 +0530 Subject: [PATCH] add navbar and faq page --- app/faq/page.tsx | 93 ++++++++++++++++++++++++++++++++++++ app/layout.tsx | 3 ++ components/Navbar.tsx | 78 +++++++++++++++--------------- components/navbar/navbar.tsx | 42 ++++++++++++++++ 4 files changed, 177 insertions(+), 39 deletions(-) create mode 100644 app/faq/page.tsx create mode 100644 components/navbar/navbar.tsx diff --git a/app/faq/page.tsx b/app/faq/page.tsx new file mode 100644 index 0000000..f5fa50f --- /dev/null +++ b/app/faq/page.tsx @@ -0,0 +1,93 @@ +"use client"; +import React, { useState } from "react"; + +const faqs = [ + { + question: "What is DesignDeck?", + answer: + "DesignDeck is a web-based collaborative design tool, similar to Figma, built using Next.js, TypeScript, Tailwind CSS, and LiveBlocks API. It allows teams to seamlessly collaborate on designing interfaces in real-time.", + }, + { + question: "How do I get started with DesignDeck?", + answer: + "To get started, clone the repository from GitHub, install the dependencies, and run the project locally using npm. The full guide is available in the README.md file.", + }, + { + question: "What features does DesignDeck offer?", + answer: + "DesignDeck offers live collaboration, shape manipulation, free drawing, text addition, export to PDF, and many more features to help you design interfaces collaboratively.", + }, + { + question: "How can I contribute to DesignDeck?", + answer: + "You can contribute by forking the repository, creating a new branch, making your changes, and submitting a pull request. Contributions are always welcome!", + }, + { + question: "Is DesignDeck open source?", + answer: + "Yes, DesignDeck is an open-source project, and we encourage contributions from the community.", + }, + { + question: "Does DesignDeck support real-time collaboration?", + answer: + "Yes, with the LiveBlocks API integrated into DesignDeck, multiple users can collaborate in real-time. You can see live updates of cursor positions and design changes as they happen.", + }, + { + question: "What technologies power DesignDeck?", + answer: + "DesignDeck is built using Next.js, TypeScript, Tailwind CSS, and LiveBlocks API for real-time collaboration, along with Fabric.js for manipulating graphics and interactive content.", + }, + { + question: "How can I export my designs in DesignDeck?", + answer: + "DesignDeck allows you to export designs to PDF format. Simply select the elements you want to export and use the export option to generate a downloadable PDF.", + }, + { + question: "Are there keyboard shortcuts available in DesignDeck?", + answer: + "Currently, DesignDeck does not supports keyboard shortcuts,the feature is under development, once prepare user will be abel to do faster design operations, such as Undo (Ctrl+Z), Redo (Ctrl+Y), and copy-pasting elements.", + }, +]; + +const FAQ = () => { + const [activeIndex, setActiveIndex] = useState(null); + + const toggleFAQ = (index: number) => { + setActiveIndex(index === activeIndex ? null : index); + }; + + return ( +
+

+ Frequently Asked Questions +

+
+ {faqs.map((faq, index) => ( +
toggleFAQ(index)} + > +
+

+ {faq.question} +

+ + {activeIndex === index ? "-" : "+"} + +
+ {activeIndex === index && ( +

{faq.answer}

+ )} +
+ ))} +
+
+ ); +}; + +export default FAQ; diff --git a/app/layout.tsx b/app/layout.tsx index 6b309e3..41a6fd4 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -2,6 +2,7 @@ import type { Metadata } from "next"; import { Work_Sans } from "next/font/google"; import "./globals.css"; import { Room } from "./Room"; +import NavBar from "../components/navbar/navbar"; const workSans = Work_Sans({ subsets: ["latin"], @@ -22,6 +23,8 @@ export default function RootLayout({ return ( + {/* Add the NavBar here */} + {children} diff --git a/components/Navbar.tsx b/components/Navbar.tsx index d0cfa63..18eb740 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -24,35 +24,46 @@ function Navbar({ return ( diff --git a/components/navbar/navbar.tsx b/components/navbar/navbar.tsx new file mode 100644 index 0000000..3fff782 --- /dev/null +++ b/components/navbar/navbar.tsx @@ -0,0 +1,42 @@ +"use client"; + +import Image from "next/image"; +import Link from "next/link"; +import React from "react"; + +const NavBar = () => { + return ( + + ); +}; + +export default NavBar;