zentrixui/dist/components/file-upload/progress/status-indicator.js

ZentrixUI - A modern, highly customizable and accessible React file upload component library with multiple variants, JSON-based configuration, and excellent developer experience.

import { jsxs, jsx } from "react/jsx-runtime";
import { cn } from "../../../utils/cn.js";
import CircleX from "../../../node_modules/lucide-react/dist/esm/icons/circle-x.js";
import CircleCheckBig from "../../../node_modules/lucide-react/dist/esm/icons/circle-check-big.js";
import Clock from "../../../node_modules/lucide-react/dist/esm/icons/clock.js";
const statusConfig = {
  pending: {
    icon: Clock,
    color: "text-gray-500",
    bgColor: "bg-gray-100",
    text: "Pending"
  },
  uploading: {
    icon: Clock,
    color: "text-blue-500",
    bgColor: "bg-blue-100",
    text: "Uploading"
  },
  success: {
    icon: CircleCheckBig,
    color: "text-green-500",
    bgColor: "bg-green-100",
    text: "Success"
  },
  error: {
    icon: CircleX,
    color: "text-red-500",
    bgColor: "bg-red-100",
    text: "Error"
  }
};
const StatusIndicator = ({
  status,
  size = "md",
  showText = false,
  className,
  "aria-label": ariaLabel
}) => {
  const config = statusConfig[status];
  const Icon = config.icon;
  const sizeClasses = {
    sm: "w-4 h-4",
    md: "w-5 h-5",
    lg: "w-6 h-6"
  };
  const textSizeClasses = {
    sm: "text-xs",
    md: "text-sm",
    lg: "text-base"
  };
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cn("flex items-center gap-2", className),
      role: "status",
      "aria-label": ariaLabel || `File status: ${config.text}`,
      children: [
        /* @__PURE__ */ jsx(
          "div",
          {
            className: cn(
              "rounded-full p-1 flex items-center justify-center",
              config.bgColor
            ),
            children: /* @__PURE__ */ jsx(
              Icon,
              {
                className: cn(
                  sizeClasses[size],
                  config.color
                ),
                "aria-hidden": "true"
              }
            )
          }
        ),
        showText && /* @__PURE__ */ jsx("span", { className: cn(textSizeClasses[size], config.color), children: config.text })
      ]
    }
  );
};
export {
  StatusIndicator
};
//# sourceMappingURL=status-indicator.js.map