Квадратный циферблат, в котором шкала минут и цифры идут не по кругу, а вдоль скруглённого прямоугольника карточки. Часовая и минутная стрелки показывают время выбранного часового пояса, а секундная стрелка вращается плавно, без рывков.
Циферблат подстраивается под размер контейнера и тему сайта: в тёмной теме шкала и стрелки светлые, в светлой — тёмные.
Скопируйте эти файлы в components/watch-face/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { WatchFace } from "@/components/watch-face/watch-face";
export function Clock() {
return (
<div style={{ width: 280, height: 280 }}>
<WatchFace timeZone="Europe/Moscow" />
</div>
);
}timeZone?Часовой пояс IANA
Тип string·По умолчанию "Asia/Kolkata"
cornerRadius?Скругление карточки, вдоль которого идёт шкала
Тип number·По умолчанию 16
accentColor?Цвет секундной стрелки
Тип string·По умолчанию цвет бренда
showNumerals?Показывать цифры
Тип boolean·По умолчанию true
className?Классы корневого блока
Тип string