Status Elevation Retro

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        retroBg: "#fee2e2",
13        retroText: "#991b1b",
14        retroBorder: "#991b1b",
15    },
16    pending: {
17        priority: 2, label: "Pending", icon: Loader,
18        color: "#f59e0b",
19        retroBg: "#fef3c7",
20        retroText: "#92400e",
21        retroBorder: "#92400e",
22    },
23    success: {
24        priority: 3, label: "Success", icon: CheckCircle,
25        color: "#10b981",
26        retroBg: "#d1fae5",
27        retroText: "#065f46",
28        retroBorder: "#065f46",
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={{ opacity: 0, x: 10 }}
42            animate={{ opacity: 1, x: 0 }}
43            transition={{ type: "tween", duration, ease: "easeOut" }}
44            className="w-32"
45        >
46            <div className="flex items-center gap-2 px-3 py-1.5 border-2 font-mono text-xs font-bold uppercase tracking-widest"
47                style={{ background: config.retroBg, color: config.retroText, borderColor: config.retroBorder }}>
48                <Icon className={`w-3.5 h-3.5 ${isPending ? "animate-spin" : ""}`} strokeWidth={2.5} />
49                <AnimatePresence mode="wait">
50                    <motion.span key={status}
51                        initial={{ filter: "blur(3px)", opacity: 0.4 }}
52                        animate={{ filter: "blur(0px)", opacity: 1 }}
53                        exit={{ filter: "blur(3px)", opacity: 0.4 }}
54                        transition={{ duration: halfDuration, ease: "easeInOut" }}
55                    >{config.label.toUpperCase()}</motion.span>
56                </AnimatePresence>
57            </div>
58        </motion.div>
59    );
60}
61 
62// … truncated