Refactor create form, improve number input

client/src/components/CreateChallengeForm/DynamicPointQs.tsx

@@ -0,0 +1,43 @@
+import { Alert, InputNumber } from "antd";
+import FormItemWithSublabel from "../FormItemWithSubLabel";
+
+const DynamicPointQs = () => {
+	return (
+		<>
+			<Alert
+				className="mb-4"
+				type="info"
+				showIcon
+				message="Dynamic point types will award a variable amount of points to each user who solves the challenge correctly. The number of points awarded will decrease as more users solve the challenge."
+			/>
+			<FormItemWithSublabel
+				label="Initial Points"
+				subLabel="The initial amount of points awarded to the first user who solves the challenge correctly."
+				name="points"
+				rules={[{ required: true }]}
+			>
+				<InputNumber style={{ width: "100%" }} min={0} placeholder="Enter initial points" />
+			</FormItemWithSublabel>
+
+			<FormItemWithSublabel
+				label="Minimum Points"
+				subLabel="The minimum amount of points that can be awarded to a user who solves the challenge correctly."
+				name="minPoints"
+				rules={[{ required: true }]}
+			>
+				<InputNumber style={{ width: "100%" }} min={0} placeholder="Enter minimum points" />
+			</FormItemWithSublabel>
+
+			<FormItemWithSublabel
+				label="Decay"
+				subLabel="The rate at which the number of points awarded to users who solve the challenge correctly decreases."
+				name="decay"
+				rules={[{ required: true }]}
+			>
+				<InputNumber style={{ width: "100%" }} min={0} placeholder="Enter rate of decay" />
+			</FormItemWithSublabel>
+		</>
+	);
+};
+
+export default DynamicPointQs;

client/src/components/CreateChallengeForm/MultipleChoiceQs.tsx

@@ -0,0 +1,64 @@
+import { Button, Form, Input } from "antd";
+import { useRef } from "react";
+
+const MultipleChoiceQs = () => {
+	const nextKeyRef = useRef(4);
+
+	return (
+		<Form.Item label="Multiple Choice Options">
+			<Form.List
+				key="multipleChoiceOptions"
+				name="multipleChoiceOptions"
+				initialValue={[
+					{ name: 0, key: 0 },
+					{ name: 1, key: 1 },
+					{ name: 2, key: 2 },
+					{ name: 3, key: 3 },
+				]}
+			>
+				{(fields, { add, remove }) => (
+					<>
+						{fields.map((field) => (
+							<div key={field.key} className="flex gap-2 w-full">
+								<Form.Item
+									name={[field.name, "option"]}
+									className="mb-2 w-full"
+									rules={[
+										{
+											required: true,
+											message: "'option' is required",
+										},
+									]}
+								>
+									<Input placeholder="Enter option" />
+								</Form.Item>
+								<Button
+									danger
+									disabled={fields.length <= 4}
+									onClick={() => remove(field.name)}
+								>
+									Remove
+								</Button>
+							</div>
+						))}
+						<Button
+							type="dashed"
+							onClick={() => {
+								add(
+									{ name: nextKeyRef.current, key: nextKeyRef.current },
+									fields.length
+								);
+								nextKeyRef.current += 1;
+							}}
+							block
+						>
+							+ Add Option
+						</Button>
+					</>
+				)}
+			</Form.List>
+		</Form.Item>
+	);
+};
+
+export default MultipleChoiceQs;

client/src/components/CreateChallengeForm/ShortAnswerListItem.tsx

@@ -0,0 +1,53 @@
+import { Card, Checkbox, Flex, Form, FormListFieldData, Input } from "antd";
+import { CloseCircleOutlined } from "@ant-design/icons";
+
+interface Props {
+	field: FormListFieldData;
+	isRemoveVisible: boolean;
+	remove: (name: number) => void;
+}
+
+const ShortAnswerListItem = ({ field, isRemoveVisible, remove }: Props) => {
+	return (
+		<Card className="relative">
+			{isRemoveVisible && (
+				<CloseCircleOutlined
+					className="absolute right-3 top-3 text-xl text-red-400"
+					onClick={() => remove(field.name)}
+				/>
+			)}
+			<Flex>
+				<Form.Item
+					valuePropName="checked"
+					initialValue={false}
+					name={[field.name, "isCaseSensitive"]}
+					className="mb-2 w-full"
+				>
+					<Checkbox>Case Sensitive?</Checkbox>
+				</Form.Item>
+				<Form.Item
+					valuePropName="checked"
+					initialValue={false}
+					name={[field.name, "isRegularExpression"]}
+					className="mb-2 w-full"
+				>
+					<Checkbox>Regular Expression?</Checkbox>
+				</Form.Item>
+			</Flex>
+			<Form.Item
+				name={[field.name, "option"]}
+				className="mb-2 w-full"
+				rules={[
+					{
+						required: true,
+						message: "'option' is required",
+					},
+				]}
+			>
+				<Input placeholder="Enter option" />
+			</Form.Item>
+		</Card>
+	);
+};
+
+export default ShortAnswerListItem;

client/src/components/CreateChallengeForm/ShortAnswerQs.tsx

@@ -0,0 +1,45 @@
+import { Button, Form } from "antd";
+import ShortAnswerListItem from "./ShortAnswerListItem";
+import { useRef } from "react";
+
+const ShortAnswerQs = () => {
+	const nextKeyRef = useRef(1);
+
+	return (
+		<Form.Item label="Short Answer Options">
+			<Form.List
+				key="shortAnswerOptions"
+				name="shortAnswerOptions"
+				initialValue={[{ name: 0, key: 0 }]}
+			>
+				{(fields, { add, remove }) => (
+					<div className="flex flex-col gap-2">
+						{fields.map((field) => (
+							<ShortAnswerListItem
+								key={field.key}
+								field={field}
+								isRemoveVisible={fields.length > 1}
+								remove={remove}
+							/>
+						))}
+						<Button
+							type="dashed"
+							onClick={() => {
+								add(
+									{ name: nextKeyRef.current, key: nextKeyRef.current },
+									fields.length
+								);
+								nextKeyRef.current += 1;
+							}}
+							block
+						>
+							+ Add Option
+						</Button>
+					</div>
+				)}
+			</Form.List>
+		</Form.Item>
+	);
+};
+
+export default ShortAnswerQs;

client/src/components/CreateChallengeForm/StaticPointQs.tsx

@@ -0,0 +1,23 @@
+import { Alert, Form, InputNumber } from "antd";
+
+const StaticPointQs = () => {
+	return (
+		<>
+			<Alert
+				className="mb-4"
+				type="info"
+				showIcon
+				message="Static point types will award the same amount of points to each user who solves the challenge correctly."
+			/>
+			<Form.Item label="Points" name="points" rules={[{ required: true }]}>
+				<InputNumber
+					style={{ width: "100%" }}
+					min={0}
+					placeholder="Enter challenge points"
+				/>
+			</Form.Item>
+		</>
+	);
+};
+
+export default StaticPointQs;