change slider to radio buttons in judge (#456)

* fixed slider and button spacing * Run Prettier * changed slider to group of buttons * Run Prettier * fixed buttons and input box * Run Prettier --------- Co-authored-by: Stanley Zheng <[email protected]> Co-authored-by: szheng31 <[email protected]> Co-authored-by: Isaac Liu <[email protected]>
VandyHacks · Apr 17, 2024 · 3d47662 · 3d47662
1 parent a068d11
commit 3d47662
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 3 deletions.
diff --git a/components/judges/ScoreInput.tsx b/components/judges/ScoreInput.tsx
@@ -1,5 +1,9 @@
-import { Slider, InputNumber, Row, Col } from 'antd';
+import { Slider, Radio, InputNumber, Row, Col } from 'antd';
+import { RadioChangeEvent } from 'antd/lib';
+import { IntegerType } from 'mongodb';
+import styles from '../../styles/Judge.module.css';
 import React from 'react';
+
 interface ScoreInputProps {
 	value: number;
 	onChange: (value: number | null) => void;
@@ -8,10 +12,39 @@ interface ScoreInputProps {
 export default function ScoreInput(props: ScoreInputProps) {
 	const { value, onChange } = props;
 	const [min, max] = [0, 7];
+	const onRadioChange = (e: RadioChangeEvent) => {
+		onChange(e.target.value);
+	};
+
 	return (
 		<Row>
-			<Col span={20}>
-				<Slider min={min} max={max} onChange={onChange} value={value} />
+			<Col flex={1 / 4}>
+				<Radio.Group
+					onChange={onRadioChange}
+					value={value}
+					style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+					<Radio className={styles.CustomRadio} value={1}>
+						1
+					</Radio>
+					<Radio className={styles.CustomRadio} value={2}>
+						2
+					</Radio>
+					<Radio className={styles.CustomRadio} value={3}>
+						3
+					</Radio>
+					<Radio className={styles.CustomRadio} value={4}>
+						4
+					</Radio>
+					<Radio className={styles.CustomRadio} value={5}>
+						5
+					</Radio>
+					<Radio className={styles.CustomRadio} value={6}>
+						6
+					</Radio>
+					<Radio className={styles.CustomRadio} value={7}>
+						7
+					</Radio>
+				</Radio.Group>
 			</Col>
 			<Col span={4}>
 				<InputNumber

diff --git a/styles/Judge.module.css b/styles/Judge.module.css
@@ -191,3 +191,10 @@
 .reportABugText:hover {
 	cursor: pointer;
 }
+
+.CustomRadio {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-right: 20px;
+}