Horizontal World Time Zones

[V0_FILE]json:file="package.json" { "dependencies": { "date-fns": "^2.30.0", "date-fns-tz": "^2.0.0" } } [V0_FILE]javascript:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { content: [ './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', ], theme: { extend: { screens: { 'xxs': '360px', 'xs': '480px', }, }, }, plugins: [], } [V0_FILE]typescript:file="app/api/check-icon/route.ts" import { NextResponse } from 'next/server' import fs from 'fs/promises' export async function GET() { try { const filePath = 'public/apple-touch-icon.png' await fs.access(filePath) const file = await fs.readFile(filePath) return new NextResponse(file, { headers: { 'Content-Type': 'image/png', 'Cache-Control': 'public, max-age=0, must-revalidate', }, }) } catch (error) { return NextResponse.json({ error: 'Icon not found' }, { status: 404 }) } } [V0_FILE]typescriptreact:file="app/layout.tsx" import './globals.css' import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( Horizontal World Time Zones {children} ) } [V0_FILE]typescript:file="app/page.tsx" isFixed="true" isQuickEdit="true" 'use client' import { useState, useEffect, MouseEvent, TouchEvent, useRef } from 'react' import { getTimezoneOffset, formatInTimeZone } from 'date-fns-tz' import { getHourlyTimezones, findClosestTimezone } from '../utils/timezoneUtils' const HOUR_COLORS = [ '#1A1A1A', '#262626', '#333333', '#404040', '#4D4D4D', '#595959', '#666666', '#808080', '#999999', '#B3B3B3', '#CCCCCC', '#E6E6E6', '#FFFFFF', '#E6E6E6', '#CCCCCC', '#B3B3B3', '#999999', '#808080', '#666666', '#595959', '#4D4D4D', '#404040', '#333333', '#262626' ] function getGradientColor(hour: number): string { return HOUR_COLORS[hour] } export default function HorizontalWorldTimezones() { const [currentTime, setCurrentTime] = useState(new Date()) const [userTimezone, setUserTimezone] = useState('') const timezones = getHourlyTimezones() const [isDragging, setIsDragging] = useState(false) const [startX, setStartX] = useState(0) const [startY, setStartY] = useState(0) const [timeOffset, setTimeOffset] = useState(0) const containerRef = useRef(null) const lastOffsetRef = useRef(0) useEffect(() => { const now = new Date() setCurrentTime(now) const userOffset = -now.getTimezoneOffset() / 60 const closestTz = findClosestTimezone(timezones, userOffset) setUserTimezone(closestTz) const timer = setInterval(() => { if (!isDragging) { setCurrentTime(new Date()) setTimeOffset(0) lastOffsetRef.current = 0 } }, 1000) return () => clearInterval(timer) }, [isDragging]) const handleMouseDown = (e: MouseEvent) => { setIsDragging(true) setStartX(e.clientX) setStartY(e.clientY) lastOffsetRef.current = timeOffset } const handleTouchStart = (e: TouchEvent) => { setIsDragging(true) setStartX(e.touches[0].clientX) setStartY(e.touches[0].clientY) lastOffsetRef.current = timeOffset } const handleMouseMove = (e: MouseEvent) => { if (!isDragging) return const deltaX = e.clientX - startX const deltaY = e.clientY - startY updateTimeBasedOnDrag(deltaX, deltaY) } const handleTouchMove = (e: TouchEvent) => { if (!isDragging) return const deltaX = e.touches[0].clientX - startX const deltaY = e.touches[0].clientY - startY updateTimeBasedOnDrag(deltaX, deltaY) } const handleMouseUp = () => { setIsDragging(false) resetToLiveTime() } const handleTouchEnd = () => { setIsDragging(false) resetToLiveTime() } const updateTimeBasedOnDrag = (deltaX: number, deltaY: number) => { if (!containerRef.current) return const containerWidth = containerRef.current.offsetWidth const containerHeight = containerRef.current.offsetHeight const isMobile = window.innerWidth < 768 let timezoneSize: number let delta: number if (isMobile) { timezoneSize = containerHeight / timezones.length delta = deltaY } else { timezoneSize = containerWidth / timezones.length delta = deltaX } const hourChange = Math.round(delta / timezoneSize) const newOffset = lastOffsetRef.current - hourChange setTimeOffset(newOffset) } const resetToLiveTime = () => { setCurrentTime(new Date()) setTimeOffset(0) lastOffsetRef.current = 0 } const getTimezoneColors = () => { return timezones.map(tz => { const localTime = new Date(currentTime.getTime() + getTimezoneOffset(tz.name) + timeOffset * 3600000) const hours = localTime.getHours() return { tz: tz.name, color: getGradientColor(hours) } }) } const getTextColor = (timezone: string) => { const localTime = new Date(currentTime.getTime() + getTimezoneOffset(timezone) + timeOffset * 3600000) const hours = localTime.getHours() return (hours >= 18 || hours < 6) ? 'text-white' : 'text-black' } const timezoneColors = getTimezoneColors() return (

{timezones.map((tz) => { const bgColor = timezoneColors.find(tc => tc.tz === tz.name)?.color || '#000000' return (

) })}

{timezones.map((tz) => { const textColor = getTextColor(tz.name) return (

{tz.name === userTimezone && (

)}

{formatInTimeZone(new Date(currentTime.getTime() + timeOffset * 3600000), tz.name, 'HH:mm')}

{tz.cityAbbr}

{tz.cityFull}

{formatInTimeZone(new Date(currentTime.getTime() + timeOffset * 3600000), tz.name, 'HH:mm')}

{tz.cityAbbr}

{tz.cityFull}

{formatInTimeZone(new Date(currentTime.getTime() + timeOffset * 3600000), tz.name, 'EEE')}

{tz.utcOffset}

{formatInTimeZone(new Date(currentTime.getTime() + timeOffset * 3600000), tz.name, 'EEE')}

) })}

{timezones.map((tz) => (

{tz.utcOffset}

))}

) } [V0_FILE]typescript:file="utils/timezoneUtils.ts" isFixed="true" isQuickEdit="true" /** * Timezone information interface */ interface TimezoneInfo { /** Timezone name in IANA format */ name: string; /** UTC offset in hours */ offset: number; /** Three-letter city abbreviation */ cityAbbr: string; /** Full city name */ cityFull: string; /** UTC offset string representation */ utcOffset: string; } /** * Gets a list of hourly timezones with their corresponding city information * @returns {TimezoneInfo[]} Array of timezone information */ export function getHourlyTimezones(): TimezoneInfo[] { const hourlyTimezones = [ { offset: -12, cityAbbr: 'BAK', cityFull: 'Baker Island', utcOffset: '-12' }, { offset: -11, cityAbbr: 'PAG', cityFull: 'Pago Pago', utcOffset: '-11' }, { offset: -10, cityAbbr: 'HON', cityFull: 'Honolulu', utcOffset: '-10' }, { offset: -9, cityAbbr: 'ANC', cityFull: 'Anchorage', utcOffset: '-9' }, { offset: -8, cityAbbr: 'LA', cityFull: 'Los Angeles', utcOffset: '-8' }, { offset: -7, cityAbbr: 'DEN', cityFull: 'Denver', utcOffset: '-7' }, { offset: -6, cityAbbr: 'CHI', cityFull: 'Chicago', utcOffset: '-6' }, { offset: -5, cityAbbr: 'NYC', cityFull: 'New York City', utcOffset: '-5' }, { offset: -4, cityAbbr: 'HAL', cityFull: 'Halifax', utcOffset: '-4' }, { offset: -3, cityAbbr: 'RIO', cityFull: 'Rio de Janeiro', utcOffset: '-3' }, { offset: -2, cityAbbr: 'FER', cityFull: 'Fernando de Noronha', utcOffset: '-2' }, { offset: -1, cityAbbr: 'PRA', cityFull: 'Praia', utcOffset: '-1' }, { offset: 0, cityAbbr: 'LON', cityFull: 'London', utcOffset: '+0' }, { offset: 1, cityAbbr: 'PAR', cityFull: 'Paris', utcOffset: '+1' }, { offset: 2, cityAbbr: 'CAI', cityFull: 'Cairo', utcOffset: '+2' }, { offset: 3, cityAbbr: 'MOS', cityFull: 'Moscow', utcOffset: '+3' }, { offset: 4, cityAbbr: 'DUB', cityFull: 'Dubai', utcOffset: '+4' }, { offset: 5, cityAbbr: 'KAR', cityFull: 'Karachi', utcOffset: '+5' }, { offset: 6, cityAbbr: 'DHK', cityFull: 'Dhaka', utcOffset: '+6' }, { offset: 7, cityAbbr: 'BKK', cityFull: 'Bangkok', utcOffset: '+7' }, { offset: 8, cityAbbr: 'SIN', cityFull: 'Singapore', utcOffset: '+8' }, { offset: 9, cityAbbr: 'TOK', cityFull: 'Tokyo', utcOffset: '+9' }, { offset: 10, cityAbbr: 'SYD', cityFull: 'Sydney', utcOffset: '+10' }, { offset: 11, cityAbbr: 'NOU', cityFull: 'Noumea', utcOffset: '+11' }, ]; return hourlyTimezones.map(tz => ({ ...tz, name: `Etc/GMT${tz.offset <= 0 ? '+' : '-'}${Math.abs(tz.offset)}`, // Note: Etc/GMT uses opposite sign })); } export function findClosestTimezone(timezones: TimezoneInfo[], userOffset: number): string { return timezones.reduce((closest, tz) => { return Math.abs(tz.offset - userOffset) < Math.abs(closest.offset - userOffset) ? tz : closest; }).name; } [V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .touch-none { touch-action: none; } .pb-safe { padding-bottom: env(safe-area-inset-bottom); } } html, body { overflow: hidden; position: fixed; width: 100%; height: 100%; } @media screen and (max-width: 360px) { .xxs\:text-\[4px\] { font-size: 4px; } .xxs\:text-\[5px\] { font-size: 5px; } } @media screen and (min-width: 361px) and (max-width: 639px) { .xs\:text-\[5px\] { font-size: 5px; } .xs\:text-\[6px\] { font-size: 6px; } }

About

About