Status Elevation

1"use client";
2 
3import React, { useState, useCallback, useEffect, useRef, useMemo } from "react";
4import { AnimatePresence, motion } from "motion/react";
5import { XCircle, Loader, CheckCircle } from "lucide-react";
6 
7// ─── Status Config ─────────────────────────────────────────────
8const STATUS_CONFIG = {
9    failed: {
10        priority: 1, label: "Failed", icon: XCircle,
11        color: "#ef4444",
12        glowColor: "rgba(239, 68, 68, 0.4)",
13        softGlow: "rgba(239, 68, 68, 0.15)",
14        borderColor: "rgba(239, 68, 68, 0.25)",
15    },
16    pending: {
17        priority: 2, label: "Pending", icon: Loader,
18        color: "#f59e0b",
19        glowColor: "rgba(245, 158, 11, 0.4)",
20        softGlow: "rgba(245, 158, 11, 0.15)",
21        borderColor: "rgba(245, 158, 11, 0.25)",
22    },
23    success: {
24        priority: 3, label: "Success", icon: CheckCircle,
25        color: "#10b981",
26        glowColor: "rgba(16, 185, 129, 0.4)",
27        softGlow: "rgba(16, 185, 129, 0.15)",
28        borderColor: "rgba(16, 185, 129, 0.25)",
29    },
30};
31 
32// ─── NOVA Status Pill (glassmorphic glow) ──────────────────────
33function NovaStatusPill({ status, duration = 0.3 }) {
34    const config = STATUS_CONFIG[status];
35    const Icon = config.icon;
36    const isPending = status === "pending";
37    const halfDuration = duration / 2;
38    return (
39        <motion.div key={status}
40            initial={{ scale: 0.9, opacity: 0 }}
41            animate={{ scale: 1, opacity: 1 }}
42            transition={{ type: "tween", duration, ease: "easeOut" }}
43            className="relative w-32"
44        >
45            <AnimatePresence>
46                <motion.div
47                    className="relative flex items-center gap-2.5 pl-3.5 pr-5 py-2.5 rounded-full"
48                    animate={{ boxShadow: \`inset 0 2px 2px -1px \${config.glowColor}\` }}
49                    transition={{ duration: halfDuration, ease: "easeInOut" }}
50                    style={{ background: "linear-gradient(145deg, rgba(40,40,45,0.95), rgba(25,25,30,0.98))" }}
51                >
52                    <div className="relative">
53                        <div className="absolute inset-0 blur-sm rounded-full"
54                            style={{ background: config.glowColor, opacity: 0.5 }} />
55                        <Icon className={\`relative w-5 h-5 \${isPending ? "animate-spin" : ""}\`}
56// … truncated