Status Badge

1"use client"
2 
3import {
4  Check,
5  Clock,
6  AlertCircle,
7  XCircle,
8  Loader2,
9  Truck,
10} from "lucide-react"
11import { cn } from "@/lib/utils"
12import { demoStatusBadge } from './demo/status'
13 
14/**
15 * Available status types for the badge.
16 * @typedef {"success" | "pending" | "processing" | "warning" | "error" | "shipped" | "delivered" | "cancelled"} StatusType
17 */
18export type StatusType =
19  | "success"
20  | "pending"
21  | "processing"
22  | "warning"
23  | "error"
24  | "shipped"
25  | "delivered"
26  | "cancelled"
27 
28/**
29 * ═══════════════════════════════════════════════════════════════════════════
30 * StatusBadgeProps
31 * ═══════════════════════════════════════════════════════════════════════════
32 *
33 * Props for the StatusBadge component.
34 * Displays a status indicator with configurable appearance.
35 */
36export interface StatusBadgeProps {
37  data?: {
38    /** The status to display (success, pending, processing, warning, error, shipped, delivered, cancelled). */
39    status?: StatusType
40  }
41  appearance?: {
42    /** Custom label text that overrides the default status label. */
43    label?: string
44    /**
45     * Whether to show the status icon.
46     * @default true
47     */
48    showIcon?: boolean
49    /**
50     * Badge size variant.
51     * @default "md"
52     */
53    size?: "sm" | "md" | "lg"
54  }
55}
56 
57const statusConfig: Record<
58  StatusType,
59  { icon: React.ElementType; className: string; defaultLabel: string }
60> = {
61  success: {
62    icon: Check,
63    className: "bg-muted text-foreground border-border",
64    defaultLabel: "Success",
65  },
66  pending: {
67    icon: Clock,
68    className: "bg-muted text-muted-foreground border-border",
69    defaultLabel: "Pending",
70  },
71  processing: {
72    icon: Loader2,
73    className: "bg-muted text-foreground border-border",
74    defaultLabel: "Processing",
75  },
76  warning: {
77    icon: AlertCircle,
78    className: "bg-muted text-foreground border-border",
79    defaultLabel: "Warning",
80  },
81  error: {
82    icon: XCircle,
83    className: "bg-destructive/10 text-destructive border-destructive/20",
84    defaultLabel: "Error",
85  },
86  shipped: {
87    icon: Truck,
88    className: "bg-muted text-foreground border-border",
89    defaultLabel: "Shipped",
90  },
91  delivered: {
92// … truncated