implement accordion

opentofu · Aug 30, 2023 · a18b6a8 · a18b6a8
1 parent dc2094a
commit a18b6a8
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 22 deletions.
diff --git a/src/components/Accordion/Item.tsx b/src/components/Accordion/Item.tsx
@@ -0,0 +1,69 @@
+import React, { useRef } from "react";
+
+type AccordionItemProps = {
+  children: React.ReactNode;
+  summary: string;
+  open?: boolean;
+};
+
+const AccordionItem = ({ summary, open, children }: AccordionItemProps) => {
+  const detailsRef = useRef(null);
+
+  const handleItemClick = () => {
+    document.querySelectorAll("details.accordion-item").forEach((item) => {
+      if (item !== detailsRef.current) {
+        item.removeAttribute("open");
+      }
+    });
+  };
+
+  return (
+    <details
+      ref={detailsRef}
+      className="accordion-item group text-lg"
+      open={open}
+    >
+      <summary
+        onClick={handleItemClick}
+        className="py-6 px-6 group-open:pb-0 text-xl flex cursor-pointer flex-row items-center justify-between  font-medium marker:[font-size:0px]"
+      >
+        {summary}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="25"
+          viewBox="0 0 24 25"
+          fill="none"
+          className="h-6 w-6 rotate-0 transform text-gray-400 block group-open:hidden"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12 2.35271C12.4418 2.35271 12.8 2.71088 12.8 3.15271V11.3527H21C21.4418 11.3527 21.7999 11.7109 21.7999 12.1527C21.7999 12.5945 21.4418 12.9527 21 12.9527H12.8V21.1527C12.8 21.5945 12.4418 21.9527 12 21.9527C11.5581 21.9527 11.2 21.5945 11.2 21.1527V12.9527H2.99995C2.55812 12.9527 2.19995 12.5945 2.19995 12.1527C2.19995 11.7109 2.55812 11.3527 2.99995 11.3527H11.2V3.15271C11.2 2.71088 11.5581 2.35271 12 2.35271Z"
+            fill="#0C192B"
+          />
+        </svg>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="25"
+          viewBox="0 0 24 25"
+          fill="none"
+          className="h-6 w-6 rotate-0 transform text-gray-400 hidden group-open:block"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.9999 11.3527C12.4418 11.3527 12.8 11.3527 12.8 11.3527L21 11.3527C21.4418 11.3527 21.7999 11.7109 21.7999 12.1527C21.7999 12.5945 21.4418 12.9527 21 12.9527H12.8C12.8 12.9527 12.4418 12.9527 11.9999 12.9527C11.5581 12.9527 11.2 12.9527 11.2 12.9527H2.99995C2.55812 12.9527 2.19995 12.5945 2.19995 12.1527C2.19995 11.7109 2.55812 11.3527 2.99995 11.3527H11.2C11.2 11.3527 11.5581 11.3527 11.9999 11.3527Z"
+            fill="#0C192B"
+          />
+        </svg>
+      </summary>
+      <p className="pb-6 px-6 leading-6 mt-2 text-base text-[#5F6671] font-normal">
+        {children}
+      </p>
+    </details>
+  );
+};
+
+export default AccordionItem;
diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+type AccordionProps = {
+  children: React.ReactNode;
+};
+
+const Accordion = ({ children }: AccordionProps) => {
+  return <section className="grid grid-cols-1 divide-y">{children}</section>;
+};
+
+export default Accordion;
diff --git a/src/components/HomePage/index.tsx b/src/components/HomePage/index.tsx
@@ -1,29 +1,52 @@
 import React from "react";
-
-import LogoUrl from "@site/static/img/logo.png";
-import Link from "@docusaurus/Link";
+import Accordion from "../Accordion";
+import AccordionItem from "../Accordion/Item";
 
 export default function Home() {
   return (
     <div className="flex justify-center items-center flex-col h-1/2">
-      <img src={LogoUrl} alt="Logo" className="w-96" />
-      <p className="text-xl -mt-6">
-        Supporting an impartial, open, and community-driven Terraform.
-      </p>
-      <div className="flex gap-4 mt-8">
-        <Link
-          to="/intro"
-          className="rounded-full border-2 border-brand bg-brand px-6 py-3"
-        >
-          Documentation
-        </Link>
-        <Link
-          to="https://github.com/opentffoundation/opentf"
-          className="rounded-full border-2 border-brand px-6 py-3"
-        >
-          GitHub Repository
-        </Link>
-      </div>
+      <section className="text-[#0C192B] flex flex-col justify-center w-full bg-[#F9F9F9] py-20 px-6">
+        <div className="w-full max-w-4xl mx-auto">
+          <h1 className="mb-12  font-bold text-5xl">
+            Frequently Asked Questions
+          </h1>
+
+          <Accordion>
+            <AccordionItem summary="What is OpenTF?" open>
+              Under a well-known and widely-accepted license that companies can
+              trus, that won’t suddenly change in the future, and isn’t subhect
+              to the whims of a singe vendor. Under a well-known and
+              widely-accepted license that companies can trus, that won’t
+              suddenly change in the future, and isn’t subhect to the whims of a
+              singe vendor.
+            </AccordionItem>
+            <AccordionItem summary="Why was OpenTF created?">
+              Under a well-known and widely-accepted license that companies can
+              trus, that won’t suddenly change in the future, and isn’t subhect
+              to the whims of a singe vendor. Under a well-known and
+              widely-accepted license that companies can trus, that won’t
+              suddenly change in the future, and isn’t subhect to the whims of a
+              singe vendor.
+            </AccordionItem>
+            <AccordionItem summary="Can I use OpenTF as a drop-in replacement for Terraform?">
+              Under a well-known and widely-accepted license that companies can
+              trus, that won’t suddenly change in the future, and isn’t subhect
+              to the whims of a singe vendor. Under a well-known and
+              widely-accepted license that companies can trus, that won’t
+              suddenly change in the future, and isn’t subhect to the whims of a
+              singe vendor.
+            </AccordionItem>
+            <AccordionItem summary="What are the differences between OpenTF and Terraform?">
+              Under a well-known and widely-accepted license that companies can
+              trus, that won’t suddenly change in the future, and isn’t subhect
+              to the whims of a singe vendor. Under a well-known and
+              widely-accepted license that companies can trus, that won’t
+              suddenly change in the future, and isn’t subhect to the whims of a
+              singe vendor.
+            </AccordionItem>
+          </Accordion>
+        </div>
+      </section>
     </div>
   );
 }
diff --git a/src/components/Pattern/index.tsx b/src/components/Pattern/index.tsx
@@ -18,7 +18,7 @@ export default function Pattern() {
         </pattern>
       </defs>
 
-      <rect width="100%" height="100%" stroke-width="0" fill="url(#grid)" />
+      <rect width="100%" height="100%" strokeWidth="0" fill="url(#grid)" />
     </svg>
   );
 }