diff --git a/landing/keyserver-faq.css b/landing/keyserver-faq.css index e823e8fba..f65c9b847 100644 --- a/landing/keyserver-faq.css +++ b/landing/keyserver-faq.css @@ -1,15 +1,62 @@ +.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; } .link { color: inherit; text-decoration: underline; transition: color 150ms; } .link:hover { color: var(--violet-dark-100); transition: color 150ms; } diff --git a/landing/keyserver-faq.react.js b/landing/keyserver-faq.react.js new file mode 100644 index 000000000..3d16c082f --- /dev/null +++ b/landing/keyserver-faq.react.js @@ -0,0 +1,66 @@ +// @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 [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 ( +
{faq.question}
+