-
Notifications
You must be signed in to change notification settings - Fork 3
FAQ
Sam Liu edited this page Mar 5, 2021
·
4 revisions
src/components/FAQ
holds all components associated with an FAQ on the FAQ page. The data used to populate the FAQs is retrieved from the Firebase database.
FAQ
|
--- FAQNavBar
|
|
--- FAQs
|
--- CollapsibleHeader
|
--- CollapsibleQuestion
- Takes a question and answer as props.
- Renders a collapsible card for one FAQ question.
question
is the card header, andanswer
is the card body. The card can be opened/collapsed by toggling the icon on the left side. - Uses the
Collapse
transition supported byreact-bootstrap
.
type Props = {
readonly question: string;
readonly answer: string;
};
- Takes a header name and array of FAQs as props.
- Renders a collapsible card containing a list of
CollapsibleQuestion
components representing the FAQs.headerName
is the card header, i.e. the title of the FAQ section, and the card body is a list of FAQ questions. The card be opened/collapsed to show the FAQs by toggling the icon on the left side. - Uses the
Collapse
transition supported byreact-bootstrap
.
type Props = {
readonly headerName: string;
readonly faqs: FAQ[];
};
export type FAQ = {
question: string;
answer: string;
};
- Takes an array of
FAQData
as props. - Renders a list of
CollapsibleHeader
components representing different FAQ sections.
type Props = {
readonly data: FAQData[];
};
export type FAQData = {
headerName: string;
faqs: FAQ[];
};
- Renders the navigation bar on the FAQ page with a button that links to the Reviews page.