Fuse Undo Button

1"use client";2
3import { Archive, RotateCcw } from "lucide-react";4import { useState } from "react";5import type { AnimationEvent } from "react";6
7type FuseState = "idle" | "burning";8
9const fuseKeyframes = `10@keyframes fuse-undo-burn {11  from { stroke-dashoffset: 0; }12  to { stroke-dashoffset: -1.02; }13}`;14
15const rowClass =16  "inline-flex items-center gap-[10px] justify-self-center whitespace-nowrap [grid-area:1/1] [transition:opacity_.3s_ease,transform_.45s_cubic-bezier(.16,1,.3,1),visibility_.3s] data-[active=false]:invisible data-[active=false]:opacity-0 motion-reduce:transition-none motion-reduce:data-[active=false]:[transform:none]";17
18export function FuseUndoButton() {19  const [state, setState] = useState<FuseState>("idle");20  const [fuse, setFuse] = useState(0);21
22  const handleBurnEnd = (event: AnimationEvent<SVGRectElement>) => {23    if (event.animationName === "fuse-undo-burn") setState("idle");24  };25
26  const handleClick = () => {27    if (state === "idle") {28      setFuse((current) => current + 1);29      setState("burning");30    } else {31      setState("idle");32    }33  };34
35  return (36    <>37      <style>{fuseKeyframes}</style>38      <button39        type="button"40        className="group relative inline-flex h-[52px] cursor-pointer appearance-none items-center justify-center rounded-full border-0 bg-[light-dark(#ffffff,#121418)] px-[28px] [font-family:inherit] text-[17px] font-medium leading-none tracking-[-.01em] text-[light-dark(#14181e,#f2f4f6)] [box-shadow:inset_0_0_0_1px_light-dark(#dfe3ea,#2b2f36),0_10px_24px_light-dark(rgba(246,247,249,.35),rgba(0,0,0,.35))] [transition:background-color_.2s_ease] hover:bg-[light-dark(#f0f2f5,#1b1e23)] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#f97316] motion-reduce:transition-none"41        data-state={state}42        onClick={handleClick}43      >44        <svg45          key={fuse}46          className="pointer-events-none absolute inset-0 size-full overflow-visible opacity-0 [filter:drop-shadow(0_0_6px_rgba(249,115,22,.55))] [transition:opacity_.35s_ease] group-data-[state=burning]:opacity-100 motion-reduce:transition-none"47          aria-hidden="true"48        >49          <rect50            className="fill-none stroke-[#f97316] stroke-2 [stroke-linecap:round] [animation-name:fuse-undo-burn] [animation-duration:5s] [animation-timing-function:linear] [animation-fill-mode:forwards] [animation-play-state:paused] group-data-[state=burning]:[animation-play-state:running] group-data-[state=burning]:group-hover:[animation-play-state:paused] group-data-[state=burning]:group-focus-visible:[animation-play-state:paused]"51            x="0"52            y="0"53            width="100%"54            height="100%"55            rx="26"56            pathLength={1}57            strokeDasharray="1 2"58            onAnimationEnd={handleBurnEnd}59          />60        </svg>61        <span className="grid" aria-live="polite">62          <span className={`${rowClass} data-[active=false]:[transform:translateY(-10px)]`} data-active={state === "idle"}>63            <Archive className="shrink-0" size={20} strokeWidth={2} aria-hidden="true" />64            Archive65          </span>66          <span className={`${rowClass} data-[active=false]:[transform:translateY(10px)]`} data-active={state === "burning"}>67            <RotateCcw className="shrink-0" size={20} strokeWidth={2} aria-hidden="true" />68            Undo69          </span>70        </span>71      </button>72    </>73  );74}