Create dummy dashboard in Home Page

Fixes TeamOpencampus#79

src/App.tsx

@@ -5,7 +5,7 @@ import { PostsPage } from './pages/dashboard/collage/PostsPage';
 import { ReportsPage } from './pages/dashboard/collage/ReportsPage';
 import { StudentsPage } from './pages/dashboard/collage/StudentsPage';
 import { DashboardPage } from './pages/dashboard/DashboardPage';
-import { HomePage } from './pages/dashboard/HomePage';
+import HomePage from './pages/dashboard/HomePage';
 import { JobFeedPage } from './pages/dashboard/JobFeedPage';
 import { MessagesPage } from './pages/dashboard/MessagesPage';
 import { NotificationPage } from './pages/dashboard/NotificationPage';

src/pages/dashboard/HomePage.tsx

@@ -1,12 +1,72 @@
-import { Box, Heading, Text } from '@chakra-ui/react';
+import {
+  Box,
+  chakra,
+  Flex,
+  SimpleGrid,
+  Stat,
+  StatLabel,
+  StatNumber,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import { Icon } from '@/components/Icon';
 
-export function HomePage() {
+interface StatsCardProps {
+  title: string;
+  stat: string;
+  icon: React.ReactNode;
+}
+function StatsCard(props: StatsCardProps) {
+  const { title, stat, icon } = props;
+  return (
+    <Stat
+      px={{ base: 2, md: 4 }}
+      py={'5'}
+      border={'1px solid'}
+      borderColor={useColorModeValue('gray.800', 'gray.500')}
+      rounded={'lg'}
+    >
+      <Flex justifyContent={'space-between'}>
+        <Box pl={{ base: 2, md: 4 }}>
+          <StatLabel fontWeight={'medium'}>{title}</StatLabel>
+          <StatNumber fontSize={'2xl'} fontWeight={'medium'}>
+            {stat}
+          </StatNumber>
+        </Box>
+        <Box
+          my={'auto'}
+          color={useColorModeValue('gray.800', 'gray.200')}
+          alignContent={'center'}
+        >
+          {icon}
+        </Box>
+      </Flex>
+    </Stat>
+  );
+}
+
+export default function HomePage() {
   return (
-    <Box>
-      <Heading>Home Page</Heading>
-      <Text>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, ab.
-      </Text>
+    <Box maxW='7xl' mx={'auto'} pt={5} px={{ base: 2, sm: 12, md: 17 }}>
+      <chakra.h1
+        textAlign={'left'}
+        fontSize={'4xl'}
+        py={10}
+        fontWeight={'bold'}
+      >
+        Home Page
+      </chakra.h1>
+      <SimpleGrid columns={{ base: 1, md: 3 }} spacing={{ base: 5, lg: 8 }}>
+        <StatsCard
+          title={'Job Applied'}
+          stat={'12'}
+          icon={<Icon name='date_range' style={{ fontSize: '3em' }} />}
+        />
+        <StatsCard
+          title={'Selected In'}
+          stat={'3'}
+          icon={<Icon name='check_circle' style={{ fontSize: '3em' }} />}
+        />
+      </SimpleGrid>
     </Box>
   );
 }