Relative timedata-display
A time element that shows an instant as a relative phrase, refreshes on a unit-aligned interval, pauses while the page is hidden and exposes the absolute time as a title.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/relative-timeDefault
- Paid
- Check-in
- Unknown
relative-time-demo.tsx
import { RelativeTime } from "@/components/ui/relative-time";
const SERVER_NOW = Date.UTC(2028, 1, 29, 12, 0, 0);
export default function RelativeTimeDemo() { return ( <ul className="flex flex-col gap-1 text-sm"> <li> Paid <RelativeTime value={SERVER_NOW - 5 * 60_000} serverNow={SERVER_NOW} /> </li> <li> Check-in <RelativeTime value="2028-03-01T14:00:00+09:00" serverNow={SERVER_NOW} /> </li> <li> Unknown <RelativeTime value="not a date" serverNow={SERVER_NOW} /> </li> </ul> );}