36 lines
1.5 KiB
TypeScript
36 lines
1.5 KiB
TypeScript
import clsx from "clsx";
|
|
import { cn } from "~/lib/utils";
|
|
import { useLocaleFormatters } from "~/locale/format";
|
|
import type { DateDisplay } from "~/utils/shared/DateUtils";
|
|
|
|
export default function DateCell({ date, displays = ["ymd", "ago"], className }: { date: Date | null; displays?: DateDisplay[]; className?: string }) {
|
|
const fmt = useLocaleFormatters();
|
|
return (
|
|
<>
|
|
{date && (
|
|
<div title={fmt.dateTime(date)} className={cn("flex flex-col", className)}>
|
|
{displays.includes("ymd") && <div>{fmt.date(date, { dateStyle: "medium" })}</div>}
|
|
{displays.includes("dm") && <div>{fmt.date(date, { day: "numeric", month: "short" })}</div>}
|
|
{displays.includes("mdy") && <div>{fmt.date(date, { dateStyle: "long" })}</div>}
|
|
{displays.includes("hms") && <div>{fmt.date(date, { timeStyle: "medium" })}</div>}
|
|
{displays.includes("ymdhms") && <div>{fmt.dateTime(date)}</div>}
|
|
{displays.includes("ymdhmsms") && (
|
|
<div>
|
|
{fmt.date(date, {
|
|
year: "numeric",
|
|
month: "2-digit",
|
|
day: "2-digit",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
second: "2-digit",
|
|
fractionalSecondDigits: 3,
|
|
})}
|
|
</div>
|
|
)}
|
|
{displays.includes("ago") && <div className={clsx(displays.length > 1 && "text-xs")}>{fmt.relativeDate(date)}</div>}
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|