Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // DEPENDENCIES
- import { React, useState } from 'react';
- import { Formik, Form, Field } from 'formik';
- // COMPONENTS
- import PageOuterWrapper from '../../components/page-outer-wrapper/PageOuterWrapper';
- import Header from '../../components/header-component/Header';
- import CustomCheck from './CustomCheckbox';
- // STYLES
- import "../../styles/hideAdSpace.css";
- import styles from './Style_SurveyPage';
- // HELPERS
- import { useMediaQuery, mobileQuery } from "../../helpers/mediaQuery";
- const SurveyPage = () => {
- let isMobile = useMediaQuery(mobileQuery);
- const[answer, setAnswer] = useState();
- const labels = ['Answer number 1',
- 'Answer number 2',
- 'Answer number 3',
- 'Answer number 4',
- 'Answer number 5'];
- return (
- <PageOuterWrapper>
- <div style={isMobile ? styles.givingFeedbackMob : styles.givingFeedback} >
- <Header />
- <h3 style={isMobile ? styles.h3Mobile : styles.h3}>
- Feedback.exchange/SURVEY
- </h3>
- <Formik initialValues={{}}>
- <Form
- style={{
- ...isMobile && styles.mobileForm
- }}
- >
- <div
- style={{
- ...styles.wrapper,
- ...isMobile && styles.mobWrapper
- }}
- >
- <label style={isMobile ? styles.labelMobile : styles.label}>
- 1. Question
- </label>
- {labels.map((label, index) => {
- return <CustomCheck key={index} setAnswer={setAnswer} label={label} />
- })}
- </div>
- <div
- style={{
- ...styles.wrapper, paddingBottom: "4.5%",
- ...isMobile && styles.mobWrapper, paddingBottom: "3.75%",
- }}
- >
- <label
- style={{
- ...styles.label, padding: "4.53% 0% 2% 5.5%",
- ...isMobile && styles.labelMobile, padding: "3.9% 0% 1.5% 4.9%",
- }} >
- 2. Question
- </label>
- <Field
- style={{
- ...styles.textArea,
- ...isMobile && styles.textAreaMobile
- }}
- as="textarea"
- name="textarea"
- placeholder="Write your answer here"
- />
- </div>
- <div style={styles.btnDiv}>
- <button style={styles.btn}>SUBMIT</button>
- </div>
- </Form>
- </Formik>
- </div>
- </PageOuterWrapper>
- )
- }
- export default SurveyPage;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement