73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
import { useState } from "react";
|
|
import { useSelector } from "react-redux";
|
|
import Header from "@/components/CompatibilityV2/components/Header";
|
|
import StepperBar from "@/components/CompatibilityV2/components/StepperBar";
|
|
import Title from "@/components/Title";
|
|
import Answer from "@/components/CompatibilityV2/components/Answer";
|
|
import styles from "./styles.module.scss";
|
|
import layoutCss from "@/routerComponents/Compatibility/v2/Layout/styles.module.css";
|
|
import stepperCss from "@/routerComponents/Compatibility/v2/StepperLayout/styles.module.scss";
|
|
import { selectors } from "@/store";
|
|
import { answerTimeOut } from "@/components/CompatibilityV2/data";
|
|
|
|
interface IReviewV4Props {
|
|
handleNext: () => void;
|
|
}
|
|
|
|
const OPTIONS: { id: string; title: string }[] = [
|
|
{ id: "nyt", title: "The New York Times" },
|
|
{ id: "forbes", title: "Forbes" },
|
|
{ id: "cosmopolitan", title: "Cosmopolitan" },
|
|
{ id: "oprah", title: "Oprah Daily" },
|
|
{ id: "social", title: "Social media" },
|
|
{ id: "other", title: "Other sources" },
|
|
];
|
|
|
|
function ReviewV4({ handleNext }: IReviewV4Props) {
|
|
const darkTheme = useSelector(selectors.selectDarkTheme);
|
|
const [selected, setSelected] = useState<string | null>(null);
|
|
|
|
const handleSelect = (id: string) => {
|
|
setSelected(id);
|
|
setTimeout(() => {
|
|
handleNext();
|
|
}, answerTimeOut);
|
|
};
|
|
|
|
return (
|
|
<main className={`${layoutCss.main} content`}>
|
|
<Header
|
|
className={layoutCss.header}
|
|
classNameTitle={layoutCss["header-title"]}
|
|
/>
|
|
<StepperBar
|
|
className={stepperCss["stepper-bar"]}
|
|
length={10}
|
|
currentStep={0.5}
|
|
color={darkTheme ? "#B2BCFF" : "#353E75"}
|
|
/>
|
|
<section className={layoutCss.page}>
|
|
<div className={styles.container}>
|
|
<Title variant="h2" className={styles.title}>
|
|
Where did you first hear about us?
|
|
</Title>
|
|
<p className={styles.description}>
|
|
Many people say they first learned about us through leading publications
|
|
and platforms.
|
|
</p>
|
|
{OPTIONS.map((option) => (
|
|
<Answer
|
|
key={option.id}
|
|
answer={option}
|
|
isSelected={selected === option.id}
|
|
onClick={() => handleSelect(option.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export default ReviewV4;
|