+
+
+ {progressBarElement}
+
+
+
+ );
+};
+
+const WizardStep: React.FunctionComponent<
+ {
+ as?: 'form' | 'div';
+ onSubmit?: (
+ event: React.FormEvent
+
+
+ {stepElements.map((step, index) => {
+ return (
+ {
+ stepOuterRef.current[index] = ref;
+ }}
+ >
+ {
+ stepOuterRef.current[index] = ref;
+ }}
+ >
+
+
+
+
+
+
+ );
+ })}
+
+ {
+ stepInnerRef.current[index] = ref;
+ }}
+ >
+ {step}
+
+ {children}
;
+ } else {
+ const handleFormSubmit: React.FormEventHandler
+ {value === 'student' ? (
+ <>
+
+
+
+
+ {value === 'parent' ? (
+
+
+
+ Welcome to Brainly, YourUsername
+
+
+ {countdown > 0
+ ? `Redirecting to your question in... ${countdown}s`
+ : null}
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const CreateAccountStory = () => {
+ const [isCompleted, setIsCompleted] = React.useState(false);
+ const years = React.useMemo(() => {
+ const arr = [];
+
+ for (let i = 10; i <= 100; i++) {
+ arr.push({
+ label: i.toString(),
+ value: i.toString(),
+ });
+ }
+
+ return arr;
+ }, []);
+
+ const onComplete = () => {
+ setIsCompleted(true);
+ };
+
+ const [age, setAge] = React.useState([]);
+
+ const handleAgeChange = React.useCallback(option => {
+ setAge([option]);
+ }, []);
+
+ const [country, setCountry] = React.useState([]);
+
+ const handleCountryChange = React.useCallback(option => {
+ setCountry([option]);
+ }, []);
+
+ const [avatarImage, setAvatarImage] = React.useState(
+ 'images/pinguin_avatar.png'
+ );
+
+ const handleRandomize = React.useCallback(() => {
+ setAvatarImage('images/cat.png');
+ }, []);
+
+ return isCompleted ? (
+
+
+