initial commit

context/TimerContext.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import React, { createContext, useContext, useState, useEffect } from "react";
+
+// Define the context type
+interface TimerContextType {
+  timeRemaining: number;
+  resetTimer: (duration: number) => void;
+  stopTimer: () => void;
+  setInitialTime: (duration: number) => void; // New function to set the initial time
+}
+
+// Create the context with a default value of `undefined`
+const TimerContext = createContext<TimerContextType | undefined>(undefined);
+
+// Provider Component
+export const TimerProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [timeRemaining, setTimeRemaining] = useState<number>(0); // Default is 0
+  let timer: NodeJS.Timeout;
+
+  useEffect(() => {
+    if (timeRemaining > 0) {
+      timer = setInterval(() => {
+        setTimeRemaining((prev) => {
+          if (prev <= 1) {
+            clearInterval(timer);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+    }
+
+    return () => {
+      clearInterval(timer); // Cleanup timer on unmount
+    };
+  }, [timeRemaining]);
+
+  const resetTimer = (duration: number) => {
+    clearInterval(timer);
+    setTimeRemaining(duration);
+  };
+
+  const stopTimer = () => {
+    clearInterval(timer);
+  };
+
+  const setInitialTime = (duration: number) => {
+    setTimeRemaining(duration);
+  };
+
+  return (
+    <TimerContext.Provider
+      value={{ timeRemaining, resetTimer, stopTimer, setInitialTime }}
+    >
+      {children}
+    </TimerContext.Provider>
+  );
+};
+
+// Hook to use the TimerContext
+export const useTimer = (): TimerContextType => {
+  const context = useContext(TimerContext);
+  if (!context) {
+    throw new Error("useTimer must be used within a TimerProvider");
+  }
+  return context;
+};