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

@@ -7,6 +7,7 @@ import {
 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";
 
@@ -58,8 +59,8 @@ export default function Userpage() {
           <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: 1 }} offset={{ md: 3 }}>
-            <Button fullWidth>Queue Up</Button>
+          <Grid.Col span={{ base: 12, md: 2 }} offset={{ md: 2 }}>
+            <QueueModal />
           </Grid.Col>
         </Grid>
       </Grid.Col>