completely removed headlessui

n0rig · Jul 26, 2024 · eb9ea8e · eb9ea8e
1 parent 02cb48d
commit eb9ea8e
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 248 deletions.
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown } from "lucide-react";
+import { Minus as MinusSmallIcon ,Plus as PlusSmallIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
@@ -27,13 +27,14 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline group",
         className,
       )}
       {...props}
     >
       {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+      <PlusSmallIcon className="h-6 w-6 shrink-0 transition-transform duration-200 group-data-[state=open]:hidden" />
+      <MinusSmallIcon className="h-6 w-6 shrink-0 transition-transform duration-200 group-data-[state=closed]:hidden" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));

diff --git a/components/web/alternatives/dropdownproto.tsx b/components/web/alternatives/dropdownproto.tsx
@@ -1,11 +1,13 @@
-import { Dispatch, Fragment, SetStateAction } from "react";
-
-import { Menu, Transition } from "@headlessui/react";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-
-function classNames(...classes: string[]) {
-  return classes.filter(Boolean).join(" ");
-}
+import { CheckIcon} from "lucide-react";
+import { Dispatch, SetStateAction, useState } from "react";
+import * as React from "react"
+import {
+  Select,
+  SelectContent,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { cn } from "@/lib/utils";
 
 interface DropDownProps {
   options: string[];
@@ -18,58 +20,48 @@ export default function DropDown({
   option,
   setOption,
 }: DropDownProps) {
-  return (
-    <Menu as="div" className="relative block w-full text-left">
-      <div>
-        <Menu.Button className="inline-flex w-full items-center justify-between rounded-md border border-black bg-white px-4 py-2 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none">
-          {option}
-          <ChevronDownIcon
-            className="-mr-1 ml-2 h-5 w-5 ui-open:hidden"
-            aria-hidden="true"
-          />
-          <ChevronUpIcon
-            className="-mr-1 ml-2 hidden h-5 w-5 ui-open:block"
-            aria-hidden="true"
-          />
-        </Menu.Button>
-      </div>
+  const [menuOpen, setMenuOpen] = useState<boolean>(false);
+  const [isFirstClick, setIsFirstClick] = useState<boolean>(false);
 
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items
-          className="absolute left-0 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-          key={option}
-        >
-          <div className="">
-            {options.map((optionItem) => (
-              <Menu.Item key={optionItem}>
-                {({ active }) => (
-                  <button
-                    onClick={() => setOption(optionItem)}
-                    className={classNames(
-                      active ? "bg-gray-100 text-gray-900" : "text-gray-700",
-                      option === optionItem ? "bg-gray-200" : "",
-                      "flex w-full items-center justify-between space-x-2 px-4 py-2 text-left text-sm",
-                    )}
-                  >
-                    <span>{optionItem}</span>
-                    {option === optionItem ? (
-                      <CheckIcon className="text-bold h-4 w-4" />
-                    ) : null}
-                  </button>
-                )}
-              </Menu.Item>
-            ))}
-          </div>
-        </Menu.Items>
-      </Transition>
-    </Menu>
-  );
+  const handleMenuStateChange = (open: boolean) => {
+    if (isFirstClick) {
+      setMenuOpen(true); // Keep the dropdown open on the first click
+      return;
+    }
+
+    // If the menu is closed, reset the isFirstClick state
+    if (!open) {
+      setIsFirstClick(false);
+      setMenuOpen(false); // Ensure the dropdown is closed
+    } else {
+      setMenuOpen(true); // Open the dropdown
+    }
+  };
+  return (
+    <Select open={menuOpen} onOpenChange={handleMenuStateChange}>
+      <SelectTrigger className="inline-flex w-full justify-between items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-400 font-light shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue text-base">
+        <SelectValue placeholder={option}/>
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((optionItem) => (
+          <button
+            onClick={() => {
+              setOption(optionItem)
+              setMenuOpen(false)
+            }}
+            className={cn(
+              option === optionItem ? "bg-gray-200" : "hover:bg-gray-100",
+              "px-4 py-2 text-sm w-full text-left flex items-center space-x-2 justify-between",
+            )}
+          >
+            <span>{optionItem}</span>
+            {option === optionItem ? (
+              <CheckIcon className="w-4 h-4 text-bold" />
+            ) : null}
+          </button>
+        ))}
+      </SelectContent>
+    </Select>
+  )
 }
+
diff --git a/components/web/faq.tsx b/components/web/faq.tsx
@@ -5,8 +5,6 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion"
-import { Minus as MinusSmallIcon, Plus as PlusSmallIcon } from "lucide-react";
-
 const faqs = [
   {
     question: "What is Papermark?",
@@ -48,22 +46,20 @@ const faqs = [
 export default function Faq() {
   return (
     <div className="">
-        <Accordion type="single" collapsible className="space-y-4">
-          {faqs.map((faq) => (
-            <AccordionItem  key={faq.question} value={faq.question} >
-              <AccordionTrigger className="flex w-full items-start justify-between text-left text-gray-800 hover:no-underline">
-                <span className="text-balance  font-medium leading-7">
-                  {faq.question}
-                </span>
-              </AccordionTrigger>
-              <AccordionContent className="mt-2 pr-12">
-                <p className="text-balance leading-7 text-gray-500">
-                  {faq.answer}
-                </p>
-              </AccordionContent>
-            </AccordionItem>
-          ))}
-        </Accordion>
+        <dl className="mt-10 divide-y divide-gray-800/10">
+            {faqs.map((faq) => (
+              <Accordion key={faq.question} type="single" collapsible>
+                <AccordionItem value={faq.question} className="py-2 border-none">
+                  <AccordionTrigger className="text-left text-gray-800 dark:text-gray-200 text-balance font-medium leading-7 hover:no-underline">
+                    {faq.question}
+                  </AccordionTrigger>
+                  <AccordionContent className="text-base leading-7 text-gray-500">
+                    {faq.answer}
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            ))}
+        </dl>
     </div>
   );
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,7 +23,6 @@
     "@aws-sdk/s3-request-presigner": "^3.614.0",
     "@chronark/zod-bird": "^0.3.9",
     "@github/webauthn-json": "^2.1.1",
-    "@headlessui/react": "^1.7.19",
     "@jitsu/js": "^1.9.5",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",

diff --git a/pages/ai.tsx b/pages/ai.tsx
@@ -1,15 +1,14 @@
 import Head from "next/head";
 import Link from "next/link";
 
-import { Disclosure } from "@headlessui/react";
 import {
   RefreshCw as ArrowPathIcon,
   GitPullRequestArrow as CloudArrowUpIcon,
   Settings as Cog6ToothIcon,
   Fingerprint as FingerPrintIcon,
   Lock as LockClosedIcon,
-  Minus as MinusSmallIcon,
-  Plus as PlusSmallIcon,
+  Minus,
+  Plus,
   HardDrive as ServerIcon,
 } from "lucide-react";
 
@@ -19,6 +18,7 @@ import Footer from "@/components/web/footer";
 import Navbar from "@/components/web/navbar";
 
 import { classNames } from "@/lib/utils";
+import Faq from "@/components/web/faq";
 
 const scrollDown = () => {
   window.scrollBy({
@@ -67,50 +67,6 @@ const features = [
   },
 ];
 
-const faqs = [
-  {
-    question: "What is Papermark AI?",
-    answer:
-      "Papermark AI is an innovative AI document assistant that enables users to interact with a variety of documents, such as pitch decks, sales decks, and PDFs, in a more efficient and secure manner.",
-  },
-  {
-    question: "How can I use Papermark AI?",
-    answer:
-      "You can use it on shared with you document and on received. You can chat with the document, ask question, find information without checking whole document.",
-  },
-  {
-    question: "Is Papermark AI free?",
-    answer:
-      "Yes, Papermark AI offers an open-source version, giving you the freedom to use and modify it according to your needs, under the terms of our license.",
-  },
-  {
-    question: "How can Papermark AI help me reach more investors?",
-    answer:
-      "Papermark AI provides recommendations and analytics to help you fine-tune your pitch decks, increasing your chances of making a successful connection with potential investors.",
-  },
-  {
-    question: "How I as an investor can use Papermark AI?",
-    answer:
-      "VCs can utilize Papermark AI to efficiently analyze and summarize data from various pitch decks, streamlining their investment decision-making process. Search inside the pitch deck, summarise and turn it into Memo.",
-  },
-  {
-    question: "Can I contribute to the Papermark AI project?",
-    answer:
-      "Definitely! We welcome contributions to Papermark AI. Whether it's improving the code, adding new features, or reporting bugs, your input is highly valued.",
-  },
-  {
-    question: "How to summarise document with Papermark AI?",
-    answer:
-      "You can use one of the starting commands and get the summary of received docuement. If you want that documents shared with you.",
-  },
-  {
-    question: "How to turn Pitch Deck into Memo?",
-    answer:
-      "You can use Papermark AI and ask it to create Memo from Pitch Deck received. You can also uplaod your own Pitch deck there.",
-  },
-
-  // More questions...
-];
 
 const tiers = [
   {
@@ -468,45 +424,11 @@ export default function Home() {
 
             {/* FAQ section */}
             <div className="mx-auto mt-24 max-w-7xl px-6 sm:mt-32 lg:px-8">
-              <div className="mx-auto max-w-4xl divide-y divide-gray-900/10">
-                <h2 className="text-2xl font-bold leading-10 tracking-tight text-white">
+              <div className="mx-auto max-w-4xl">
+                <h2 className="text-2xl font-bold leading-10 tracking-tight text-black">
                   Frequently asked questions
                 </h2>
-                <dl className="mt-10 space-y-6 divide-y divide-gray-900/10 dark:divide-gray-200/10">
-                  {faqs.map((faq) => (
-                    <Disclosure as="div" key={faq.question} className="pt-6">
-                      {({ open }) => (
-                        <>
-                          <dt>
-                            <Disclosure.Button className="flex w-full items-start justify-between text-left text-gray-900 dark:text-gray-200">
-                              <span className="text-base font-semibold leading-7">
-                                {faq.question}
-                              </span>
-                              <span className="ml-6 flex h-7 items-center">
-                                {open ? (
-                                  <MinusSmallIcon
-                                    className="h-6 w-6"
-                                    aria-hidden="true"
-                                  />
-                                ) : (
-                                  <PlusSmallIcon
-                                    className="h-6 w-6"
-                                    aria-hidden="true"
-                                  />
-                                )}
-                              </span>
-                            </Disclosure.Button>
-                          </dt>
-                          <Disclosure.Panel as="dd" className="mt-2 pr-12">
-                            <p className="text-base leading-7 text-gray-500">
-                              {faq.answer}
-                            </p>
-                          </Disclosure.Panel>
-                        </>
-                      )}
-                    </Disclosure>
-                  ))}
-                </dl>
+                <Faq />
               </div>
             </div>
           </div>