no. 29 · extras

Live clock

A ticking clock for any time zone.

Preview

Lisbon · --:--:-- WET

Install

npx shadcn@latest add https://curio-components.vercel.app/r/live-clock.json

First curio component? Also add @import "./curio.css"; to your global CSS. See installation.

Usage

import { LiveClock } from '@/components/curio/extras/live-clock'

export function Clock() {
  return <LiveClock timeZone="Europe/Lisbon" place="Lisbon" zoneLabel="WET" />
}

Props

Prop	Type	Default	Description
timeZone	string	-	Iana time zone.
place	string	-	Shown before the time.
zoneLabel	string	-	Shown after the time.
seconds	boolean	true	Show seconds.

Source

This is exactly what the command copies into your project.

components/curio/extras/live-clock.tsx

'use client'

import { useEffect, useState } from 'react'

// ticking clock for a place, e.g. "pune · 21:04:12 ist"
export function LiveClock({ timeZone, place, zoneLabel, seconds = true }: { timeZone: string; place?: string; zoneLabel?: string; seconds?: boolean }) {
  const [time, setTime] = useState<string | null>(null)

  useEffect(() => {
    const fmt = new Intl.DateTimeFormat('en-GB', { hour: '2-digit', minute: '2-digit', second: seconds ? '2-digit' : undefined, timeZone })
    const tick = () => setTime(fmt.format(new Date()))
    tick()
    const id = window.setInterval(tick, 1000)
    return () => window.clearInterval(id)
  }, [timeZone, seconds])

  return (
    <span className="text-xs tabular-nums" style={{ color: 'var(--curio-muted)' }}>
      {place && <>{place} · </>}
      <span style={{ color: 'var(--curio-fg)' }}>{time ?? (seconds ? '--:--:--' : '--:--')}</span>
      {zoneLabel && <> {zoneLabel}</>}
    </span>
  )
}

← Theme toggle