"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

type StatusIndicatorStatus = "online" | "offline" | "pending" | "error"

interface StatusIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
  status: StatusIndicatorStatus
  label: string
  size?: "sm" | "md"
}

const statusDotClasses: Record<StatusIndicatorStatus, string> = {
  online: "text-primary",
  offline: "text-foreground",
  pending: "text-muted-foreground",
  error: "text-destructive",
}

const StatusIndicator = React.forwardRef<HTMLDivElement, StatusIndicatorProps>(
  ({ status, label, size = "md", className, ...props }, ref) => {
    const dotSize = size === "sm" ? "h-2 w-2" : "h-2.5 w-2.5"

    return (
      <div
        ref={ref}
        className={cn(
          "inline-flex items-center gap-2 rounded-full border border-border bg-muted px-3 py-1 text-sm font-medium text-foreground",
          className
        )}
        {...props}
      >
        <span
          className={cn(
            "inline-flex items-center justify-center",
            statusDotClasses[status]
          )}
        >
          <span className={cn("rounded-full bg-current", dotSize)} />
        </span>
        <span>{label}</span>
      </div>
    )
  }
)

StatusIndicator.displayName = "StatusIndicator"

export { StatusIndicator }
export type { StatusIndicatorProps, StatusIndicatorStatus }
Status Indicator

Dependencies

Files

Installation
