mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-05-06 21:34:28 -05:00
3925b73d32
Strict improvement because we avoid the flash on clientside navigation. One practical bug was scroll restoration between tournament teams list and user page. When user pressed back they ended up at the bottom of the page because the placeholder (smaller height than actual content) rendered. With useHydrated this placeholder is no longer rendered for client side navigations.
33 lines
616 B
TypeScript
33 lines
616 B
TypeScript
import type * as React from "react";
|
|
import { useHydrated } from "~/hooks/useHydrated";
|
|
import { useTimeFormat } from "~/hooks/useTimeFormat";
|
|
|
|
export function RelativeTime({
|
|
children,
|
|
timestamp,
|
|
}: {
|
|
children: React.ReactNode;
|
|
timestamp: number;
|
|
}) {
|
|
const isHydrated = useHydrated();
|
|
const { formatDateTime } = useTimeFormat();
|
|
|
|
return (
|
|
<abbr
|
|
title={
|
|
isHydrated
|
|
? formatDateTime(new Date(timestamp), {
|
|
hour: "numeric",
|
|
minute: "numeric",
|
|
day: "numeric",
|
|
month: "long",
|
|
timeZoneName: "short",
|
|
})
|
|
: undefined
|
|
}
|
|
>
|
|
{children}
|
|
</abbr>
|
|
);
|
|
}
|