Add UI for topic and difficulty selection for queue up

Multiselect is used for both topic and difficulty. However this
commit does not have any business and validation logic.

Author: NorbertLoh

frontend/peerprep/app/components/queueupmodal/queuemodal.module.css

@@ -0,0 +1,4 @@
+.pill {
+    background-color: var(--mantine-color-brand-yellow-7);
+    color: var(--mantine-color-black);
+}

frontend/peerprep/app/components/queueupmodal/queuemodal.tsx

@@ -0,0 +1,77 @@
+import { useDisclosure } from "@mantine/hooks";
+import { Modal, Button, MultiSelect, Text, Grid } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import classes from "./queuemodal.module.css";
+
+const topics = [
+  "Array",
+  "String",
+  "Dynamic Programming",
+  "Backtracking",
+  "Greedy",
+  "Graph",
+  "Tree",
+  "Linked List",
+  "Sorting",
+  "Searching",
+];
+
+const difficulties = ["Easy", "Medium", "Hard"];
+
+export default function QueueModal() {
+  const [opened, { open, close }] = useDisclosure(false);
+  const form = useForm({
+    initialValues: {
+      topic: [],
+      difficulty: [],
+    },
+  });
+
+  return (
+    <>
+      <Modal
+        opened={opened}
+        onClose={close}
+        c="white"
+        title="Select Topic and Difficulty"
+      >
+        <form onSubmit={form.onSubmit((values) => console.log(values))}>
+          <Grid>
+            <Grid.Col span={12}>
+              <MultiSelect
+                label="Topic"
+                placeholder="Pick values"
+                data={topics}
+                searchable
+                {...form.getInputProps("topic")}
+                classNames={{
+                  pill: classes.pill,
+                }}
+              />
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <MultiSelect
+                label="Difficulty"
+                placeholder="Pick values"
+                data={difficulties}
+                searchable
+                {...form.getInputProps("difficulty")}
+                classNames={{
+                  pill: classes.pill,
+                }}
+              />
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <Button fullWidth type="submit" mt="md" onClick={close}>
+                Confirm
+              </Button>
+            </Grid.Col>
+          </Grid>
+        </form>
+      </Modal>
+      <Button fullWidth onClick={open}>
+        Queue Up
+      </Button>
+    </>
+  );
+}

frontend/peerprep/app/pages/userpage.tsx

@@ -0,0 +1,74 @@
+import {
+  Grid,
+  Button,
+  useMantineTheme,
+} from "@mantine/core";
+
+import StatsCard from "../components/statscard";
+import HistoryTable from "../components/table/table";
+import type {InterviewHistory} from "../components/table/table";
+import QueueModal from "~/components/queueupmodal/queuemodal";
+
+import { useState } from "react";
+
+export function meta() {
+  return [
+    { title: "PeerPrep - Homepage" },
+    { name: "description", content: "Welcome to PeerPrep!" },
+  ];
+}
+
+export default function Userpage() {
+  const theme = useMantineTheme();
+
+  const [data, ] = useState<InterviewHistory[]>([
+    {
+      question: "Two Sum",
+      completionDate: "2024-10-01",
+      difficulty: "Easy",
+      topic: "Array",
+      language: "JavaScript",
+    },
+  ]);
+
+  return (
+    <Grid>
+      <Grid.Col span={12}>
+        <Grid gutter="md" align="center">
+          <Grid.Col span={{ base: 6, md: 2 }}>
+            <StatsCard
+              title="Interviews"
+              stat="1,234"
+              color={theme.colors.gray[0]}
+            />
+          </Grid.Col>
+          <Grid.Col span={{ base: 6, md: 2 }}>
+            <StatsCard
+              title="Easy"
+              stat="1,234"
+              color={theme.colors.green[5]}
+            />
+          </Grid.Col>
+          <Grid.Col span={{ base: 6, md: 2 }}>
+            <StatsCard
+              title="Medium"
+              stat="1,234"
+              color={theme.colors.yellow[5]}
+            />
+          </Grid.Col>
+          <Grid.Col span={{ base: 6, md: 2 }}>
+            <StatsCard title="Hard" stat="1,234" color={theme.colors.red[5]} />
+          </Grid.Col>
+          <Grid.Col span={{ base: 12, md: 2 }} offset={{ md: 2 }}>
+            <QueueModal />
+          </Grid.Col>
+        </Grid>
+      </Grid.Col>
+      <Grid.Col span={12}>
+        <HistoryTable
+          data={data}
+        />
+      </Grid.Col>
+    </Grid>
+  );
+}