fix(clock preview): static time

src/features/time/Clock.jsx

@@ -58,9 +58,9 @@ const ClockContent = () => {
   );
 };
 
-const Clock = () => {
+const Clock = ({ isPreview, staticTime }) => {
   return (
-    <TimeProvider>
+    <TimeProvider staticTime={staticTime}>
       <ClockContent />
     </TimeProvider>
   );

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');
 

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;
+};

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>
   );
 };