diff --git a/landing/keyserver-faq.css b/landing/keyserver-faq.css new file mode 100644 --- /dev/null +++ b/landing/keyserver-faq.css @@ -0,0 +1,51 @@ +.faqSection { + display: flex; + flex-direction: column; + align-items: center; + background-color: var(--light-dark-page-background); + padding: 96px 0; +} + +.faqHeading { + color: var(--white-100); + margin-bottom: 64px; +} + +.faqContainer { + width: 1144px; + max-width: 90vw; +} + +.faqItemContainer { + border-bottom: 1px solid var(--white-80); + padding: 40px 0 24px; + cursor: pointer; +} + +.questionContainer { + display: flex; + justify-content: space-between; + align-items: center; +} + +.questionText { + color: var(--white-100); +} + +.icon { + margin-left: 24px; +} + +.answerContainer { + max-height: 0; + overflow: hidden; +} + +.activeAnswerContainer { + max-height: fit-content; +} + +.answerText { + color: var(--white-100); + margin-top: 16px; +} diff --git a/landing/keyserver-faq.react.js b/landing/keyserver-faq.react.js new file mode 100644 --- /dev/null +++ b/landing/keyserver-faq.react.js @@ -0,0 +1,69 @@ +// @flow + +import { faChevronDown } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import classNames from 'classnames'; +import * as React from 'react'; + +import { faqData } from './keyserver-faq-data.js'; +import css from './keyserver-faq.css'; +import typography from './typography.css'; + +function KeyserverFAQ(): React.Node { + const questionClassName = classNames([ + typography.subheading2, + css.questionText, + ]); + const answerClassName = classNames([typography.paragraph1, css.answerText]); + + const [activeFAQIndex, setActiveFAQIndex] = React.useState(null); + + const onClickFAQItem = React.useCallback( + (index: number) => { + if (index === activeFAQIndex) { + setActiveFAQIndex(null); + } else { + setActiveFAQIndex(index); + } + }, + [activeFAQIndex], + ); + + const keyserverFAQ = React.useMemo(() => { + return faqData.map((faq, index) => { + const answerContainerClassName = classNames({ + [css.answerContainer]: true, + [css.activeAnswerContainer]: activeFAQIndex === index, + }); + + return ( +
onClickFAQItem(index)} + > +
+

{faq.question}

+ +
+
+

{faq.answer}

+
+
+ ); + }); + }, [activeFAQIndex, answerClassName, onClickFAQItem, questionClassName]); + + return ( +
+

FAQ

+
{keyserverFAQ}
+
+ ); +} + +export default KeyserverFAQ;