Add confirmation modal

src/components/ConfirmModal.tsx

@@ -0,0 +1,39 @@
+import type { FC } from "react";
+
+type ConfirmModalProps = {
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+};
+
+const ConfirmModal: FC<ConfirmModalProps> = ({
+  message,
+  onConfirm,
+  onCancel,
+}) => {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
+      <div className="flex flex-col gap-6 rounded-lg bg-slate-800 p-8 shadow-xl">
+        <p className="text-lg font-semibold">{message}</p>
+        <div className="flex justify-end gap-4">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="rounded-lg bg-slate-700 px-4 py-2 font-semibold hover:bg-slate-600"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            className="rounded-lg bg-emerald-600 px-4 py-2 font-semibold hover:bg-emerald-500"
+          >
+            Confirm
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmModal;

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<HTMLButtonElement> = (_e) => {
+    setIsConfirmOpen(true);
+  };
+
+  const confirmNextRound = () => {
     dispatch(clearStartTime());
+    setIsConfirmOpen(false);
   };
 
   const startRoundClick: MouseEventHandler<HTMLButtonElement> = (_e) => {
@@ -75,6 +82,13 @@ const Welcome: FC = () => {
           />
         );
       })}
+      {isConfirmOpen && (
+        <ConfirmModal
+          message="Are you sure?"
+          onConfirm={confirmNextRound}
+          onCancel={() => setIsConfirmOpen(false)}
+        />
+      )}
     </div>
   );
 };