Glowing Badge

1"use client";
2 
3import { type HTMLAttributes } from "react";
4import { motion } from "motion/react";
5import { cn } from "@/lib/utils";
6 
7type GlowingBadgeVariant =
8  | "default"
9  | "success"
10  | "warning"
11  | "error"
12  | "info"
13  | "neutral";
14 
15interface GlowingBadgeProps extends HTMLAttributes<HTMLSpanElement> {
16  variant?: GlowingBadgeVariant;
17  pulse?: boolean;
18  dot?: boolean;
19}
20 
21const variantStyles: Record<
22  GlowingBadgeVariant,
23  { badge: string; glow: string; dot: string }
24> = {
25  default: {
26    badge: "bg-foreground text-background",
27    glow: "bg-foreground/30",
28    dot: "bg-background",
29  },
30  neutral: {
31    badge: "bg-muted text-foreground border-muted",
32    glow: "bg-foreground/30",
33    dot: "bg-foreground",
34  },
35  success: {
36    badge: "bg-emerald-500 text-emerald-100",
37    glow: "bg-emerald-500",
38    dot: "bg-emerald-200",
39  },
40  warning: {
41    badge: "bg-amber-500 text-amber-100",
42    glow: "bg-amber-500",
43    dot: "bg-amber-200",
44  },
45  error: {
46    badge: "bg-red-500 text-red-100",
47    glow: "bg-red-500",
48    dot: "bg-red-200",
49  },
50  info: {
51    badge: "bg-blue-500 text-blue-100",
52    glow: "bg-blue-500",
53    dot: "bg-blue-200",
54  },
55};
56 
57function GlowingBadge({
58  variant = "default",
59  pulse = true,
60  dot = true,
61  children,
62  className,
63  ...props
64}: GlowingBadgeProps) {
65  const styles = variantStyles[variant];
66 
67  return (
68    <span className="relative inline-flex">
69      <span
70        className={cn(
71          "absolute inset-0 rounded-full blur-md opacity-60",
72          styles.glow,
73        )}
74      />
75      <span
76        className={cn(
77          "relative inline-flex items-center gap-1.5 rounded-full  px-3 py-1 text-xs font-medium",
78          styles.badge,
79          className,
80        )}
81        {...props}
82      >
83        {dot && (
84          <span className="relative flex h-1.5 w-1.5 shrink-0">
85            {pulse && (
86              <motion.span
87                className={cn(
88                  "absolute inline-flex h-full w-full rounded-full opacity-75",
89                  styles.dot,
90                )}
91                animate={{ scale: [1, 2.5, 1], opacity: [0.75, 0, 0.75] }}
92                transition={{
93                  duration: 2,
94                  repeat: Infinity,
95                  ease: "easeInOut",
96                }}
97              />
98            )}
99            <span
100              className={cn(
101                "relative inline-flex h-1.5 w-1.5 rounded-full",
102                styles.dot,
103              )}
104            />
105// … truncated