status

1import type { ComponentProps, HTMLAttributes } from "react";
2import { Badge } from "@/components/ui/badge";
3import { cn } from "@/lib/utils";
4 
5export type StatusProps = ComponentProps<typeof Badge> & {
6  status: "online" | "offline" | "maintenance" | "degraded";
7};
8 
9export const Status = ({ className, status, ...props }: StatusProps) => (
10  <Badge
11    className={cn("flex items-center gap-2", "group", status, className)}
12    variant="secondary"
13    {...props}
14  />
15);
16 
17export type StatusIndicatorProps = HTMLAttributes<HTMLSpanElement>;
18 
19export const StatusIndicator = ({
20  className,
21  ...props
22}: StatusIndicatorProps) => (
23  <span className="relative flex h-2 w-2" {...props}>
24    <span
25      className={cn(
26        "absolute inline-flex h-full w-full animate-ping rounded-full opacity-75",
27        "group-[.online]:bg-emerald-500",
28        "group-[.offline]:bg-red-500",
29        "group-[.maintenance]:bg-blue-500",
30        "group-[.degraded]:bg-amber-500"
31      )}
32    />
33    <span
34      className={cn(
35        "relative inline-flex h-2 w-2 rounded-full",
36        "group-[.online]:bg-emerald-500",
37        "group-[.offline]:bg-red-500",
38        "group-[.maintenance]:bg-blue-500",
39        "group-[.degraded]:bg-amber-500"
40      )}
41    />
42  </span>
43);
44 
45export type StatusLabelProps = HTMLAttributes<HTMLSpanElement>;
46 
47export const StatusLabel = ({
48  className,
49  children,
50  ...props
51}: StatusLabelProps) => (
52  <span className={cn("text-muted-foreground", className)} {...props}>
53    {children ?? (
54      <>
55        <span className="hidden group-[.online]:block">Online</span>
56        <span className="hidden group-[.offline]:block">Offline</span>
57        <span className="hidden group-[.maintenance]:block">Maintenance</span>
58        <span className="hidden group-[.degraded]:block">Degraded</span>
59      </>
60    )}
61  </span>
62);