Status Elevation Lyra

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        borderColor: "rgba(239, 68, 68, 0.25)",
13    },
14    pending: {
15        priority: 2, label: "Pending", icon: Loader,
16        color: "#f59e0b",
17        borderColor: "rgba(245, 158, 11, 0.25)",
18    },
19    success: {
20        priority: 3, label: "Success", icon: CheckCircle,
21        color: "#10b981",
22        borderColor: "rgba(16, 185, 129, 0.25)",
23    },
24};
25 
26// ─── Status Pill ───────────────────────────────────────────────
27function StatusPill({ status, duration = 0.3 }) {
28    const config = STATUS_CONFIG[status];
29    const Icon = config.icon;
30    const isPending = status === "pending";
31    const halfDuration = duration / 2;
32 
33    return (
34        <motion.div key={status}
35            initial={{ opacity: 0, scale: 0.95 }}
36            animate={{ opacity: 1, scale: 1 }}
37            transition={{ type: "tween", duration, ease: "easeOut" }}
38            className="w-32"
39        >
40            <div className="flex items-center gap-2 px-3 py-1.5 rounded-none border-[0.6px]"
41                style={{ borderColor: config.borderColor, background: "rgba(0,0,0,0.3)" }}>
42                <Icon className={`w-3.5 h-3.5 ${isPending ? "animate-spin" : ""}`}
43                    style={{ color: config.color }} strokeWidth={2} />
44                <AnimatePresence mode="wait">
45                    <motion.span key={status}
46                        initial={{ filter: "blur(4px)", opacity: 0.3 }}
47                        animate={{ filter: "blur(0px)", opacity: 1 }}
48                        exit={{ filter: "blur(4px)", opacity: 0.3 }}
49                        transition={{ duration: halfDuration, ease: "easeInOut" }}
50                        className="font-mono text-xs uppercase tracking-widest"
51                        style={{ color: config.color }}
52                    >{config.label}</motion.span>
53                </AnimatePresence>
54            </div>
55        </motion.div>
56    );
57}
58 
59// … truncated