Instrument watch
A precision watch face with a rotating compass, transient readings, and an action flash.
10:09TUESDAY, APR 1
Select a reading · Rotate the crown · Press the action button
Implementation
1"use client";2 3import { useEffect, useRef, useState } from "react";4import { Compass, Mountain, Sun, Thermometer } from "lucide-react";5 6type ReadingKey = "uv" | "temperature" | "heading" | "altitude";7 8export type InstrumentReading = {9 value: string;10 unit?: string;11 detailValue: string;12 detailText: string;13};14 15export type InstrumentWatchProps = {16 time: string;17 date: string;18 readings: Record<ReadingKey, InstrumentReading>;19 initialRotation?: number;20 onAction?: () => void;21};22 23const bearings = [24 "N",25 "30",26 "60",27 "E",28 "120",