From c51e8fa1d909ff8fd19633e0433d943dae767aaa Mon Sep 17 00:00:00 2001
From: alexsparkes <alexsparkes@gmail.com>
Date: Sun, 15 Dec 2024 22:35:34 +0000
Subject: [PATCH] fix(clock preview): static time

---
 src/features/time/Clock.jsx                |  4 ++--
 src/features/time/context/TimeContext.jsx  |  6 ++++--
 src/features/time/hooks/useClockTime.js    | 11 +++++++++++
 src/features/time/options/ClockPreview.jsx |  7 +++++--
 4 files changed, 22 insertions(+), 6 deletions(-)
 create mode 100644 src/features/time/hooks/useClockTime.js

diff --git a/src/features/time/Clock.jsx b/src/features/time/Clock.jsx
index 0e9b96e0..bde566ad 100644
--- a/src/features/time/Clock.jsx
+++ b/src/features/time/Clock.jsx
@@ -58,9 +58,9 @@ const ClockContent = () => {
   );
 };
 
-const Clock = () => {
+const Clock = ({ isPreview, staticTime }) => {
   return (
-    <TimeProvider>
+    <TimeProvider staticTime={staticTime}>
       <ClockContent />
     </TimeProvider>
   );
diff --git a/src/features/time/context/TimeContext.jsx b/src/features/time/context/TimeContext.jsx
index bef04136..b8c6f350 100644
--- a/src/features/time/context/TimeContext.jsx
+++ b/src/features/time/context/TimeContext.jsx
@@ -3,10 +3,12 @@ import { convertTimezone } from 'utils/date';
 
 const TimeContext = createContext();
 
-export const TimeProvider = ({ children }) => {
-  const [currentDate, setCurrentDate] = useState(new Date());
+export const TimeProvider = ({ children, staticTime }) => {
+  const [currentDate, setCurrentDate] = useState(staticTime || new Date());
 
   const updateTime = () => {
+    if (staticTime) return; // Don't update if using static time
+
     let now = new Date();
     const timezone = localStorage.getItem('timezone');
 
diff --git a/src/features/time/hooks/useClockTime.js b/src/features/time/hooks/useClockTime.js
new file mode 100644
index 00000000..29e17f8a
--- /dev/null
+++ b/src/features/time/hooks/useClockTime.js
@@ -0,0 +1,11 @@
+import { useTime } from '../context/TimeContext';
+import { usePreviewTime } from '../context/PreviewTimeContext';
+
+export const useClockTime = (isPreview = false) => {
+  // Always call both hooks to maintain hook order
+  const previewContext = usePreviewTime();
+  const liveContext = useTime();
+
+  // Return the appropriate context based on isPreview
+  return isPreview ? previewContext : liveContext;
+};
diff --git a/src/features/time/options/ClockPreview.jsx b/src/features/time/options/ClockPreview.jsx
index 05c23a0e..4822bc95 100644
--- a/src/features/time/options/ClockPreview.jsx
+++ b/src/features/time/options/ClockPreview.jsx
@@ -1,11 +1,14 @@
 import React from 'react';
-import { motion } from 'framer-motion';
 import Clock from 'features/time/Clock';
 
 const ClockPreview = ({ zoomLevel = 100 }) => {
+  // Create a static time - 10:10:30
+  const previewTime = new Date();
+  previewTime.setHours(10, 10, 30);
+
   return (
     <div className="relative w-full h-[300px] bg-gradient-to-br from-neutral-900 to-neutral-800 rounded-lg overflow-hidden grid place-items-center">
-      <Clock isPreview={true} />
+      <Clock isPreview={true} staticTime={previewTime} />
     </div>
   );
 };