Page MenuHomePhabricator
Files F3407398

D8093.diff
No OneTemporary
Actions

D8093.diff
View Options

diff --git a/landing/keyserver-faq.css b/landing/keyserver-faq.css
--- a/landing/keyserver-faq.css
+++ b/landing/keyserver-faq.css
@@ -1,3 +1,50 @@
+.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,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 (
+ <div
+ key={index}
+ className={css.faqItemContainer}
+ onClick={() => onClickFAQItem(index)}
+ >
+ <div className={css.questionContainer}>
+ <p className={questionClassName}>{faq.question}</p>
+ <FontAwesomeIcon
+ size="sm"
+ className={css.icon}
+ icon={faChevronDown}
+ />
+ </div>
+ <div className={answerContainerClassName}>{faq.answer}</div>
+ </div>
+ );
+ });
+ }, [activeFAQIndex, onClickFAQItem, questionClassName]);
+
+ return (
+ <section className={css.faqSection}>
+ <h1 className={typography.heading1}>FAQ</h1>
+ <div className={css.faqContainer}>{keyserverFAQ}</div>
+ </section>
+ );
+}
+
+export default KeyserverFAQ;

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 5, 6:01 AM (14 h, 39 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2615437
Default Alt Text
D8093.diff (2 KB)

Event Timeline