TimezoneWidget

timezonewidget-1779388706103.tsx

'use client';
import { useState, useEffect } from 'react';

export default function TimezoneWidget() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const t = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(t);
  }, []);

  const zones = [
    { city: 'New York', tz: 'America/New_York', flag: '🗽' },
    { city: 'London', tz: 'Europe/London', flag: '🎡' },
    { city: 'Paris', tz: 'Europe/Paris', flag: '🗼' },
    { city: 'Tokyo', tz: 'Asia/Tokyo', flag: '🗾' },
    { city: 'Sydney', tz: 'Australia/Sydney', flag: '🦘' },
  ];

  const formatTime = (tz) => {
    try {
      return time.toLocaleTimeString('en-US', { timeZone: tz, hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
    } catch { return '--:--:--'; }
  };

  const getHour = (tz) => {
    try {
      return parseInt(time.toLocaleTimeString('en-US', { timeZone: tz, hour: '2-digit', hour12: false }));
    } catch { return 0; }
  };

  const isDaytime = (tz) => { const h = getHour(tz); return h >= 6 && h < 20; };

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', width: '300px' }}>
      <h3 style={{ color: '#F5F5F0', margin: '0 0 16px 0', fontSize: '14px', fontWeight: 700 }}>World Clock</h3>
      {zones.map(({ city, tz, flag }) => (
        <div key={city} style={{
          display: 'flex', alignItems: 'center', gap: '12px',
          padding: '10px 14px', marginBottom: '6px',
          background: 'rgba(255,255,255,0.03)',
          border: '1px solid rgba(255,255,255,0.06)',
          borderRadius: '10px',
        }}>
          <span style={{ fontSize: '18px' }}>{flag}</span>
          <span style={{ flex: 1, color: 'rgba(245,245,240,0.6)', fontSize: '13px' }}>{city}</span>
          <span style={{ background: isDaytime(tz) ? 'rgba(255,200,50,0.1)' : 'rgba(99,102,241,0.1)', borderRadius: '4px', padding: '2px 6px', fontSize: '10px', color: isDaytime(tz) ? '#fbbf24' : '#6366f1', marginRight: '8px' }}>
            {isDaytime(tz) ? '☀️' : '🌙'}
          </span>
          <code style={{ color: '#C9A84C', fontSize: '14px', fontFamily: 'monospace', fontWeight: 700 }}>{formatTime(tz)}</code>
        </div>
      ))}
    </div>
  );
}

Component info

CategoryUtility

Frameworkreact

TierFREE

Copies0

About

Multi-timezone world clock widget

More from Utility

'use client'
import { useState } from 'react'

const PRESETS = [
  { name: 'Gold', primary: '#C9A84C', bg: '#0A0A0A', accent: '#6366f1' },
  { name: 'Neon', primary: '#22d3ee', bg: '#030712', accent: '#a78bfa' },
  { name: 'Crimson', primary: '#ef444

ThemeCustomizer

Utility

'use client'
import { useState, useCallback } from 'react'

interface UploadedFile {
  id: number
  name: string
  size: number
  type: string
  progress: number
  done: boolean
  error?: string
}

const ALLOWED = ['image/png', 'image/jpeg', 'image/w

FileUploadZone

Utility

'use client'
import { useState } from 'react'

interface ClipItem {
  id: number
  content: string
  type: 'text' | 'code' | 'url' | 'email'
  pinned: boolean
  time: number
}

const INITIAL: ClipItem[] = [
  { id: 1, content: 'npx empire-ui-mcp --st

ClipboardManager

Utility

'use client';
import { useState } from 'react';

export default function NeonToggle({ label = "Enable AI Mode", defaultOn = false, color = "#6366f1" }) {
  const [on, setOn] = useState(defaultOn);
  const [pressing, setPressing] = useState(false);

NeonToggle

Utility