"use client" import * as React from "react" import { useState, useEffect } from "react" interface GlassTimeCardProps { showSeconds?: boolean; showTimezone?: boolean; } export function GlassTimeCard(props: GlassTimeCardProps) { const { showSeconds = false, showTimezone = false } = props; const [currentTime, setCurrentTime] = useState(new Date()); const [timezoneName, setTimezoneName] = useState(""); useEffect(() => { const timezoneOffset = currentTime.getTimezoneOffset(); const timezoneShorter = Intl.DateTimeFormat().resolvedOptions().timeZone; const offset = -timezoneOffset / 60; const offsetStr = offset >= 0 ? `+${offset}` : `${offset}`; setTimezoneName(`${timezoneShorter} GMT${offsetStr}`); const intervalId = setInterval(() => { setCurrentTime(new Date()); }, 1000); return () => clearInterval(intervalId); }, []); const formatTime = (date: Date): string => { return date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', second: showSeconds ? '2-digit' : undefined, hour12: false }); }; const formatDate = (date: Date): string => { const day = date.getDate(); const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; const weekday = weekdays[date.getDay()]; const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; const month = months[date.getMonth()]; return `${weekday} | ${month} ${day}`; }; return (

{formatDate(currentTime)}

{formatTime(currentTime)}

{showTimezone && (

{timezoneName}

)}

) }