diff --git a/src/components/ConfirmModal.tsx b/src/components/ConfirmModal.tsx new file mode 100644 index 0000000..ac5e682 --- /dev/null +++ b/src/components/ConfirmModal.tsx @@ -0,0 +1,39 @@ +import type { FC } from "react"; + +type ConfirmModalProps = { + message: string; + onConfirm: () => void; + onCancel: () => void; +}; + +const ConfirmModal: FC = ({ + message, + onConfirm, + onCancel, +}) => { + return ( +
+
+

{message}

+
+ + +
+
+
+ ); +}; + +export default ConfirmModal; diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx index 1d84445..0f51e6c 100644 --- a/src/pages/Welcome.tsx +++ b/src/pages/Welcome.tsx @@ -1,5 +1,6 @@ import { DateTime } from "luxon"; import { type FC, type MouseEventHandler, useEffect, useState } from "react"; +import ConfirmModal from "../components/ConfirmModal"; import Phase from "../components/Phase"; import { useAppDispatch, useAppSelector } from "../store/hooks"; import { clearStartTime, setStartTime } from "../store/slices/timeSlice"; @@ -14,6 +15,7 @@ const Welcome: FC = () => { const dispatch = useAppDispatch(); const startTime = useAppSelector((state) => state.time.startTime); const [now, setNow] = useState(() => DateTime.now()); + const [isConfirmOpen, setIsConfirmOpen] = useState(false); useEffect(() => { if (!startTime) return; @@ -32,7 +34,12 @@ const Welcome: FC = () => { ); const nextRoundClick: MouseEventHandler = (_e) => { + setIsConfirmOpen(true); + }; + + const confirmNextRound = () => { dispatch(clearStartTime()); + setIsConfirmOpen(false); }; const startRoundClick: MouseEventHandler = (_e) => { @@ -75,6 +82,13 @@ const Welcome: FC = () => { /> ); })} + {isConfirmOpen && ( + setIsConfirmOpen(false)} + /> + )} ); };