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:T257b,"use client"; import * as React from "react"; import ms from "ms"; import { Tooltip, TooltipTrigger, TooltipContent, } from "@/registry/optics/tooltip"; import { Button } from "@/registry/optics/button"; import { cn } from "@/registry/optics/lib/utils"; // Constantes de tiempo calculadas una vez para evitar recálculos const ONE_SECOND = ms("1s"); const ONE_MINUTE = ms("1m"); const ONE_HOUR = ms("1h"); const ONE_DAY = ms("1d"); function Timezone({ timestamp = Date.now(), render = null, className = "", side = "top", sideOffset = 4, ...props }) { const [userTimezone, setUserTimezone] = React.useState(null); const [formattedUserTime, setFormattedUserTime] = React.useState(""); const [formattedUtcTime, setFormattedUtcTime] = React.useState(""); const [relativeTime, setRelativeTime] = React.useState(""); const [isOpen, setIsOpen] = React.useState(false); const [copiedButton, setCopiedButton] = React.useState(null); const [isExiting, setIsExiting] = React.useState(false); const exitTimeoutRef = React.useRef(null); const resetTimeoutRef = React.useRef(null); // Memoizar los formatters para evitar recrearlos en cada render const utcFormatter = React.useMemo( () => new Intl.DateTimeFormat("en-US", { timeZone: "UTC", year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "2-digit", second: "2-digit", hour12: true, }), [], ); const userFormatter = React.useMemo( () => userTimezone ? new Intl.DateTimeFormat("en-US", { timeZone: userTimezone, year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "2-digit", second: "2-digit", hour12: true, }) : null, [userTimezone], ); React.useEffect(() => { // Obtener el huso horario del usuario de manera no invasiva if (typeof window !== "undefined") { const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone; setUserTimezone(timeZone); } }, []); // Función para actualizar los valores de tiempo const updateTimeValues = React.useCallback(() => { if (!timestamp || !userTimezone || !userFormatter) return; // Convertir timestamp a Date // Acepta: string ISO (timestampz), número en milisegundos, o número en segundos let date; if (typeof timestamp === "string") { // String ISO (timestampz) o timestamp en string date = new Date(timestamp); } else if (typeof timestamp === "number") { // Si es menor a 1e12, asumimos que está en segundos y lo convertimos a milisegundos // Si es mayor o igual, asumimos que ya está en milisegundos date = new Date(timestamp < 1e12 ? timestamp * 1000 : timestamp); } else { date = new Date(timestamp); } // Validar que la fecha sea válida if (isNaN(date.getTime())) { setFormattedUserTime("Invalid date"); setFormattedUtcTime("Invalid date"); setRelativeTime("Invalid date"); return; } // Formatear fecha en UTC setFormattedUtcTime(utcFormatter.format(date)); // Formatear fecha en la zona horaria del usuario setFormattedUserTime(userFormatter.format(date)); // Calcular tiempo relativo usando constantes precalculadas const now = new Date(); const diffInMs = date.getTime() - now.getTime(); const absDiffInMs = Math.abs(diffInMs); const isPast = diffInMs < 0; const direction = isPast ? "ago" : "in"; let relative; // Si está dentro de los minutos (< 1 hora), mostrar minutos y segundos if (absDiffInMs < ONE_HOUR) { const minutes = Math.floor(absDiffInMs / ONE_MINUTE); const remainingMs = absDiffInMs % ONE_MINUTE; const seconds = Math.floor(remainingMs / ONE_SECOND); if (seconds > 0 && minutes > 0) { // Mostrar minutos y segundos const minutesStr = ms(minutes * ONE_MINUTE, { long: true }); const secondsStr = ms(seconds * ONE_SECOND, { long: true }); relative = `${minutesStr} ${secondsStr} ${direction}`; } else if (minutes > 0) { // Solo minutos relative = `${ms(minutes * ONE_MINUTE, { long: true })} ${direction}`; } else { // Solo segundos relative = `${ms(absDiffInMs, { long: true })} ${direction}`; } } // Si está dentro de las horas (< 24 horas), mostrar horas y minutos else if (absDiffInMs < ONE_DAY) { const hours = Math.floor(absDiffInMs / ONE_HOUR); const remainingMs = absDiffInMs % ONE_HOUR; const minutes = Math.floor(remainingMs / ONE_MINUTE); if (minutes > 0) { // Mostrar horas y minutos const hoursStr = ms(hours * ONE_HOUR, { long: true }); const minutesStr = ms(minutes * ONE_MINUTE, { long: true }); relative = `${hoursStr} ${minutesStr} ${direction}`; } else { // Solo horas relative = `${ms(hours * ONE_HOUR, { long: true })} ${direction}`; } } // Para otros casos, usar el string completo de ms else { relative = `${ms(absDiffInMs, { long: true })} ${direction}`; } setRelativeTime(relative); }, [timestamp, userTimezone, userFormatter, utcFormatter]); // Actualizar cuando cambian timestamp o userTimezone React.useEffect(() => { updateTimeValues(); }, [updateTimeValues]); // Actualizar en tiempo real mientras el tooltip esté abierto React.useEffect(() => { if (!isOpen) return; // Actualizar inmediatamente updateTimeValues(); // Configurar intervalo para actualizar cada segundo const interval = setInterval(() => { updateTimeValues(); }, 1000); // Limpiar intervalo cuando el tooltip se cierre return () => { clearInterval(interval); }; }, [isOpen, updateTimeValues]); const clearCopyTimers = React.useCallback(() => { if (exitTimeoutRef.current) { clearTimeout(exitTimeoutRef.current); exitTimeoutRef.current = null; } if (resetTimeoutRef.current) { clearTimeout(resetTimeoutRef.current); resetTimeoutRef.current = null; } }, []); // Función para copiar al portapapeles const copyToClipboard = React.useCallback( async (text, buttonId) => { if ( !text || text === "—" || text === "Invalid date" || text === "Loading..." ) { return; } try { await navigator.clipboard.writeText(text); clearCopyTimers(); setIsExiting(false); setCopiedButton(buttonId); // Iniciar animación de salida después de 1.5 segundos exitTimeoutRef.current = setTimeout(() => { setIsExiting(true); // Resetear el estado después de la animación de salida (300ms) resetTimeoutRef.current = setTimeout(() => { setCopiedButton(null); setIsExiting(false); }, 300); }, 1500); } catch (err) { console.error("Error al copiar al portapapeles:", err); } }, [clearCopyTimers], ); React.useEffect(() => { return () => { clearCopyTimers(); }; }, [clearCopyTimers]); return (

); } Timezone.displayName = "Timezone"; export { Timezone }; 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","ms",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/ms","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":"ms"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L4e",null,{"namespace":"@optics","registryDependencies":["https://optics.agusmayol.com.ar/r/tooltip.json","https://optics.agusmayol.com.ar/r/button.json","https://optics.agusmayol.com.ar/r/utils.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/optics/timezone.jsx","content":"$50","type":"registry:component","target":"components/optics/timezone.jsx"}],"className":"h-[70svh] min-h-80"}]]}]