feat: basic layout for different sections

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",

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 (
+    <Card>
+      <Container my={30}>
+        <Paper mt="xl" mb="md">
+          <TextInput placeholder="Comment here..." required />
+          <Group position="apart" mt="lg" className={classes.controls}>
+            <Anchor color="dimmed" size="sm" className={classes.control}></Anchor>
+            <Button className={classes.control}>Comment</Button>
+          </Group>
+        </Paper>
+        <Paper withBorder radius="md" className={classes.comment}>
+          <Group>
+            <Avatar src={comment.author.image} alt={comment.author.name} radius="xl" />
+            <div>
+              <Text size="sm">{comment.author.name}</Text>
+              <Text size="xs" color="dimmed">
+                {comment.postedAt}
+              </Text>
+            </div>
+          </Group>
+          <Text className={classes.body} size="sm">
+            {comment.body}
+          </Text>
+        </Paper>
+      </Container>
+    </Card>
+  );
+};
+export default Comments;

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 (
+    <Container>
+      <TextInput
+        mb={30}
+        sx={{ flexBasis: '40%', borderColor: 'teal' }}
+        placeholder="Search here..."
+        icon={<IconSearch size={16} />}
+        value={query}
+        onChange={(e) => setQuery(e.currentTarget.value)}
+      />
+
+      {pageRecords.map((item: any) => {
+        return (
+          <Box
+            //   component="a"
+            //   width={100}
+            key={item.id}
+            onClick={() => {
+              console.log(item.id);
+              navigate(item.id);
+            }}
+            p={10}
+            mb={20}
+            className={classes.box}
+          >
+            <Text align="left" p={5}>
+              {item.question}
+            </Text>
+          </Box>
+        );
+      })}
+      <div>
+        <Pagination
+          //   mt={100}
+          total={10}
+          position="center"
+          onChange={(index) => {
+            // console.log(page)
+            setPage(index);
+          }}
+          styles={(theme) => ({
+            item: {
+              '&[data-active]': {
+                backgroundImage: theme.fn.gradient({ from: 'red', to: 'yellow' }),
+              },
+            },
+          })}
+        />
+      </div>
+    </Container>
+  );
+};
+export default HrRound;

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?',
+  },
+];

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();
   };
 

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 */}
       <Routes>
         {/* <Route path="/" element={<Navigate to="hr" />} /> */}
-        <Route
-          path="hr"
-          element={
-            <Text align="center" fz={40} fw={600}>
-              HR Round Questions
-            </Text>
-          }
-        />
+        <Route path="hr" element={<HrRound />} />
+        <Route path="hr/:queId" element={<QuestionContent />} />
         <Route path="/" element={<Navigate to="/login" />} />
         <Route path="/login" element={<Login />} />
         <Route path="/register" element={<Register />} />