From 0fc517e641f919c9f2d3c5ba5c990af8b8ecd2b5 Mon Sep 17 00:00:00 2001 From: Gaurav-Verma07 Date: Sat, 17 Dec 2022 11:47:12 +0530 Subject: [PATCH] feat: basic layout for different sections --- frontend/package-lock.json | 2 +- frontend/package.json | 1 + frontend/src/components/Comments/Comments.tsx | 84 +++++++++++ frontend/src/components/HrRound/HrRound.tsx | 103 +++++++++++++ .../src/components/HrRound/HrRoundData.ts | 49 +++++++ frontend/src/components/Login/Login.tsx | 1 + frontend/src/components/Main/Main.tsx | 12 +- .../QuestionContent/QuestionContent.tsx | 135 ++++++++++++++++++ 8 files changed, 378 insertions(+), 9 deletions(-) create mode 100644 frontend/src/components/Comments/Comments.tsx create mode 100644 frontend/src/components/HrRound/HrRound.tsx create mode 100644 frontend/src/components/HrRound/HrRoundData.ts create mode 100644 frontend/src/components/QuestionContent/QuestionContent.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 8833370..0e47f2c 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@mantine/core": "^5.9.4", "@mantine/form": "^5.9.4", + "@mantine/hooks": "^5.9.4", "@tabler/icons": "^1.117.0", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -978,7 +979,6 @@ "version": "5.9.4", "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-5.9.4.tgz", "integrity": "sha512-W6RR6fLKh0gPnIA+HLnJ3NRbgnlhbjsajug+Fhhs+CE6z1528ROI63OZ9s5NIAUj/aATkEyJA64P/V/yXYZ69A==", - "peer": true, "peerDependencies": { "react": ">=16.8.0" } diff --git a/frontend/package.json b/frontend/package.json index d3c8659..bd59ca3 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,6 +11,7 @@ "dependencies": { "@mantine/core": "^5.9.4", "@mantine/form": "^5.9.4", + "@mantine/hooks": "^5.9.4", "@tabler/icons": "^1.117.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/frontend/src/components/Comments/Comments.tsx b/frontend/src/components/Comments/Comments.tsx new file mode 100644 index 0000000..8853ea8 --- /dev/null +++ b/frontend/src/components/Comments/Comments.tsx @@ -0,0 +1,84 @@ +import { + Anchor, + Avatar, + Box, + Button, + Card, + Center, + Container, + createStyles, + Group, + Paper, + Text, + TextInput, + Title, +} from '@mantine/core'; + +const useStyles = createStyles((theme) => ({ + title: { + fontSize: 26, + fontWeight: 900, + fontFamily: `Greycliff CF, ${theme.fontFamily}`, + }, + + controls: { + [theme.fn.smallerThan('xs')]: { + flexDirection: 'column-reverse', + }, + }, + + control: { + [theme.fn.smallerThan('xs')]: { + width: '100%', + textAlign: 'center', + }, + }, + comment: { + padding: `${theme.spacing.lg}px ${theme.spacing.xl}px`, + }, + body: { + paddingLeft: 54, + paddingTop: theme.spacing.sm, + }, +})); + +const comment = { + postedAt: '10 minutes ago', + body: 'This article is so accurate. It helped me land a job in Mars.', + author: { + name: 'Baburao', + image: + 'https://images.unsplash.com/photo-1624298357597-fd92dfbec01d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=250&q=80', + }, +}; +const Comments = ({ id }: any) => { + const { classes } = useStyles(); + return ( + + + + + + + + + + + + +
+ {comment.author.name} + + {comment.postedAt} + +
+ + + {comment.body} + + + + + ); +}; +export default Comments; diff --git a/frontend/src/components/HrRound/HrRound.tsx b/frontend/src/components/HrRound/HrRound.tsx new file mode 100644 index 0000000..f9d41ab --- /dev/null +++ b/frontend/src/components/HrRound/HrRound.tsx @@ -0,0 +1,103 @@ +import { Box, Container, createStyles, Pagination, Text, TextInput, ThemeIcon } from '@mantine/core'; +import { useDebouncedValue, usePagination } from '@mantine/hooks'; +import { useEffect, useState } from 'react'; +import React from 'react'; +import { data } from './HrRoundData'; +import { useNavigate } from 'react-router-dom'; +import { IconSearch } from '@tabler/icons'; +const useStyles = createStyles((theme) => { + return { + box: { + transition: 'all .3s', + color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.teal, + backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : '#fff', + boxShadow: theme.shadows.sm, + borderRadius: theme.radius.md, + cursor: 'pointer', + '&:hover': { + transform: 'translateY(-2px)', + }, + }, + }; +}); + +const PAGE_SIZE = 7; + +const HrRound = () => { + const { classes } = useStyles(); + const [page, setPage] = useState(1); + const [pageRecords, setPageRecords] = useState(data.slice(0, PAGE_SIZE)); + const navigate = useNavigate(); + const [query, setQuery] = useState(''); + const [debouncedQuery] = useDebouncedValue(query, 200); + + useEffect(() => { + setPageRecords( + data.filter(({ question }) => { + if (debouncedQuery !== '' && !`${question} `.toLowerCase().includes(debouncedQuery.trim().toLowerCase())) { + return false; + } + return true; + }), + ); + }, [debouncedQuery]); + + useEffect(() => { + const from = (page - 1) * PAGE_SIZE; + const to = from + PAGE_SIZE; + setPageRecords(data.slice(from, to)); + }, [page]); + + return ( + + } + value={query} + onChange={(e) => setQuery(e.currentTarget.value)} + /> + + {pageRecords.map((item: any) => { + return ( + { + console.log(item.id); + navigate(item.id); + }} + p={10} + mb={20} + className={classes.box} + > + + {item.question} + + + ); + })} +
+ { + // console.log(page) + setPage(index); + }} + styles={(theme) => ({ + item: { + '&[data-active]': { + backgroundImage: theme.fn.gradient({ from: 'red', to: 'yellow' }), + }, + }, + })} + /> +
+ + ); +}; +export default HrRound; diff --git a/frontend/src/components/HrRound/HrRoundData.ts b/frontend/src/components/HrRound/HrRoundData.ts new file mode 100644 index 0000000..a5927ae --- /dev/null +++ b/frontend/src/components/HrRound/HrRoundData.ts @@ -0,0 +1,49 @@ +export const data = [ + { + id: 'iwoefiwbe', + question: 'Tell me about yourself.', + basic: + 'This is the universal question asked at the very first of any interview. It sounds easy, right? But this is the most important question where the candidates fail to create an impression with the interviewer as most of the time they are not aware of what exactly needs to be said.', + tips: [ + 'Do not ask the interviewer what he wants to know about you. You may be asking genuinely, but that just sounds rude.', + 'Do not speak what is already there in the resume. The interviewer wants to know what they have not seen on the resume. And do not speak about anything personal.', + 'Introduce yourself by including certain adjectives like problem-solving, innovation and tech-savvy, creative, quick learner, etc. that best describe you in your professional life to boost your chances.', + 'You can also tell why you want the position and how the job is going to be perfect for you.', + 'Focus only on your strengths that are relatable to the work.', + ], + sample: + 'I am an energetic person, an effective communicator, and a quick learner. I was also one of the top students in my batch while I was pursuing a B.E degree in the XYZ domain. I worked on various projects related to the software domain which provided me a great deal of technical exposure along with the importance of working in a team and the value of client satisfaction. I have worked on developing various enterprise-level web applications for helping companies solve problems like ensuring business continuity, market research analysis, etc. So, I believe I am a good fit for technology-centric roles in your company.', + }, + { + id: 'oiwnfwevn', + question: 'Why do you want to work for our company?', + }, + { + id: 'woeiviowve', + question: 'What are your greatest strengths and weaknesses?', + }, + { + id: 'wevwve', + question: 'Why are you looking for a change?', + }, + { + id: 'wevnowven', + question: 'Tell me about the gap in your resume', + }, + { + id: 'woeivowvbe', + question: 'How would you rate yourself on a scale of 1 to 10?', + }, + { + id: 'envoewnv', + question: 'What is your biggest achievement so far?', + }, + { + id: 'weivnwvne', + question: 'Where do you see yourself in 5 years?', + }, + { + id: '2i3hhhwih', + question: 'Why should we hire you?', + }, +]; diff --git a/frontend/src/components/Login/Login.tsx b/frontend/src/components/Login/Login.tsx index 917a442..4256be0 100644 --- a/frontend/src/components/Login/Login.tsx +++ b/frontend/src/components/Login/Login.tsx @@ -51,6 +51,7 @@ const Login = (props: PaperProps, propsButton: ButtonProps) => { const submitHandler = () => { console.log(form.values); + navigate('/hr'); login(); }; diff --git a/frontend/src/components/Main/Main.tsx b/frontend/src/components/Main/Main.tsx index 660a182..448b7e0 100644 --- a/frontend/src/components/Main/Main.tsx +++ b/frontend/src/components/Main/Main.tsx @@ -4,7 +4,9 @@ import { Navigate, Route, Routes } from 'react-router-dom'; // import Assignments from '../Assignments/Assignments'; // import Attandence from '../Attandence/Attandence'; import HomeNavbar from '../HomeNavbar/HomeNavbar'; +import HrRound from '../HrRound/HrRound'; import Login from '../Login/Login'; +import QuestionContent from '../QuestionContent/QuestionContent'; import Register from '../Register/Register'; // import MainHeader from '../MainHeader/MainHeader'; // import NoticeBoard from '../NoticeBoard/NoticeBoard'; @@ -23,14 +25,8 @@ const Home = () => { {/* Your application here */} {/* } /> */} - - HR Round Questions - - } - /> + } /> + } /> } /> } /> } /> diff --git a/frontend/src/components/QuestionContent/QuestionContent.tsx b/frontend/src/components/QuestionContent/QuestionContent.tsx new file mode 100644 index 0000000..85f8aad --- /dev/null +++ b/frontend/src/components/QuestionContent/QuestionContent.tsx @@ -0,0 +1,135 @@ +import { + Badge, + Blockquote, + Box, + Card, + Code, + createStyles, + Divider, + Group, + List, + Text, + Title, + useMantineTheme, +} from '@mantine/core'; +import { IconBallpen, IconFlame, IconHeart, IconMessage, IconSchool, IconShare } from '@tabler/icons'; +import { useState } from 'react'; +import { useParams } from 'react-router-dom'; +import Comments from '../Comments/Comments'; +import { data } from '../HrRound/HrRoundData'; +const useStyles = createStyles((theme) => ({ + main: { + width: 700, + margin: 'auto', + textAlign: 'left', + // color: 'dimmed', + }, + basicInfo: { + // display: 'flex', + // flexDirection: 'column', + // justifyContent: 'left', + }, + social: { + cursor: 'pointer', + }, + liked: { + // backgroundColor: 'red', + }, +})); + +const QuestionContent = () => { + const { classes, cx } = useStyles(); + const { queId } = useParams(); + const theme = useMantineTheme(); + const [isLiked, setIsLiked] = useState(false); + const [isComments, setIsComments] = useState(false); + console.log(queId); + let info = data.filter((item) => item.id === queId); + const queData = info[0]; + console.log(info); + + const socialSection = ( + + + + { + setIsLiked(!isLiked); + }} + /> + 4k + + + { + setIsComments(!isComments); + }} + /> + 30 + + + + + + + ); + return ( + + + + {queData.question} + + {queData.basic && ( + + + }>Basic Info + + + {queData.basic} + + + )} + {queData.tips && ( + + + }> + Pro Tips + + + + {queData.tips.map((tip, index) => ( + + {tip} + + ))} + + + )} + {queData.sample && ( + + + }> + Quick Response + + {' '} +
{queData.sample}
+ + )} + {/* */} + {socialSection} + {isComments && ( + + + + + )} + + + ); +}; + +export default QuestionContent;