Timezone Row

World-clock card listing city and zone next to the local time, with an emerald Local pill on your row.

Meeting in multiple zones
IstanbulLocalEurope/Istanbul
14:00GMT+3
LondonEurope/London
12:00GMT+1
San FranciscoAmerica/Los_Angeles
04:00GMT-7
TokyoAsia/Tokyo
20:00GMT+9

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Calendar17 } from "@/components/beste/piece/calendar17";

<Calendar17
  heading="Meeting in multiple zones"
  rows={[
    {
      "city": "Istanbul",
      "zone": "Europe/Istanbul",
      "time": "14:00",
      "offset": "GMT+3",
      "isLocal": true
    },
    {
      "city": "London",
      "zone": "Europe/London",
      "time": "12:00",
      "offset": "GMT+1"
    },
    {
      "city": "San Francisco",
      "zone": "America/Los_Angeles",
      "time": "04:00",
      "offset": "GMT-7"
    },
    {
      "city": "Tokyo",
      "zone": "Asia/Tokyo",
      "time": "20:00",
      "offset": "GMT+9"
    }
  ]}
/>