Updated status-events with blocks component

Signed-off-by: Moulik Aggarwal <qwertymoulik@gmail.com>

Author: aggmoulik

apps/status-page/messages/de.json

@@ -59,7 +59,6 @@
   "1P6GMj": "",
   "7cv4Uf": "",
   "/GKH/w": "",
-  "2K7gg0": "",
   "FDReLp": "",
   "qDj0JR": "",
   "CYs0LF": "",

apps/status-page/messages/en.json

@@ -59,7 +59,6 @@
   "1P6GMj": "Monitoring",
   "7cv4Uf": "Identified",
   "/GKH/w": "Investigating",
-  "2K7gg0": "View full report",
   "FDReLp": "No recent notifications",
   "qDj0JR": "There have been no reports within the last 7 days.",
   "CYs0LF": "View events history",

apps/status-page/messages/es.json

@@ -59,7 +59,6 @@
   "1P6GMj": "",
   "7cv4Uf": "",
   "/GKH/w": "",
-  "2K7gg0": "",
   "FDReLp": "",
   "qDj0JR": "",
   "CYs0LF": "",

apps/status-page/messages/fr.json

@@ -59,7 +59,6 @@
   "1P6GMj": "",
   "7cv4Uf": "",
   "/GKH/w": "",
-  "2K7gg0": "",
   "FDReLp": "",
   "qDj0JR": "",
   "CYs0LF": "",

apps/status-page/messages/ja.json

@@ -59,7 +59,6 @@
   "1P6GMj": "",
   "7cv4Uf": "",
   "/GKH/w": "",
-  "2K7gg0": "",
   "FDReLp": "",
   "qDj0JR": "",
   "CYs0LF": "",

apps/status-page/messages/ko.json

@@ -59,7 +59,6 @@
   "1P6GMj": "",
   "7cv4Uf": "",
   "/GKH/w": "",
-  "2K7gg0": "",
   "FDReLp": "",
   "qDj0JR": "",
   "CYs0LF": "",

apps/status-page/messages/pt.json

@@ -59,7 +59,6 @@
   "1P6GMj": "",
   "7cv4Uf": "",
   "/GKH/w": "",
-  "2K7gg0": "",
   "FDReLp": "",
   "qDj0JR": "",
   "CYs0LF": "",

apps/status-page/messages/zh.json

@@ -59,7 +59,6 @@
   "1P6GMj": "",
   "7cv4Uf": "",
   "/GKH/w": "",
-  "2K7gg0": "",
   "FDReLp": "",
   "qDj0JR": "",
   "CYs0LF": "",

apps/status-page/src/components/status-page/status-events.tsx

@@ -1,8 +1,13 @@
 import { ProcessMessage } from "@/components/content/process-message";
 import { TimestampHoverCard } from "@/components/content/timestamp-hover-card";
 import { formatDate, formatDateRange, formatDateTime } from "@/lib/formatter";
+import {
+  StatusEventTimelineDot,
+  StatusEventTimelineMessage,
+  StatusEventTimelineSeparator,
+  StatusEventTimelineTitle,
+} from "@openstatus/ui/components/blocks/status-events";
 import { Badge } from "@openstatus/ui/components/ui/badge";
-import { Separator } from "@openstatus/ui/components/ui/separator";
 import {
   Tooltip,
   TooltipContent,
@@ -357,77 +362,3 @@ export function StatusEventTimelineMaintenance({
     </div>
   );
 }
-
-export function StatusEventTimelineTitle({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn("font-medium text-foreground text-sm", className)}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
-
-export function StatusEventTimelineMessage({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "py-1.5 font-mono text-muted-foreground text-sm",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
-
-export function StatusEventTimelineDot({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "size-2.5 shrink-0 rounded-full bg-muted",
-        "group-data-[variant=resolved]:bg-success",
-        "group-data-[variant=monitoring]:bg-info",
-        "group-data-[variant=identified]:bg-warning",
-        "group-data-[variant=investigating]:bg-destructive",
-        "group-data-[variant=maintenance]:bg-info",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export function StatusEventTimelineSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      orientation="vertical"
-      className={cn(
-        "mx-auto flex-1",
-        "group-data-[variant=resolved]:bg-success",
-        "group-data-[variant=monitoring]:bg-info",
-        "group-data-[variant=identified]:bg-warning",
-        "group-data-[variant=investigating]:bg-destructive",
-        "group-data-[variant=maintenance]:bg-info",
-        className,
-      )}
-      {...props}
-    />
-  );
-}