Timer Widgets

package.json

@@ -15,6 +15,7 @@
     "nanoid": "^5.1.6",
     "openmeteo": "^1.2.1",
     "react": "^19.1.1",
+    "react-calendar": "^6.0.0",
     "react-dom": "^19.1.1",
     "typescript": "^5.9.2"
   },

src/WidgetMap.tsx

@@ -5,6 +5,8 @@ import { Search, SearchSettings } from "./widgets/Search";
 import { Shortcut, ShortcutSettings } from "./widgets/Shortcut";
 import { ToDoList } from "./widgets/ToDoList";
 import { Weather } from "./widgets/Weather";
+//import { CountdownTimer } from "./widgets/TimerW";
+import { TimerWidget } from "./widgets/TimerW2";
 
 const WidgetMap = {
   battery: {
@@ -24,7 +26,7 @@ const WidgetMap = {
 
   notepad: {
     component: Notepad,
-    size: { width: 4, height: 4 },
+    size: { width: 4, height: 2 },
   },
 
   search: {
@@ -46,13 +48,19 @@ const WidgetMap = {
 
   todo: {
     component: ToDoList,
-    size: { width: 4, height: 4 },
+    size: { width: 4, height: 2 },
   },
 
   weather: {
     component: Weather,
     size: { width: 6, height: 1 },
   },
+
+  timer: {
+    component: TimerWidget,
+    //component: CountdownTimer,
+    size: { width: 4, height: 1 },
+  },
 };
 
 export default WidgetMap;

src/widgets/CountDown2.tsx

@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from 'react';
+import { WidgetState } from "../Widget";
+
+interface CountdownTimerProps {
+    targetDate: Date;
+  }
+
+export const CountdownTimer: React.FC<CountdownTimerProps> = ({ targetDate }) => {
+    const calculateTimeLeft = () => {
+      const difference = targetDate.getTime() - new Date().getTime();
+      let timeLeft = {};
+
+      if (difference > 0) {
+        timeLeft = {
+          days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+          hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+          minutes: Math.floor((difference / 1000 / 60) % 60),
+          seconds: Math.floor((difference / 1000) % 60),
+        };
+      }
+      return timeLeft;
+    };
+
+    const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        setTimeLeft(calculateTimeLeft());
+      }, 1000);
+
+      // Clear timeout if the component is unmounted
+      return () => clearTimeout(timer);
+    });
+
+    const timerComponents = [];
+
+    Object.keys(timeLeft).forEach((interval) => {
+      if (!(timeLeft as any)[interval]) {
+        return;
+      }
+
+      timerComponents.push(
+        <span key={interval}>
+          {
+            {
+              days: `${(timeLeft as any)[interval]}d`,
+              hours: `${(timeLeft as any)[interval]}h`,
+              minutes: `${(timeLeft as any)[interval]}m`,
+              seconds: `${(timeLeft as any)[interval]}s`,
+            }[interval]
+          }{' '}
+        </span>
+      );
+    });
+
+    return (
+      <div>
+        {timerComponents.length ? timerComponents : <span>Time's up!</span>}
+      </div>
+    );
+  };
+
+ // export default CountdownTimer;

src/widgets/CountDown5.tsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+import { WidgetState } from "../Widget";
+import styles from "./CountDown.css";
+
+export function CountdownTimer5({ deadline }) {
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft(deadline));
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft(deadline));
+    }, 1000);
+
+    // Cleanup function to clear the interval
+    return () => clearInterval(timer);
+  }, [deadline]); 
+  // Re-run effect if deadline changes
+
+  function calculateTimeLeft(targetDate) {
+    const difference = +new Date(targetDate) - +new Date();
+    let timeLeft = {};
+
+    if (difference > 0) {
+      timeLeft = {
+        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+        minutes: Math.floor((difference / 1000 / 60) % 60),
+        seconds: Math.floor((difference / 1000) % 60),
+      };
+    }
+    return timeLeft;
+  }
+
+  return (
+    <div>
+      {Object.keys(timeLeft).length ? (
+        <p>
+          {timeLeft.days}d {timeLeft.hours}h {timeLeft.minutes}m {timeLeft.seconds}s
+        </p>
+      ) : (
+        <p>Time's up!</p>
+      )}
+    </div>
+  );
+}
+
+//export default CountdownTimer;