Success Check

"use client";

import { useState } from "react";

/* Add to globals.css:
@keyframes check-draw { from { stroke-dashoffset: 48; } to { stroke-dashoffset: 0; } }
*/
export function SuccessCheck() {
  const [run, setRun] = useState(0);

  return (
    <button type="button" onClick={() => setRun((n) => n + 1)} aria-label="Replay">
      <span
        key={run}
        className="flex size-14 items-center justify-center rounded-full border-2 border-green-500/40 bg-green-500/10"
      >
        <svg viewBox="0 0 32 32" className="size-7">
          <path
            d="M8 17l6 6 10 -14"
            fill="none"
            stroke="rgb(34 197 94)"
            strokeWidth="3"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeDasharray="48"
            className="motion-safe:animate-[check-draw_600ms_cubic-bezier(0.16,1,0.3,1)_200ms_both]"
          />
        </svg>
      </span>
    </button>
  );
}