Add error page

Author: imhardikdesai

src/Pages/Error/ErrorPage.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Box, Heading, Text, Button } from '@chakra-ui/react';
+
+
+const ErrorPage = () => {
+    return (
+        <>
+            <Box mt={'32'} textAlign="center" py={10} px={6}>
+                <Heading
+                    display="inline-block"
+                    as="h2"
+                    size="2xl"
+                    bgGradient="linear(to-r, teal.400, teal.600)"
+                    backgroundClip="text">
+                    404
+                </Heading>
+                <Text fontSize="18px" mt={3} mb={2}>
+                    Template Not Found
+                </Text>
+                <Text color={'gray.500'} mb={6}>
+                    This Page Resume Template is under build, coming soon....
+                </Text>
+
+                <Button
+                    onClick={() => window.location.reload()}
+                    colorScheme="teal"
+                    bgGradient="linear(to-r, teal.400, teal.500, teal.600)"
+                    color="white"
+                    variant="solid">
+                    Select Another Template
+                </Button>
+            </Box>
+        </>
+    )
+}
+
+export default ErrorPage

src/Pages/Home/Home.jsx

@@ -3,7 +3,7 @@ import Introduction from '../../Components/Intro/Introduction'
 import ResumeContext from '../../Context/ResumeContext';
 import BuilderArea from '../BuilderArea';
 import Theme1 from './../../Theme/Theme1/Theme1'
-import Theme2 from './../../Theme/Theme2/Theme2'
+import ErrorPage from '../Error/ErrorPage';
 
 const Home = () => {
     const { currentTheme, showComponent, themeData, componentRef } = useContext(ResumeContext);
@@ -17,13 +17,13 @@ const Home = () => {
                 (showComponent && currentTheme === 'Theme1') && <BuilderArea theme={<Theme1 componentRef={componentRef} themeData={themeData} />} />
             }
             {
-                (showComponent && currentTheme === 'Theme2') && <BuilderArea theme={<Theme2 componentRef={componentRef} themeData={themeData} />} />
+                (showComponent && currentTheme === 'Theme2') && <ErrorPage />
             }
             {
-                (showComponent && currentTheme === 'Theme3') && <BuilderArea theme={<Theme2 componentRef={componentRef} themeData={themeData} />} />
+                (showComponent && currentTheme === 'Theme3') && <ErrorPage />
             }
             {
-                (showComponent && currentTheme === 'Theme4') && <BuilderArea theme={<Theme2 componentRef={componentRef} themeData={themeData} />} />
+                (showComponent && currentTheme === 'Theme4') && <ErrorPage />
             }
         </>
     )

src/Theme/Theme1/Theme1.jsx

@@ -7,7 +7,7 @@ import { BsFillTelephoneFill } from 'react-icons/bs'
 import ResumeContext from '../../Context/ResumeContext'
 
 const Theme1 = (props) => {
-    const { checkProj, checkWork } = useContext(ResumeContext)
+    const { checkProj, checkWork, checkAward } = useContext(ResumeContext)
     const { themeData, componentRef } = props;
     const { name, profile, address, phone, email, skill } = themeData.personalData;
     const { projectTitles, projectDesc } = themeData.projectData;
@@ -145,22 +145,25 @@ const Theme1 = (props) => {
                         </section>
                     }
                     {/* Award & Achievement */}
-                    <section id="awards" className='my-2'>
-                        <Heading bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
-                            AWARDS & ACHIEVEMENTS
-                        </Heading>
+                    {
+                        !checkAward &&
+                        <section id="awards" className='my-2'>
+                            <Heading bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
+                                AWARDS & ACHIEVEMENTS
+                            </Heading>
 
-                        <Box id='award-set' className='basic-set d-flex justify-content-between align-items-center'>
-                            <div>
-                                {
-                                    awards.split(',').map((element, index) => {
-                                        return <li key={index}>{element}</li>
-                                    })
-                                }
+                            <Box id='award-set' className='basic-set d-flex justify-content-between align-items-center'>
+                                <div>
+                                    {
+                                        awards.split(',').map((element, index) => {
+                                            return <li key={index}>{element}</li>
+                                        })
+                                    }
 
-                            </div>
-                        </Box>
-                    </section>
+                                </div>
+                            </Box>
+                        </section>
+                    }
                 </div>
             </div>
         </>