Skip to content

Commit 15b37fa

Browse files
NorbertLohNorbertLoh
committed
Add user page and interview table
1 parent c382503 commit 15b37fa

File tree

6 files changed

+180
-3
lines changed

6 files changed

+180
-3
lines changed

‎frontend/peerprep/app/app.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77

88
html,
99
body {
10-
background-color: var(--mantine-color-custom-grey-9);
1110

1211
@media (prefers-color-scheme: dark) {
1312
color-scheme: dark;

‎frontend/peerprep/app/components/table/table.module.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.cell {
2+
width: 150px;
3+
text-align: right;
4+
}

‎frontend/peerprep/app/components/table/table.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Button, Card, Divider, Table, Text, Pagination, Group } from "@mantine/core";
2+
import classes from "./table.module.css";
3+
4+
export default function HistoryTable({ data }: { data: any[] }) {
5+
const rows = data.map((row, index) => (
6+
<Table.Tr key={row.name}>
7+
<Table.Td>{row.question}</Table.Td>
8+
<Table.Td ta="right">{row.completionDate}</Table.Td>
9+
<Table.Td ta="right">{row.difficulty}</Table.Td>
10+
<Table.Td ta="right">{row.topic}</Table.Td>
11+
<Table.Td ta="right">{row.language}</Table.Td>
12+
<Table.Td ta="right" style={{ width: 100 }}>
13+
<Button>View</Button>
14+
</Table.Td>
15+
</Table.Tr>
16+
));
17+
return (
18+
<Card shadow="sm" padding="lg">
19+
<Text fw={1000} size="xl" c="white" mb={"xs"}>
20+
Interviews
21+
</Text>
22+
<Divider />
23+
<Table.ScrollContainer minWidth={500}>
24+
<Table c={"white"} highlightOnHover>
25+
<Table.Thead>
26+
<Table.Tr>
27+
<Table.Th>Question</Table.Th>
28+
<Table.Th className={classes.cell}>Completion Date</Table.Th>
29+
<Table.Th className={classes.cell}>Difficulty</Table.Th>
30+
<Table.Th className={classes.cell}>Topic</Table.Th>
31+
<Table.Th className={classes.cell}>Language</Table.Th>
32+
<Table.Th className={classes.cell}></Table.Th>
33+
</Table.Tr>
34+
</Table.Thead>
35+
<Table.Tbody>{rows}</Table.Tbody>
36+
</Table>
37+
</Table.ScrollContainer>
38+
<Group justify="center">
39+
<Pagination total={5} siblings={3} defaultValue={1} />
40+
41+
</Group>
42+
</Card>
43+
);
44+
}

‎frontend/peerprep/app/pages/userpage.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import {
2+
Grid,
3+
TextInput,
4+
Button,
5+
PasswordInput,
6+
Divider,
7+
Text,
8+
Image,
9+
useMantineTheme,
10+
Card,
11+
} from "@mantine/core";
12+
13+
import { Link } from "react-router";
14+
import Header from "../components/header/header";
15+
import logo from "../assets/images/logo.svg";
16+
import StatsCard from "../components/statscard";
17+
import HistoryTable from "../components/table/table";
18+
19+
import { useState } from "react";
20+
21+
export function meta() {
22+
return [
23+
{ title: "PeerPrep - Homepage" },
24+
{ name: "description", content: "Welcome to PeerPrep!" },
25+
];
26+
}
27+
28+
export default function Userpage() {
29+
const theme = useMantineTheme();
30+
31+
const [data, setData] = useState<any[]>([
32+
{
33+
question: "Two Sum",
34+
completionDate: "2024-10-01",
35+
difficulty: "Easy",
36+
topic: "Array",
37+
language: "JavaScript",
38+
},
39+
]);
40+
41+
return (
42+
<Grid>
43+
<Grid.Col span={12}>
44+
<Grid gutter="md" align="center">
45+
<Grid.Col span={{ base: 6, md: 2 }}>
46+
<StatsCard
47+
title="Interviews"
48+
stat="1,234"
49+
color={theme.colors.gray[0]}
50+
/>
51+
</Grid.Col>
52+
<Grid.Col span={{ base: 6, md: 2 }}>
53+
<StatsCard
54+
title="Easy"
55+
stat="1,234"
56+
color={theme.colors.green[5]}
57+
/>
58+
</Grid.Col>
59+
<Grid.Col span={{ base: 6, md: 2 }}>
60+
<StatsCard
61+
title="Medium"
62+
stat="1,234"
63+
color={theme.colors.yellow[5]}
64+
/>
65+
</Grid.Col>
66+
<Grid.Col span={{ base: 6, md: 2 }}>
67+
<StatsCard title="Hard" stat="1,234" color={theme.colors.red[5]} />
68+
</Grid.Col>
69+
<Grid.Col span={{ base: 12, md: 1 }} offset={{ md: 3 }}>
70+
<Button fullWidth>Queue Up</Button>
71+
</Grid.Col>
72+
</Grid>
73+
</Grid.Col>
74+
<Grid.Col span={12}>
75+
<HistoryTable
76+
data={data}
77+
/>
78+
</Grid.Col>
79+
</Grid>
80+
);
81+
}

‎frontend/peerprep/app/root.tsx‎

Lines changed: 50 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
Outlet,
66
Scripts,
77
ScrollRestoration,
8+
useLocation,
89
} from "react-router";
910

1011
import "@mantine/core/styles.css";
@@ -14,10 +15,12 @@ import {
1415
Container,
1516
Button,
1617
Input,
18+
Card,
1719
} from "@mantine/core";
1820

1921
import type { Route } from "./+types/root";
2022
import "./app.css";
23+
import Header from "./components/header/header";
2124

2225
export const links: Route.LinksFunction = () => [
2326
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
@@ -59,6 +62,44 @@ const theme = createTheme({
5962
"#646464",
6063
"#343231",
6164
],
65+
green: [
66+
"#e5ffe5",
67+
"#cefecf",
68+
"#9ffa9f",
69+
"#6bf76b",
70+
"#48f548",
71+
"#24f324",
72+
"#0df212",
73+
"#00d701",
74+
"#00c000",
75+
"#00a600",
76+
],
77+
78+
yellow: [
79+
"#fff9df",
80+
"#fff2ca",
81+
"#ffe399",
82+
"#ffd463",
83+
"#ffc736",
84+
"#ffc01e",
85+
"#ffba02",
86+
"#e4a300",
87+
"#cb9100",
88+
"#af7c00",
89+
],
90+
91+
red: [
92+
"#ffe7e8",
93+
"#ffcece",
94+
"#ff9b9b",
95+
"#ff6464",
96+
"#fe3736",
97+
"#fe1b19",
98+
"#ff0000",
99+
"#e40000",
100+
"#cb0000",
101+
"#b20000",
102+
],
62103
},
63104

64105
components: {
@@ -70,8 +111,7 @@ const theme = createTheme({
70111
},
71112
}),
72113

73-
Input: Input.extend({
74-
}),
114+
Input: Input.extend({}),
75115

76116
InputWrapper: Input.Wrapper.extend({
77117
classNames: {
@@ -104,8 +144,16 @@ export function Layout({ children }: { children: React.ReactNode }) {
104144
}
105145

106146
export default function App() {
147+
const location = useLocation();
148+
const linksWithHeader = ["/user"];
149+
150+
const isHeader = () => {
151+
return linksWithHeader.includes(location.pathname);
152+
};
153+
107154
return (
108155
<MantineProvider theme={theme} defaultColorScheme="dark">
156+
{isHeader() && <Header />}
109157
<Container fluid>{<Outlet />}</Container>
110158
</MantineProvider>
111159
);

‎frontend/peerprep/app/routes.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ export default [
44
index("routes/home.tsx"),
55
route("login", "pages/login.tsx"),
66
route("signup", "pages/signup.tsx"),
7+
route("user", "pages/userpage.tsx"),
78
] satisfies RouteConfig;

0 commit comments

Comments
 (0)