# RelativeTime

> A `<time>` that reads "2m ago" for the last week and a date after it, with the absolute local time and UTC in its title.

```ts
import { RelativeTime } from "@sdxc/ui";
```

Renders the moment as `<time datetime>` with its text and absolute title. With `local` it
hands the same props to RelativeTimeLocal, so the server HTML is identical and the
viewer's zone replaces the server's once the island hydrates.

## Examples

```tsx
<RelativeTime date={check.at} now={ctx.requestTime} locale={locale} />
```

```tsx
<RelativeTime date={deploy.createdAt} now={now} locale={locale} local />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `date` | `DateInput` | The moment to show. |
| `now?` | `DateInput` | The reference moment; pass the request's time so server and tests render the same text. |
| `locale?` | `string` | BCP 47 locale for the text and the title. |
| `timeZone?` | `string` | IANA zone the server formats in. Defaults to UTC. |
| `local?` | `boolean` | Hydrates the RelativeTimeLocal island, which rewrites the date and title in the viewer's zone and locale, counting from `now` when given and their clock otherwise. Needs `@sdxc/ui/relative-time#RelativeTimeLocal` in the app's browser entry. |

Also accepts everything in `Omit<TagProps<"time">, "dateTime" | "children">`.