diff options
Diffstat (limited to 'src')
17 files changed, 329 insertions, 103 deletions
diff --git a/src/components/Input/Input.jsx b/src/components/Input/Input.jsx new file mode 100644 index 0000000..ee79f3b --- /dev/null +++ b/src/components/Input/Input.jsx @@ -0,0 +1,22 @@ +import React from 'react' +import styles from './Input.module.css' + +const Input = ({ label, id, value, type, name }) => { + return ( + <div className={styles.input}> + <div className={styles.input__container}> + <label htmlFor={id}>{label}</label> + <input + className={styles.input__field} + type={type} + id={id} + name={name} + value={value} + required + /> + </div> + </div> + ) +} + +export default Input diff --git a/src/components/Input/Input.module.css b/src/components/Input/Input.module.css new file mode 100644 index 0000000..cafb5f1 --- /dev/null +++ b/src/components/Input/Input.module.css @@ -0,0 +1,19 @@ +.input { + display: flex; + justify-content: center; + font-family: 'Barlow'; + font-size: var(--font-medium-s); +} + +.input__container { + display: flex; + flex-direction: column; +} + +.input__field { + width: 300px; + margin: 10px 0px; + padding: 20px 10px; + border: 3px solid; + border-radius: 10px; +} diff --git a/src/components/LabelCard/LabelCard.jsx b/src/components/LabelCard/LabelCard.jsx new file mode 100644 index 0000000..be02f01 --- /dev/null +++ b/src/components/LabelCard/LabelCard.jsx @@ -0,0 +1,23 @@ +import React from 'react' +import styles from './LabelCard.module.css' + +const LabelCard = ({ id, name, value, title, image }) => { + return ( + <div className={styles.labelcard}> + <label htmlFor={id} className={styles.card}> + <img className={styles.card__image} src={image} alt="" /> + <h4 className={styles.card__title}>{title}</h4> + </label> + <input + className={styles.labelcard__radio} + type="radio" + id={id} + name={name} + value={value} + required + /> + </div> + ) +} + +export default LabelCard diff --git a/src/components/LabelCard/LabelCard.module.css b/src/components/LabelCard/LabelCard.module.css new file mode 100644 index 0000000..8511596 --- /dev/null +++ b/src/components/LabelCard/LabelCard.module.css @@ -0,0 +1,19 @@ +.labelcard { + text-align: center; +} + +.card { + display: flex; + flex-direction: column; + align-items: center; + margin: 5px; +} + +.card__image { + border: 3px solid var(--color-black); + border-radius: 10px; +} + +.card__title { + margin: 5px 0px; +} diff --git a/src/pages/DocumentScanner/DocumentScanner.jsx b/src/pages/DocumentScanner/DocumentScanner.jsx deleted file mode 100644 index 2b757f4..0000000 --- a/src/pages/DocumentScanner/DocumentScanner.jsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react' -import Header from '../../components/Header/Header' -import CardScanner from '../../components/Card/CardScanner' -import styles from './DocumentScanner.module.css' -import { Button, Grid, Typography } from '@mui/material' -import SubmitButton from '../../components/SubmitButton/SubmitButton' - -const DocumentScanner = () => { - return ( - <><Header subheading="Enrollment" /> - <div className={styles.card__container}> - <CardScanner - image={`${process.env.PUBLIC_URL}/assets/images/document.svg`} /> - </div> - <Grid container columnSpacing={10} justifyContent="center"> - <Grid item> - <Button color="primary" size="large" type="submit" variant="contained"> - Scan - </Button> - </Grid> - <Grid item> - <Button color="primary" size="large" type="submit" variant="contained"> - Reset - </Button> - </Grid> - </Grid> - <br></br> - <div> - <Grid container justifyContent="center"> - <Typography align='center'> - Please place your document on the scanner.<br /> - Close the lid.<br /> - Wait for prompt to remove your document - </Typography> - </Grid> - </div> - <SubmitButton /> - - </> - ) -} - -export default DocumentScanner diff --git a/src/pages/Enrollment/Address/Address.jsx b/src/pages/Enrollment/Address/Address.jsx new file mode 100644 index 0000000..6a32bcf --- /dev/null +++ b/src/pages/Enrollment/Address/Address.jsx @@ -0,0 +1,47 @@ +import React from 'react' +import Header from '../../../components/Header/Header' +import Input from '../../../components/Input/Input' +import SubmitButton from '../../../components/SubmitButton/SubmitButton' + +import styles from './Address.module.css' + +const Address = () => { + return ( + <> + <Header subheading="Enrollment" /> + <div className={styles.address}> + <div className={styles.address__container}> + <Input + id="houseNo" + label="House Number/ Apartment" + value="house" + type="text" + /> + <Input + id="locality" + label="Area / Locality" + value="locality" + type="text" + /> + <Input id="town" label="Village / Town" value="town" type="text" /> + <Input + id="postOffice" + label="Post Office" + value="postOffice" + type="text" + /> + </div> + <div className={styles.address__container}> + <Input id="street" label="Street / Road" value="street" type="text" /> + <Input id="landmark" label="Landmark" value="landmark" type="text" /> + <Input id="district" label="District" value="district" type="text" /> + <Input id="pincode" label="Pincode" value="pincode" type="text" /> + </div> + </div> + <Input id="state" label="State" value="state" type="text" /> + <SubmitButton /> + </> + ) +} + +export default Address diff --git a/src/pages/Enrollment/Address/Address.module.css b/src/pages/Enrollment/Address/Address.module.css new file mode 100644 index 0000000..60958ba --- /dev/null +++ b/src/pages/Enrollment/Address/Address.module.css @@ -0,0 +1,8 @@ +.address { + display: flex; + justify-content: center; +} + +.address__container { + margin: 0px 20px; +} diff --git a/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx b/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx new file mode 100644 index 0000000..1ca2558 --- /dev/null +++ b/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx @@ -0,0 +1,56 @@ +import React from 'react' +import Header from '../../../components/Header/Header' +import CardScanner from '../../../components/Card/CardScanner' +import styles from './DocumentScanner.module.css' +import { Button, Grid, Typography } from '@mui/material' +import SubmitButton from '../../../components/SubmitButton/SubmitButton' + +const DocumentScanner = () => { + return ( + <> + <Header subheading="Enrollment" /> + <div className={styles.card__container}> + <CardScanner + image={`${process.env.PUBLIC_URL}/assets/images/document.svg`} + /> + </div> + <Grid container columnSpacing={10} justifyContent="center"> + <Grid item> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + > + Scan + </Button> + </Grid> + <Grid item> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + > + Reset + </Button> + </Grid> + </Grid> + <br></br> + <div> + <Grid container justifyContent="center"> + <Typography align="center"> + Please place your document on the scanner. + <br /> + Close the lid. + <br /> + Wait for prompt to remove your document + </Typography> + </Grid> + </div> + <SubmitButton /> + </> + ) +} + +export default DocumentScanner diff --git a/src/pages/DocumentScanner/DocumentScanner.module.css b/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css index ec59f61..ec59f61 100644 --- a/src/pages/DocumentScanner/DocumentScanner.module.css +++ b/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css diff --git a/src/pages/Enrollment/FormOne/FormOne.jsx b/src/pages/Enrollment/FormOne/FormOne.jsx index 7233581..4ba274c 100644 --- a/src/pages/Enrollment/FormOne/FormOne.jsx +++ b/src/pages/Enrollment/FormOne/FormOne.jsx @@ -1,4 +1,6 @@ import React from 'react' +import Input from '../../../components/Input/Input' +import LabelCard from '../../../components/LabelCard/LabelCard' import styles from './FormOne.module.css' const FormOne = () => { @@ -27,20 +29,41 @@ const FormOne = () => { </span> </div> - <div className={styles.formone__fullname}> - <label htmlFor="fullName">Full Name</label> - <input - type="text" - id="fullName" - name="fullName" - value="Full Name" - required + <Input type="text" id="fullName" label="Full Name" value="Full Name" /> + + <div className={styles.formone__gender}> + <LabelCard + id="male" + name="gender" + title="Male" + image={`${process.env.PUBLIC_URL}/assets/images/male.svg`} + /> + <LabelCard + id="female" + name="gender" + value="female" + title="Female" + image={`${process.env.PUBLIC_URL}/assets/images/female.svg`} + /> + <LabelCard + id="trans" + name="gender" + value="trans" + title="Transgender" + image={`${process.env.PUBLIC_URL}/assets/images/trans.svg`} /> </div> <div className={styles.formone__dob}> <label htmlFor="dob">Date of Birth</label> - <input type="date" id="dob" name="dob" value="Date of Birth" required /> + <input + className={styles.formone__dob_input} + type="date" + id="dob" + name="dob" + value="Date of Birth" + required + /> </div> </div> ) diff --git a/src/pages/Enrollment/FormOne/FormOne.module.css b/src/pages/Enrollment/FormOne/FormOne.module.css index 6fbe371..35d1e49 100644 --- a/src/pages/Enrollment/FormOne/FormOne.module.css +++ b/src/pages/Enrollment/FormOne/FormOne.module.css @@ -22,12 +22,25 @@ height: 1.5rem; } -.formone__fullname { +.formone__gender { + display: flex; +} + +.formone__dob { display: flex; flex-direction: column; } -#fullName { - margin: 10px; - padding: 20px 10px; +.formone__dob input[type='date']::-webkit-calendar-picker-indicator { + width: 30px; + height: 30px; + margin: 0; +} + +.formone__dob_input { + width: 300px; + margin: 10px 0px; + padding: 11px 10px; + border: 3px solid; + border-radius: 10px; } diff --git a/src/pages/Enrollment/FormTwo/FormTwo.jsx b/src/pages/Enrollment/FormTwo/FormTwo.jsx new file mode 100644 index 0000000..56bcd70 --- /dev/null +++ b/src/pages/Enrollment/FormTwo/FormTwo.jsx @@ -0,0 +1,17 @@ +import React from 'react' +import Input from '../../../components/Input/Input' +import Header from '../../../components/Header/Header' +import SubmitButton from '../../../components/SubmitButton/SubmitButton' + +const FormTwo = () => { + return ( + <div className="formtwo"> + <Header subheading="Enrollment" /> + <Input id="mobile" value="Mobile" label="Mobile" type="text" /> + <Input id="email" value="Email" label="Email" type="email" /> + <SubmitButton /> + </div> + ) +} + +export default FormTwo diff --git a/src/pages/Enrollment/FormTwo/FormTwo.module.css b/src/pages/Enrollment/FormTwo/FormTwo.module.css new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/src/pages/Enrollment/FormTwo/FormTwo.module.css @@ -0,0 +1 @@ + diff --git a/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx b/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx new file mode 100644 index 0000000..0b30848 --- /dev/null +++ b/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx @@ -0,0 +1,52 @@ +import React from 'react' +import Header from '../../../components/Header/Header' +import CardScanner from '../../../components/Card/CardScanner' +import styles from './PhotoCapture.module.css' +import { Button, Grid, Typography } from '@mui/material' + +const PhotoCapture = () => { + return ( + <> + <Header subheading="Enrollment" /> + <div className={styles.card__container}> + <CardScanner + image={`${process.env.PUBLIC_URL}/assets/images/capture.svg`} + /> + </div> + <Grid container columnSpacing={10} justifyContent="center"> + <Grid item> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + > + Capture + </Button> + </Grid> + <Grid item> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + > + Reset + </Button> + </Grid> + </Grid> + <br></br> + <div> + <Grid container justifyContent="center"> + <Typography align="center"> + Please look into the camera<br></br> + Click Capture to Capture the photo<br></br> + Click Reset the remove the captured photo + </Typography> + </Grid> + </div> + </> + ) +} + +export default PhotoCapture diff --git a/src/pages/PhotoCapture/PhotoCapture.module.css b/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css index ec59f61..ec59f61 100644 --- a/src/pages/PhotoCapture/PhotoCapture.module.css +++ b/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css diff --git a/src/pages/PhotoCapture/PhotoCapture.jsx b/src/pages/PhotoCapture/PhotoCapture.jsx deleted file mode 100644 index c16b4d0..0000000 --- a/src/pages/PhotoCapture/PhotoCapture.jsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react' -import Header from '../../components/Header/Header' -import CardScanner from '../../components/Card/CardScanner' -import styles from './PhotoCapture.module.css' -import { Button, Grid, Typography } from '@mui/material' - -const PhotoCapture = () => { - return ( - <><Header subheading="Enrollment" /> - <div className={styles.card__container}> - <CardScanner - image={`${process.env.PUBLIC_URL}/assets/images/capture.svg`} /> - </div> - <Grid container columnSpacing={10} justifyContent="center"> - <Grid item> - <Button color="primary" size="large" type="submit" variant="contained"> - Capture - </Button> - </Grid> - <Grid item> - <Button color="primary" size="large" type="submit" variant="contained"> - Reset - </Button> - </Grid> - </Grid> - <br></br> - <div> - <Grid container justifyContent="center"> - <Typography align='center'>Please look into the camera<br></br> - Click Capture to Capture the photo<br></br> - Click Reset the remove the captured photo</Typography> - </Grid> - </div> - - </> - ) -} - -export default PhotoCapture diff --git a/src/routes/index.js b/src/routes/index.js index 2a2669b..fc2aeea 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -4,8 +4,10 @@ import { Route, Routes } from 'react-router-dom' import Home from '../pages/Home/Home' import Enrollment from '../pages/Enrollment/Enrollment' import Update from '../pages/Update/Update' -import PhotoCapture from '../pages/PhotoCapture/PhotoCapture' -import DocumentScanner from '../pages/DocumentScanner/DocumentScanner' +import PhotoCapture from '../pages/Enrollment/PhotoCapture/PhotoCapture' +import DocumentScanner from '../pages/Enrollment/DocumentScanner/DocumentScanner' +import FormTwo from '../pages/Enrollment/FormTwo/FormTwo' +import Address from '../pages/Enrollment/Address/Address' const Index = () => { return ( @@ -13,16 +15,22 @@ const Index = () => { <Route exact path="/" element={<Home />} /> <Route path="enrollment"> <Route index element={<Enrollment />} /> + <Route path="form2"> + <Route index element={<FormTwo />} /> + </Route> + <Route path="address"> + <Route index element={<Address />} /> + </Route> + <Route path="photo"> + <Route index element={<PhotoCapture />} /> + </Route> + <Route path="documents"> + <Route index element={<DocumentScanner />} /> + </Route> </Route> <Route path="update"> <Route index element={<Update />} /> </Route> - <Route path="photo"> - <Route index element={<PhotoCapture />} /> - </Route> - <Route path="documents"> - <Route index element={<DocumentScanner />} /> - </Route> </Routes> ) } |