A single formatter component for displaying dates, numbers, currency, percentages, byte sizes, durations and relative times with locale-aware Intl formatting, so a dashboard doesn't mix toLocaleString, toFixed and hand-rolled padding on one screen.
import Fmt from "@/components/ui/fmt";
export default function FmtDemo() {
const d = new Date();
const twoHoursAgo = new Date(d.getTime() - 2 * 60 * 60 * 1000);
const rows = [
{
label: "date · DD.MM.YYYY HH:mm:ss",
node: <Fmt type="date" value={d} format="DD.MM.YYYY HH:mm:ss" />,
},
{
label: "date · MMMM D, YYYY",
node: <Fmt type="date" value={d} format="MMMM D, YYYY" />,
},
{
label: "date · Intl long",
node: <Fmt type="date" value={d} format="long" />,
},
{
label: "number · 2 decimals",
node: <Fmt type="number" value={1234567.891} decimals={2} />,
},
{
label: "currency · EUR",
node: <Fmt type="currency" value={1234.5} currency="EUR" />,
},
{
label: "percent",
node: <Fmt type="percent" value={0.982} decimals={1} />,
},
{ label: "bytes", node: <Fmt type="bytes" value={748100} /> },
{ label: "duration", node: <Fmt type="duration" value={3792} /> },
{ label: "relative", node: <Fmt type="relative" value={twoHoursAgo} /> },
];
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-8 text-foreground">
<div className="w-full max-w-sm space-y-3 rounded-lg border border-border bg-card p-6">
{rows.map((row) => (
<div
key={row.label}
className="flex items-baseline justify-between gap-4 text-sm"
>
<span className="text-muted-foreground">{row.label}</span>
<span className="font-mono tabular-nums text-card-foreground">
{row.node}
</span>
</div>
))}
</div>
</div>
);
}