web: form page base concept

web/src/app/submission_new/(styles)/page.scss

@@ -0,0 +1,33 @@
+@use "../../globals.scss";
+
+main {
+	display: grid;
+	justify-content: center;
+	align-items: center;
+	margin-inline: auto;
+	width: 700px;
+}
+
+header h1 {
+	text-align: center;
+	color: var(--text-color);
+}
+
+form {
+	display: grid;
+	gap: 10px;
+
+	input {
+		@include globals.border-with-radius;
+		outline: none;
+		background-color: var(--comment-area);
+		height: 40px;
+		width: 500px;;
+		font-size: 1.2rem;
+		margin-bottom: 15px;
+	}
+	label {
+		font-size: 1.3rem;
+		color: var(--text-color);
+	}
+}

web/src/app/submission_new/page.tsx

@@ -0,0 +1,58 @@
+import { FormControl, FormLabel, RadioGroup, FormControlLabel, Button } from "@mui/material"
+import SendIcon from '@mui/icons-material/Send';
+import Webpage from "@/app/_components/webpage"
+import Radio from '@mui/material/Radio';
+
+import "./(styles)/page.scss"
+
+const enum Map {
+	New,
+	Fix,
+}
+
+interface FormDetails {
+	label: string,
+	id: string,
+}
+
+function Field(form_details: FormDetails) {
+	return (<>
+		<label htmlFor={form_details.id}>{`${form_details.label}:`}</label>
+		<input type="text" required id={form_details.id} name={form_details.id}/>
+	</>)
+}
+
+function TargetAsset() {
+	return <FormControl>
+		<FormLabel id="target-asset-radio" sx={{color: "var(--text-color)"}}>Target Asset</FormLabel>
+		<RadioGroup aria-labelledby="target-asset-radio" name="target-asset-radio">
+			<FormControlLabel value="New" control={<Radio/>} label="New"/>
+			<FormControlLabel value="Fix" control={<Radio/>} label="Fix"/>
+		</RadioGroup>
+	</FormControl>
+}
+
+export default function SubmissionInfoPage() {
+    return (
+        <Webpage>
+        	<header>
+         		<h1>Submit Map</h1>
+         	</header>
+        	<main>
+	        	<form>
+	         		<Field label="Display Name" id="display-name"/>
+	         		<Field label="Creator" id="creator"/>
+	           		<Field label="Game ID" id="gameid"/>
+             		<Field label="Asset ID" id="asset-id"/>
+	             	<Field label="Asset Version" id="asset-version"/>
+					<TargetAsset/>
+	         	</form>
+				<Button variant="outlined" startIcon={<SendIcon/>} sx={{
+					width: "300px",
+					height: "50px",
+					marginInline: "auto"
+				}}>Submit</Button>
+         	</main>
+        </Webpage>
+	)
+}