Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | 22x 22x 22x 22x 22x 22x 502x 745x 740x 745x 745x | import { Tooltip } from "@mui/material";
import { Timestamp } from "google-protobuf/google/protobuf/timestamp_pb";
import { useTranslation } from "i18n";
import { localizeDateTime, localizeRelativeTime } from "i18n/datetimes";
import { GLOBAL } from "i18n/namespaces";
import { Temporal } from "temporal-polyfill";
import { instantToPlainDateTime, timestampToInstant } from "utils/date";
interface RelativeTimeProps extends React.HTMLAttributes<HTMLTimeElement> {
instant: Temporal.Instant | Timestamp.AsObject;
smallestUnit?: Temporal.PluralizeUnit<Temporal.TimeUnit>;
capitalize?: boolean;
}
/**
* Unstyled component displaying an instant in time as a relative time (e.g. "3 hours ago"),
* with a tooltip showing the full date and time.
*/
export default function RelativeTime({ instant, smallestUnit, capitalize, ...rest }: RelativeTimeProps) {
if (!(instant instanceof Temporal.Instant)) {
instant = timestampToInstant(instant);
}
const {
t,
i18n: { language: locale },
} = useTranslation(GLOBAL);
const plainDateTime = instantToPlainDateTime(instant);
return (
<Tooltip title={localizeDateTime(plainDateTime, locale)} placement="top" arrow>
<time dateTime={instant.toString()} {...rest}>
{localizeRelativeTime(instant, locale, { capitalize, smallestUnit, t })}
</time>
</Tooltip>
);
}
|