Add photograph and document scanner pages

1 files changed, 39 insertions, 0 deletions

diff --git a/src/pages/PhotoCapture/PhotoCapture.jsx b/src/pages/PhotoCapture/PhotoCapture.jsx
new file mode 100644
index 0000000..c16b4d0
--- /dev/null
+++ b/src/pages/PhotoCapture/PhotoCapture.jsx
@@ -0,0 +1,39 @@
+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