fix: eslint

Gaurav-Verma07 · Mar 31, 2023 · 5125be8 · 5125be8 · vercel · Mar 31, 2023
2 parents 3da1113 + f03e74c
commit 5125be8
Show file tree

Hide file tree

Showing 11 changed files with 592 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.tsx b/src/App.tsx
@@ -18,7 +18,7 @@ function App() {
         <Route path="/register" element={<RegisterPage />} />
         <Route path="/admin" element={<Admin />} />
         <Route path="/provider/*" element={<Provider />} />
-        <Route path="/seeker" element={<Seeker />} />
+        <Route path="/seeker/*" element={<Seeker/>} />
       </Routes>
     </div>
   );

diff --git a/src/Pages/Provider/index.tsx b/src/Pages/Provider/index.tsx
@@ -9,7 +9,7 @@ const Provider = () => {
   return (
     <AppShell
       padding="md"
-      navbar={<HomeNavbar />}
+      navbar={<HomeNavbar/>}
       header={<MainHeader />}
       styles={(theme) => ({
         main: {

diff --git a/src/Pages/Seeker/index.tsx b/src/Pages/Seeker/index.tsx
@@ -1,12 +1,40 @@
-import { Box, Text } from '@mantine/core';
+import { AppShell } from '@mantine/core';
+import { Route, Routes } from 'react-router';
+import MainHeader from '../../components/MainHeader/MainHeader';
+import HomeNavbar from '../../components/SeekerNavbar/Navbar';
+// import ProviderCollegeTeam from '../../components/ProviderCollegeTeam/ProviderCollegeTeam';
+import SeekerMain from '../../components/SeekerMain/SeekerMain';
+import ProgramSection from '../../components/SeekerProgramSection/ProgramSection';
 
 const Seeker = () => {
+  // console.log(process.env.REACT_APP_GOOGLE_API_KEY);
+
   return (
-    <Box>
-      <Text color="teal" align="center">
-        Welcome to Seeker side
-      </Text>
-    </Box>
+    <AppShell
+      padding="md"
+      navbar={<HomeNavbar/>}
+      header={<MainHeader />}
+      styles={(theme) => ({
+        main: {
+          backgroundColor:
+            theme.colorScheme === 'dark'
+              ? theme.colors.dark[8]
+              : theme.colors.gray[0],
+        },
+      })}
+    >
+      <Routes>
+        {/* <Route path="/*" element={<ProviderMain />} /> */}
+        <Route path="home" element={<SeekerMain />} />
+        <Route path="program" element={<ProgramSection/>} />
+        {/* <Route path="team" element={<ProviderCollegeTeam />} /> */}
+        {/* <Route path="assignments" element={<Assignments />} /> */}
+      </Routes>
+      {/* <ProviderMain /> */}
+
+      {/* <ProviderMain/> */}
+      {/* Your application here */}
+    </AppShell>
   );
 };
 

diff --git a/src/components/MainHeader/MainHeader.tsx b/src/components/MainHeader/MainHeader.tsx
@@ -3,13 +3,10 @@ import { useDisclosure } from '@mantine/hooks';
 import { NavLink } from 'react-router-dom';
 import useStyles from './styles';
 
-interface HeaderSimpleProps {
-  links: { link: string; label: string }[];
-}
 
 const MainHeader = () => {
   const [opened, { toggle }] = useDisclosure(false);
-  const { classes, cx } = useStyles();
+  const { classes } = useStyles();
 
   return (
     <Header height={60} mb={120}>

diff --git a/src/components/SeekerMain/SeekerMain.tsx b/src/components/SeekerMain/SeekerMain.tsx
@@ -0,0 +1,142 @@
+import {
+  createStyles,
+  Card,
+  Avatar,
+  Text,
+  Group,
+  Button,
+  Table,
+  Badge,
+} from '@mantine/core';
+import SeekerStats from '../SeekerStats/SeekerStats';
+import { data } from './data';
+
+const useStyles = createStyles((theme) => ({
+  card: {
+    backgroundColor: ' #F8F9FA',
+
+    //  theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
+    width: '50%',
+    margin: '0 auto',
+  },
+
+  avatar: {
+    border: `2px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white
+    }`,
+  },
+  tableRow: {
+    borderBottom: 'none !important',
+  },
+}));
+
+interface UserCardImageProps {
+  image: string;
+  avatar: string;
+  name: string;
+  job: string;
+  stats: { label: string; value: string }[];
+}
+
+const SeekerMain = () => {
+  const { classes, theme } = useStyles();
+
+  const items = data.stats.map((stat: any) => (
+    <div key={stat.label}>
+      <Text align="center" size="lg" weight={500}>
+        {stat.value}
+      </Text>
+      <Text align="center" size="sm" color="dimmed">
+        {stat.label}
+      </Text>
+    </div>
+  ));
+
+  return (
+    <Card>
+      <Card p="xl" radius="md" className={classes.card}>
+        {/* <Card.Section  /> */}
+        <Avatar size={100} radius={100} mx="auto" className={classes.avatar} />
+        {/* <Text align="center" size="lg" weight={500} mt="sm">
+        {data.name}
+      </Text>
+      <Text align="center" size="sm" color="dimmed">
+        {data.job}
+      </Text>
+      <Group mt="md" position="center" spacing={30}>
+        {items}
+      </Group>
+      <Button fullWidth radius="md" mt="xl" size="md" color={theme.colorScheme === 'dark' ? undefined : 'dark'}>
+        Follow
+      </Button> */}
+        <Table
+          verticalSpacing="md"
+          className={classes.tableRow}
+          sx={{ width: 500 }}
+        >
+          <tbody>
+            <tr>
+              <td className={classes.tableRow}>
+                <Group spacing="sm" position="apart">
+                  <Text size="md">Name of NGO/slum</Text>
+                  <Text size="md">The Smile Foundation</Text>
+                </Group>
+              </td>
+            </tr>
+            <tr>
+              <td className={classes.tableRow}>
+                <Group spacing="sm" position="apart">
+                  <Text size="md">Name of representative</Text>
+                  <Text size="md">Rishabh Jain</Text>
+                </Group>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <Group spacing="sm" position="apart">
+                  <Text size="md">Designation</Text>
+                  <Badge
+                    size="xl"
+                    variant="gradient"
+                    gradient={{ from: 'teal', to: 'lime', deg: 105 }}
+                  >
+                    Volunteer
+                  </Badge>
+                  {/* <Text size="md" color= "red">Volunteer</Text> */}
+                </Group>
+              </td>
+            </tr>
+
+            <tr>
+              <td>
+                <Group spacing="sm" position="apart">
+                  <Text size="md">City</Text>
+                  <Text size="md">Lucknow</Text>
+                </Group>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <Group spacing="sm" position="apart">
+                  <Text size="md">Email Address:</Text>
+                  <Text size="md">rishabh@gmail.com</Text>
+                </Group>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <Group spacing="sm" position="apart">
+                  <Text size="md">Phone Number:</Text>
+                  <Text size="md">1234567890</Text>
+                </Group>
+              </td>
+            </tr>
+          </tbody>
+        </Table>
+      </Card>
+      <SeekerStats />
+    </Card>
+  );
+};
+
+export default SeekerMain;
diff --git a/src/components/SeekerMain/data.ts b/src/components/SeekerMain/data.ts
@@ -0,0 +1,22 @@
+export const data: any = {
+  image:
+    'https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80',
+  avatar:
+    'https://images.unsplash.com/photo-1623582854588-d60de57fa33f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=250&q=80',
+  name: 'Bill Headbanger',
+  job: 'Fullstack engineer',
+  stats: [
+    {
+      value: '34K',
+      label: 'Followers',
+    },
+    {
+      value: '187',
+      label: 'Follows',
+    },
+    {
+      value: '1.6K',
+      label: 'Posts',
+    },
+  ],
+};
diff --git a/src/components/SeekerNavbar/Navbar.tsx b/src/components/SeekerNavbar/Navbar.tsx
@@ -0,0 +1,85 @@
+import { useState } from 'react';
+
+import { Navbar, Group, Code } from '@mantine/core';
+import {
+  IconSettings,
+  IconDatabaseImport,
+  IconUserCheck,
+  IconNotebook,
+  IconSwitchHorizontal,
+  IconLogout,
+  IconCalendarStats,
+  IconReceipt,
+  IconIdBadge2,
+  IconHome2,
+  IconUserPlus,
+} from '@tabler/icons';
+import { NavLink, useNavigate } from 'react-router-dom';
+import useStyles from './styles';
+
+const data = [
+  { link: 'home', label: 'Home', icon: IconHome2 },
+  { link: 'team', label: 'College Team', icon: IconUserCheck },
+  { link: 'program', label: 'Program Section', icon: IconCalendarStats },
+  { link: 'settings', label: 'Settings', icon: IconSettings },
+];
+
+const HomeNavbar = () => {
+  const navigate = useNavigate();
+  const { classes, cx } = useStyles();
+  const [active, setActive] = useState('Billing');
+
+  const links = data.map((item) => {
+    return (
+      <NavLink
+        className={cx(classes.link, {
+          [classes.linkActive]: item.label === active,
+        })}
+        to={item.link}
+        key={item.label}
+        onClick={(event) => {
+          event.preventDefault();
+          setActive(item.label);
+          navigate(`/seeker/${item.link}`);
+        }}
+      >
+        <item.icon className={classes.linkIcon} stroke={1.5} />
+        <span>{item.label}</span>
+      </NavLink>
+    );
+  });
+
+  const logOutHandler = () => {
+    const response = confirm('Are you sure you want to LogOut?');
+    if (response) {
+      localStorage.clear();
+      navigate('/login');
+    }
+  };
+
+  return (
+    <Navbar height={700} width={{ sm: 300 }} p="md">
+      <Navbar.Section grow>
+        <Group className={classes.header}></Group>
+        {links}
+      </Navbar.Section>
+
+      <Navbar.Section className={classes.footer}>
+        <a
+          href="#"
+          className={classes.link}
+          onClick={(event) => event.preventDefault()}
+        >
+          <IconSwitchHorizontal className={classes.linkIcon} stroke={1.5} />
+          <span>Change account</span>
+        </a>
+
+        <a href="#" className={classes.link} onClick={logOutHandler}>
+          <IconLogout className={classes.linkIcon} stroke={1.5} />
+          <span>Log Out</span>
+        </a>
+      </Navbar.Section>
+    </Navbar>
+  );
+};
+export default HomeNavbar;