Create general info page, Part 1 (#18)

✨ feat: Add general info page

Author: plzfday

src/app/problems/[qid]/general-info/Contest.tsx

@@ -0,0 +1,34 @@
+'use client';
+import { Button, Chip, Paper, Stack, TextField, Typography } from '@mui/material';
+import { MouseEvent, useState } from 'react';
+
+import { removeChip } from './util';
+
+export default function Contest() {
+  const [contests, setContests] = useState(['Contest 1', 'Contest 2', 'Contest 3']);
+
+  const handleContestDelete = (event: MouseEvent<HTMLElement, MouseEvent>) => {
+    removeChip(event, setContests);
+
+    // TODO: Remove the contest from the database
+  };
+
+  return (
+    <Paper>
+      <Stack px={4} py={2} gap={2}>
+        <Typography component='h2' variant='h6'>
+          Contests
+        </Typography>
+        <Stack direction='row' gap={2}>
+          <TextField id='contest' label='Contest UID' />
+          <Button variant='contained'>Add</Button>
+        </Stack>
+        <Stack direction='row' gap={2}>
+          {contests.map((contest, index) => (
+            <Chip key={index} label={contest} onDelete={handleContestDelete} />
+          ))}
+        </Stack>
+      </Stack>
+    </Paper>
+  );
+}

src/app/problems/[qid]/general-info/Tag.tsx

@@ -0,0 +1,38 @@
+'use client';
+import { Button, Chip, Paper, Stack, TextField, Typography } from '@mui/material';
+import { MouseEvent, useState } from 'react';
+
+import { removeChip } from './util';
+
+export default function Tag() {
+  const [tags, setTags] = useState(['Contest 1', 'Contest 2', 'Contest 3']);
+
+  const handleTagDelete = (event: MouseEvent<HTMLElement, MouseEvent>) => {
+    removeChip(event, setTags);
+
+    // TODO: Remove the tag from the database
+  };
+
+  return (
+    <Paper>
+      <Stack px={4} py={2} gap={2}>
+        <Typography component='h2' variant='h6'>
+          Tags
+        </Typography>
+        <Stack direction='row' gap={2}>
+          <TextField
+            id='tag'
+            label='Tag'
+            helperText='Use only English and try autocomplete tags'
+          />
+          <Button variant='contained'>Add</Button>
+        </Stack>
+        <Stack direction='row' gap={2}>
+          {tags.map((contest, index) => (
+            <Chip key={index} label={contest} onDelete={handleTagDelete} />
+          ))}
+        </Stack>
+      </Stack>
+    </Paper>
+  );
+}

src/app/problems/[qid]/general-info/page.tsx

@@ -0,0 +1,50 @@
+import {
+  Button,
+  Checkbox,
+  FormControlLabel,
+  Paper,
+  Stack,
+  TextField,
+} from '@mui/material';
+
+import Tag from './Tag';
+import Contest from './Contest';
+
+export default function Problem() {
+  return (
+    <Stack mt={2} gap={4}>
+      <Paper>
+        <Stack direction='column' px={4} py={2} gap={2}>
+          <TextField
+            id='input_file'
+            label='Input file'
+            helperText='Input file name or "stdin" for standard input'
+          />
+          <TextField
+            id='output_file'
+            label='Output file'
+            helperText='Output file name or "stdout" for standard output'
+          />
+          <TextField
+            id='time_limit'
+            label='Time limit (ms)'
+            helperText='Time limit per test (between 250 ms and 15000 ms)'
+          />
+          <TextField
+            id='memory_limit'
+            label='Memory limit (MB)'
+            helperText='Memory limit (between 4 MB and 1024 MB)'
+          />
+          <FormControlLabel
+            control={<Checkbox />}
+            label='This problem is interactive'
+          />
+          <Button variant='contained'>Save</Button>
+        </Stack>
+      </Paper>
+
+      <Tag />
+      <Contest />
+    </Stack>
+  );
+}

src/app/problems/[qid]/general-info/util.ts

@@ -0,0 +1,14 @@
+import { Dispatch, MouseEvent, SetStateAction } from 'react';
+
+export const removeChip = (event: MouseEvent<HTMLElement, MouseEvent>, setHook: Dispatch<SetStateAction<string[]>>) => {
+    if (event.currentTarget.tagName === 'PATH') {
+        console.info('Path');
+        return;
+    }
+    
+    const contest = event.currentTarget.parentNode?.firstElementChild?.textContent;
+    if (!contest) {
+        return;
+    }
+    setHook((contests) => contests.filter((c) => c !== contest));
+};