Status Bar
Timezone Toggle
Compact timezone pill for a dashboard status bar. Left-click cyclesUTC → Local → UTC+3; right-click opens a dropdown of all offsets. Set expandOnHover to open the full list on hover instead. Color-coded blue/purple/green and persisted to localStorage.
Preview
Left-click to cycle; right-click for the full list.
Expand on hover
With expandOnHover, hovering the pill opens the full timezone picker — pick any of the available offsets. Left-click still cycles the common three.
Source
Copy this file to components/status/timezone-toggle.tsx
tsx
'use client'
import * as React from 'react'
import { Clock } from 'lucide-react'
import { cn } from '@/lib/utils'
export const TZ_OPTIONS = [
{ value: 'utc', label: 'UTC', offset: 0 },
{ value: 'local', label: 'LOC', offset: null },
{ value: 'utc+3', label: '+3', offset: 3 },
// ...more offsets
] as const
export type TZValue = (typeof TZ_OPTIONS)[number]['value']
export interface TimezoneToggleProps {
value?: TZValue
defaultValue?: TZValue
onChange?: (tz: TZValue) => void
expandOnHover?: boolean
storageKey?: string | null
className?: string
}
// Pill toggle. Left-click cycles UTC -> Local -> UTC+3.
// Right-click (or hover with expandOnHover) opens the full offset list.
// Persists to localStorage when uncontrolled (storageKey).Props
| Prop | Type |
|---|---|
| value | TZValue |
| defaultValue | TZValue |
| onChange | (tz: TZValue) => void |
| expandOnHover | boolean |
| storageKey | string | null |
| className | string |