Clock Widgets

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import { Sun, Moon, Play, Pause, RotateCcw } from "lucide-react";
6import { GlassWidgetBase } from "./base-widget";
7 
8interface AnalogClockWidgetProps {
9  time?: Date;
10  showNumbers?: boolean;
11  size?: "sm" | "md" | "lg";
12  className?: string;
13}
14 
15function AnalogClockWidget({
16  time,
17  showNumbers = true,
18  size = "md",
19  className,
20}: AnalogClockWidgetProps) {
21  const [currentTime, setCurrentTime] = React.useState<Date | undefined>(time);
22 
23  React.useLayoutEffect(() => {
24    if (time) {
25      // eslint-disable-next-line react-hooks/set-state-in-effect
26      setCurrentTime(time);
27      return;
28    }
29     
30    setCurrentTime(new Date());
31    const interval = setInterval(() => {
32       
33      setCurrentTime(new Date());
34    }, 1000);
35    return () => clearInterval(interval);
36  }, [time]);
37 
38  if (!currentTime) return null;
39 
40  const seconds = currentTime.getSeconds();
41  const minutes = currentTime.getMinutes();
42  const hours = currentTime.getHours() % 12;
43 
44  const secondDegrees = seconds * 6;
45  const minuteDegrees = minutes * 6 + seconds * 0.1;
46  const hourDegrees = hours * 30 + minutes * 0.5;
47 
48  const sizeConfig = {
49    sm: { container: "size-24", numbers: "text-[10px]", radius: 36 },
50    md: { container: "size-32", numbers: "text-xs", radius: 42 },
51    lg: { container: "size-36", numbers: "text-sm", radius: 42 },
52  };
53 
54  const config = sizeConfig[size];
55  const numbers = showNumbers ? [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] : [];
56 
57  return (
58    <GlassWidgetBase className={cn("p-3 w-full h-full flex items-center justify-center", className)} size="sm" glowColor="blue">
59      <div className={cn("relative", config.container)}>
60        {/* Clock face with glass effect */}
61        <div className="absolute inset-0 rounded-full border border-white/20  bg-white/5 backdrop-blur-sm shadow-inner" />
62 
63        {numbers.map((num, i) => {
64          const angle = (i * 30 - 90) * (Math.PI / 180);
65          const x = 50 + config.radius * Math.cos(angle);
66          const y = 50 + config.radius * Math.sin(angle);
67          return (
68            <span
69              key={num}
70              className={cn("absolute text-white/70 font-light", config.numbers)}
71              style={{
72                left: `${x}%`,
73                top: `${y}%`,
74                transform: "translate(-50%, -50%)",
75              }}
76            >
77              {num}
78            </span>
79          );
80        })}
81 
82// … truncated