feat(web): add faq page

README.md

@@ -11,19 +11,30 @@ Open UI is a powerful design system created with Shadcn UI and Tailwind CSS. It
 
 ## Components
 
+_General_
+
+- [x] Button
+- [x] Aspect Ratio
+- [x] Carousel
+
+_Data Input_
+
+- [x] Input
+- [x] Label
+- [x] Select
+- [x] Checkbox
 - [x] Slider
 
 _Layout_
 
-- [x] Divider
+- [x] Separator
 
 _Display_
 
 - [x] Card
 - [x] Avatar
 - [x] Accordion
 - [x] Alert
-- [x] Alert Dialog
 - [x] Badge
 - [x] Tooltips
 - [x] Tables
@@ -50,4 +61,4 @@ If you want to know more about this design system visit
 
 ## License
 
-[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT))
+[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)

apps/web/app/(docs)/docs/[[...slug]]/page.tsx

@@ -74,8 +74,8 @@ export default async function DocPage({ params }: DocPageProps) {
         <hr className="my-4 md:my-6" />
         <DocsPager doc={doc} />
       </div>
-      <div className="hidden text-sm xl:block">
-        <div className="sticky top-16 -mt-10 max-h-[calc(var(--vh)-4rem)] overflow-y-auto pt-10">
+      <div className="hidden text-small xl:block">
+        <div className="sticky top-16 -mt-10 max-h-[calc(var(--vh)-4rem)] overflow-y-auto pt-10 pl-20">
           <DashboardTableOfContents toc={toc} />
         </div>
       </div>

apps/web/app/faq/page.tsx

@@ -1,7 +1,33 @@
-export default function BlogPage() {
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@openui-org/react'
+import { FAQs } from '@/constants/faqs'
+
+export default function Page() {
   return (
-    <div>
-      <h1>Blog</h1>
-    </div>
+    <>
+      <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100">
+        <div className="container px-4 md:px-6 mx-auto">
+          <div className="mx-auto max-w-3xl space-y-4 text-center">
+            <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">Frequently Asked Questions</h1>
+            <p className="text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400">
+              Get answers to your questions about our design system. Explore our guidelines, component usage, and more.
+            </p>
+          </div>
+        </div>
+      </section>
+      <section className="w-full py-12 md:py-20 container mx-auto">
+        <Accordion type="single" collapsible className="w-full">
+          {FAQs.map((faq, index) => (
+            <AccordionItem key={index} value={`item-${index}`} ripple shadow="md" className="mt-6">
+              <AccordionTrigger text="lg">
+                {faq.question}
+              </AccordionTrigger>
+              <AccordionContent>
+                {faq.answer}
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </section>
+    </>
   )
 }

apps/web/components/sidebar-nav.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import Link from 'next/link'
+import { Button } from '@openui-org/react'
 import type { NavItem } from './main-nav'
 
 export type SidebarNavItem = {
@@ -25,16 +26,14 @@ export interface DocsSidebarNavProps {
 export function DocsSidebarNav({ items }: DocsSidebarNavProps) {
   return items.length
     ? (
-      <div className="w-full">
+      <div className="w-full pr-2">
         {items.map((item, index) => (
           <div key={index} className="pb-8">
             <h4 className="mb-1 rounded-md px-2 py-1 text-medium font-medium">
               {item.title}
             </h4>
             {item.items
-              ? (
-                <DocsSidebarNavItems items={item.items} />
-                )
+              ? (<DocsSidebarNavItems items={item.items} />)
               : null}
           </div>
         ))}
@@ -50,17 +49,18 @@ interface DocsSidebarNavItemsProps {
 export function DocsSidebarNavItems({ items }: DocsSidebarNavItemsProps) {
   return items?.length
     ? (
-      <div className="grid grid-flow-row auto-rows-max text-small">
+      <div className="flex flex-col justify-start items-start text-small">
         {items.map((item, index) => (
-          <Link
-            key={index}
-            href={item.href!}
-            className="flex w-full items-center p-2 text-black/70 hover:text-black/90 transition-colors duration-200 ease-in-out"
-            target={item.external ? '_blank' : ''}
-            rel={item.external ? 'noreferrer' : ''}
-          >
-            {item.title}
-          </Link>
+          <Button key={index} asChild variant="ghost" className="w-full flex justify-start items-start">
+            <Link
+              href={item.href!}
+              className="font-light"
+              target={item.external ? '_blank' : ''}
+              rel={item.external ? 'noreferrer' : ''}
+            >
+              {item.title}
+            </Link>
+          </Button>
         ))}
       </div>
       )

apps/web/components/toc.tsx

@@ -11,17 +11,14 @@ interface TocProps {
 }
 
 export function DashboardTableOfContents({ toc }: TocProps) {
-  const itemIds = React.useMemo(
-    () =>
-      toc.items
-        ? toc.items
-          .flatMap(item => [item.url, item?.items?.map(item => item.url)])
-          .flat()
-          .filter(Boolean)
-          .map(id => id?.split('#')[1])
-        : [],
-    [toc],
-  )
+  const itemIds = React.useMemo(() => toc.items
+    ? toc.items
+      .flatMap(item => [item.url, item?.items?.map(item => item.url)])
+      .flat()
+      .filter(Boolean)
+      .map(id => id?.split('#')[1])
+    : [], [toc])
+
   const activeHeading = useActiveItem(itemIds)
   const mounted = useMounted()
 

apps/web/constants/faqs.ts

@@ -0,0 +1,44 @@
+// generate array of FAQ
+
+export const FAQs = [
+  {
+    question: 'What is the purpose of this app?',
+    answer: 'The purpose of this app is to provide a platform for users to search for and view information about various movies and TV shows.',
+  },
+  {
+    question: 'How do I search for a movie or TV show?',
+    answer: 'You can search for a movie or TV show by typing the name of the movie or TV show in the search bar at the top of the page.',
+  },
+  {
+    question: 'How do I view information about a movie or TV show?',
+    answer: 'You can view information about a movie or TV show by clicking on the movie or TV show in the search results.',
+  },
+  {
+    question: 'How do I save a movie or TV show to my watchlist?',
+    answer: 'You can save a movie or TV show to your watchlist by clicking the "Add to Watchlist" button on the movie or TV show page.',
+  },
+  {
+    question: 'How do I view my watchlist?',
+    answer: 'You can view your watchlist by clicking the "Watchlist" link in the navigation bar at the top of the page.',
+  },
+  {
+    question: 'How do I remove a movie or TV show from my watchlist?',
+    answer: 'You can remove a movie or TV show from your watchlist by clicking the "Remove from Watchlist" button on the movie or TV show page.',
+  },
+  {
+    question: 'How do I view information about a movie or TV show in my watchlist?',
+    answer: 'You can view information about a movie or TV show in your watchlist by clicking on the movie or TV show in the watchlist.',
+  },
+  {
+    question: 'How do I clear my watchlist?',
+    answer: 'You can clear your watchlist by clicking the "Clear Watchlist" button on the watchlist page.',
+  },
+  {
+    question: 'How do I view information about a movie or TV show in my watchlist?',
+    answer: 'You can view information about a movie or TV show in your watchlist by clicking on the movie or TV show in the watchlist.',
+  },
+  {
+    question: 'How do I clear my watchlist?',
+    answer: 'You can clear your watchlist by clicking the "Clear Watchlist" button on the watchlist page.',
+  },
+]