Merge pull request #26 from CS3219-AY2526Sem1/queue-up

Add queue up modal

Author: NorbertLoh

frontend/peerprep/.vite/deps/_metadata.json

@@ -0,0 +1,8 @@
+{
+  "hash": "61c1135b",
+  "configHash": "bf99f7f0",
+  "lockfileHash": "d435eb2c",
+  "browserHash": "4f32ab05",
+  "optimized": {},
+  "chunks": {}
+}

frontend/peerprep/.vite/deps/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

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,86 @@
+import { useDisclosure } from "@mantine/hooks";
+import { Modal, Button, MultiSelect, Grid, Select } 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}>
+              <Select
+                label="Language"
+                placeholder="Pick one"
+                data={["C++", "Python", "Java", "JavaScript"]}
+                searchable
+                {...form.getInputProps("language")}
+              />
+            </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

@@ -1,12 +1,12 @@
 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";
 
@@ -58,8 +58,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>