4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T30b7,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { Sun, Moon, Play, Pause, RotateCcw } from "lucide-react"; import { GlassWidgetBase } from "./base-widget"; interface AnalogClockWidgetProps { time?: Date; showNumbers?: boolean; size?: "sm" | "md" | "lg"; className?: string; } function AnalogClockWidget({ time, showNumbers = true, size = "md", className, }: AnalogClockWidgetProps) { const [currentTime, setCurrentTime] = React.useState(time); React.useLayoutEffect(() => { if (time) { // eslint-disable-next-line react-hooks/set-state-in-effect setCurrentTime(time); return; } setCurrentTime(new Date()); const interval = setInterval(() => { setCurrentTime(new Date()); }, 1000); return () => clearInterval(interval); }, [time]); if (!currentTime) return null; const seconds = currentTime.getSeconds(); const minutes = currentTime.getMinutes(); const hours = currentTime.getHours() % 12; const secondDegrees = seconds * 6; const minuteDegrees = minutes * 6 + seconds * 0.1; const hourDegrees = hours * 30 + minutes * 0.5; const sizeConfig = { sm: { container: "size-24", numbers: "text-[10px]", radius: 36 }, md: { container: "size-32", numbers: "text-xs", radius: 42 }, lg: { container: "size-36", numbers: "text-sm", radius: 42 }, }; const config = sizeConfig[size]; const numbers = showNumbers ? [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] : []; return (

{/* Clock face with glass effect */}

{numbers.map((num, i) => { const angle = (i * 30 - 90) * (Math.PI / 180); const x = 50 + config.radius * Math.cos(angle); const y = 50 + config.radius * Math.sin(angle); return ( {num} ); })} {!showNumbers && Array.from({ length: 12 }).map((_, i) => { const angle = (i * 30 - 90) * (Math.PI / 180); return (

); })} {/* Center dot */}

{/* Hour hand */}

{/* Minute hand */}

{/* Second hand */}

); } interface DigitalClockWidgetProps { time?: Date; showSeconds?: boolean; format?: "12h" | "24h"; className?: string; } function DigitalClockWidget({ time, showSeconds = true, format = "12h", className, }: DigitalClockWidgetProps) { const [currentTime, setCurrentTime] = React.useState(time); React.useLayoutEffect(() => { if (time) { // eslint-disable-next-line react-hooks/set-state-in-effect setCurrentTime(time); return; } setCurrentTime(new Date()); const interval = setInterval(() => { setCurrentTime(new Date()); }, 1000); return () => clearInterval(interval); }, [time]); if (!currentTime) return null; const hours = currentTime.getHours(); const minutes = currentTime.getMinutes(); const seconds = currentTime.getSeconds(); const displayHours = format === "12h" ? hours % 12 || 12 : hours; const period = hours >= 12 ? "PM" : "AM"; return (

{displayHours.toString().padStart(2, "0")}:{minutes.toString().padStart(2, "0")} {showSeconds && ( :{seconds.toString().padStart(2, "0")} )} {format === "12h" && {period}}

); } interface WorldClockWidgetProps { clocks: Array<{ city: string; timezone: string; isDay?: boolean; }>; className?: string; } function WorldClockWidget({ clocks, className }: WorldClockWidgetProps) { const [times, setTimes] = React.useState([]); React.useEffect(() => { const updateTimes = () => { const newTimes = clocks.map((clock) => { try { return new Date().toLocaleTimeString("en-US", { timeZone: clock.timezone, hour: "numeric", minute: "2-digit", hour12: true, }); } catch { return "--:--"; } }); setTimes(newTimes); }; updateTimes(); const interval = setInterval(updateTimes, 1000); return () => clearInterval(interval); }, [clocks]); return (

{clocks.map((clock, i) => (

{clock.city} {clock.isDay !== undefined && (clock.isDay ? ( ) : ( ))}

{times[i] || "--:--"}

))}

); } interface StopwatchWidgetProps { className?: string; } function StopwatchWidget({ className }: StopwatchWidgetProps) { const [time, setTime] = React.useState(0); const [isRunning, setIsRunning] = React.useState(false); React.useEffect(() => { let interval: NodeJS.Timeout; if (isRunning) { interval = setInterval(() => setTime((t) => t + 10), 10); } return () => clearInterval(interval); }, [isRunning]); const formatTime = (ms: number) => { const minutes = Math.floor(ms / 60000); const seconds = Math.floor((ms % 60000) / 1000); const centiseconds = Math.floor((ms % 1000) / 10); return `${minutes.toString().padStart(2, "0")}:${seconds .toString() .padStart(2, "0")}.${centiseconds.toString().padStart(2, "0")}`; }; const reset = () => { setIsRunning(false); setTime(0); }; return (

{formatTime(time)}

); } interface TimerWidgetProps { initialMinutes?: number; className?: string; } function TimerWidget({ initialMinutes = 5, className }: TimerWidgetProps) { const [timeLeft, setTimeLeft] = React.useState(initialMinutes * 60 * 1000); const [isRunning, setIsRunning] = React.useState(false); const [initialTime] = React.useState(initialMinutes * 60 * 1000); React.useEffect(() => { let interval: NodeJS.Timeout; if (isRunning && timeLeft > 0) { interval = setInterval(() => setTimeLeft((t) => Math.max(0, t - 1000)), 1000); } return () => clearInterval(interval); }, [isRunning, timeLeft]); const formatTime = (ms: number) => { const minutes = Math.floor(ms / 60000); const seconds = Math.floor((ms % 60000) / 1000); return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`; }; const reset = () => { setIsRunning(false); setTimeLeft(initialTime); }; const progress = (timeLeft / initialTime) * 100; return (

{formatTime(timeLeft)}

); } export { AnalogClockWidget, DigitalClockWidget, WorldClockWidget, StopwatchWidget, TimerWidget }; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@einui","registryDependencies":["https://ui.eindev.ir/r/base-widget.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/widgets/clock-widget.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]