Status Elevation Nova

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// ─── Status Pill ───────────────────────────────────────────────
33function StatusPill({ 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 
39    return (
40        <motion.div key={status}
41            initial={{ scale: 0.9, opacity: 0 }}
42            animate={{ scale: 1, opacity: 1 }}
43            transition={{ type: "tween", duration, ease: "easeOut" }}
44            className="relative w-32"
45        >
46            <AnimatePresence>
47                <motion.div
48                    className="relative flex items-center gap-2.5 pl-3.5 pr-5 py-2.5 rounded-full"
49                    animate={{ boxShadow: `inset 0 2px 2px -1px ${config.glowColor}` }}
50                    transition={{ duration: halfDuration, ease: "easeInOut" }}
51                    style={{ background: "linear-gradient(145deg, rgba(40,40,45,0.95), rgba(25,25,30,0.98))" }}
52                >
53                    <div className="relative">
54                        <div className="absolute inset-0 blur-sm rounded-full"
55                            style={{ background: config.glowColor, opacity: 0.5 }} />
56// … truncated