Openstatus
www.openstatus.dev
chore: add distance to date (#1449)
* chore: add distance to date
* fix: minor stuff
authored by
Maximilian Kaske
and committed by
GitHub
0ac84498
bcdfd5e7
+14
-12
+1
-1
apps/status-page/src/app/(status-page)/[domain]/(public)/monitors/page.tsx
+1
-1
apps/status-page/src/app/(status-page)/[domain]/(public)/monitors/page.tsx
+1
-1
apps/status-page/src/components/chart/chart-legend-badge.tsx
+1
-1
apps/status-page/src/components/chart/chart-legend-badge.tsx
+12
-10
apps/status-page/src/components/status-page/status-events.tsx
+12
-10
apps/status-page/src/components/status-page/status-events.tsx
···
104
104
...props
105
105
}: React.ComponentProps<"div">) {
106
106
return (
107
-
<div className={cn("flex flex-wrap gap-0.5", className)} {...props}>
107
+
<div className={cn("flex flex-wrap gap-px", className)} {...props}>
108
108
{children}
109
109
</div>
110
110
);
···
134
134
date: Date;
135
135
}) {
136
136
const isFuture = date > new Date();
137
+
const distance = formatDistanceStrict(date, new Date(), { addSuffix: true });
137
138
return (
138
139
<div className={cn("flex gap-2 lg:flex-col", className)} {...props}>
139
140
<div className="font-medium text-foreground">
140
141
{formatDate(date, { month: "short" })}
141
142
</div>{" "}
142
-
{isFuture ? (
143
-
<Badge
144
-
variant="secondary"
145
-
className="bg-info text-[10px] text-background dark:text-foreground"
146
-
>
147
-
Upcoming
148
-
</Badge>
149
-
) : null}
143
+
<Badge
144
+
variant="secondary"
145
+
className={cn(
146
+
"text-[10px]",
147
+
isFuture ? "bg-info text-background dark:text-foreground" : "",
148
+
)}
149
+
>
150
+
{distance}
151
+
</Badge>
150
152
</div>
151
153
);
152
154
}
···
359
361
return (
360
362
<div
361
363
className={cn(
362
-
"py-1.5 font-mono text-muted-foreground text-base",
364
+
"py-1.5 font-mono text-sm text-muted-foreground",
363
365
className,
364
366
)}
365
367
{...props}