style render move times toggle

src/hooks/useChessGame.ts

@@ -67,11 +67,16 @@ export const useChessGame = () => {
 	};
 
 	const handleToggleClock = () => {
+		console.log("Toggle clock");
 		gameDispatch({
 			type: "TOGGLE_DIAGRAM_CLOCK",
 		});
 	};
 
+	const handleToggleDiagram = () => {
+		console.log("Toggle diagram");
+	};
+
 	return {
 		gameState,
 		fileInputRef,
@@ -80,5 +85,6 @@ export const useChessGame = () => {
 		handleClearGame,
 		handleLoadPgn,
 		handleToggleClock,
+		handleToggleDiagram,
 	};
 };

src/pages/Chessboard.container.tsx

@@ -12,6 +12,7 @@ const ChessboardContainer = () => {
 			handleSavePgn={chessGameProps.handleSavePgn}
 			handleSavePdf={chessGameProps.handleSavePdf}
 			handleToggleClock={chessGameProps.handleToggleClock}
+			handleToggleDiagram={chessGameProps.handleToggleDiagram}
 			fileInputRef={chessGameProps.fileInputRef}
 		/>
 	);

src/pages/Chessboard.tsx

@@ -11,6 +11,7 @@ interface IProps {
 	handleSavePgn: () => void;
 	handleSavePdf: () => void;
 	handleToggleClock: () => void;
+	handleToggleDiagram: () => void;
 	fileInputRef: RefObject<HTMLInputElement | null>;
 }
 
@@ -21,6 +22,7 @@ const Chessboard = ({
 	handleSavePgn,
 	handleSavePdf,
 	handleToggleClock,
+	handleToggleDiagram,
 	fileInputRef,
 }: IProps) => {
 	return (
@@ -64,15 +66,30 @@ const Chessboard = ({
 				</button>
 			</div>
 			<PgnViewer gamePgn={gameState.pgn || ""} />
-			<label htmlFor="diagram-clock">
-				Render Clock Times
+			<div className="flex justify-between max-w-150">
+				<div className="flex gap-2">
+					<label htmlFor="diagram-add">Select Diagram</label>
 					<input
-					id="diagram-clock"
-					name="diagram-clock"
+						id="diagram-add"
+						name="diagram-add"
 						type="checkbox"
+						className="cursor-pointer"
+						onChange={handleToggleDiagram}
+					/>
+				</div>
+
+				<label className="toggle">
+					Render move times
+					<input
+						id="render-times"
+						name="render-times"
+						type="checkbox"
+						checked={gameState.diagramClock}
 						onChange={handleToggleClock}
 					/>
+					<span className="slider round" />
 				</label>
+			</div>
 		</main>
 	);
 };

src/styles.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "styles/_accordion.css";
+@import "./styles/_input.css";
 @import "./styles/_file-input.css";
 @import './styles/_pgn-viewer.css';
 

src/styles/_input.css

@@ -0,0 +1,57 @@
+.toggle {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	cursor: pointer;
+}
+
+.toggle input {
+	opacity: 0;
+	width: 0;
+	height: 0;
+}
+
+.slider {
+	position: relative;
+	cursor: pointer;
+	width: 36px;
+	height: 20px;
+	background-color: #ccc;
+	-webkit-transition: 0.4s;
+	transition: 0.4s;
+	flex-shrink: 0;
+}
+
+.slider:before {
+	position: absolute;
+	content: "";
+	height: 14px;
+	width: 14px;
+	left: 3px;
+	bottom: 3px;
+	background-color: white;
+	-webkit-transition: 0.4s;
+	transition: 0.4s;
+}
+
+input:checked + .slider {
+	background-color: var(--accent);
+}
+
+input:focus + .slider {
+	box-shadow: 0 0 1px var(--accent);
+}
+
+input:checked + .slider:before {
+	-webkit-transform: translateX(16px);
+	-ms-transform: translateX(16px);
+	transform: translateX(16px);
+}
+
+.slider.round {
+	border-radius: 12px;
+}
+
+.slider.round:before {
+	border-radius: 50%;
+}