From a18b6a886ffb911689f47efcd4590db76b45c0ae Mon Sep 17 00:00:00 2001 From: Roman Grinovski Date: Thu, 31 Aug 2023 00:25:58 +0200 Subject: [PATCH] implement accordion --- src/components/Accordion/Item.tsx | 69 ++++++++++++++++++++++++++++++ src/components/Accordion/index.tsx | 11 +++++ src/components/HomePage/index.tsx | 65 +++++++++++++++++++--------- src/components/Pattern/index.tsx | 2 +- 4 files changed, 125 insertions(+), 22 deletions(-) create mode 100644 src/components/Accordion/Item.tsx create mode 100644 src/components/Accordion/index.tsx diff --git a/src/components/Accordion/Item.tsx b/src/components/Accordion/Item.tsx new file mode 100644 index 00000000..d410351c --- /dev/null +++ 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 ( +
+ + {summary} + + + + + + + +

+ {children} +

+
+ ); +}; + +export default AccordionItem; diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx new file mode 100644 index 00000000..1bbd82e3 --- /dev/null +++ b/src/components/Accordion/index.tsx @@ -0,0 +1,11 @@ +import React from "react"; + +type AccordionProps = { + children: React.ReactNode; +}; + +const Accordion = ({ children }: AccordionProps) => { + return
{children}
; +}; + +export default Accordion; diff --git a/src/components/HomePage/index.tsx b/src/components/HomePage/index.tsx index 3b8aeb9e..0b8c2b8e 100644 --- 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 (
- Logo -

- Supporting an impartial, open, and community-driven Terraform. -

-
- - Documentation - - - GitHub Repository - -
+
+
+

+ Frequently Asked Questions +

+ + + + 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. + + + 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. + + + 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. + + + 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. + + +
+
); } diff --git a/src/components/Pattern/index.tsx b/src/components/Pattern/index.tsx index 4e882688..a2d20c7f 100644 --- a/src/components/Pattern/index.tsx +++ b/src/components/Pattern/index.tsx @@ -18,7 +18,7 @@ export default function Pattern() { - + ); }