Particle Hover Button Demo

1"use client";
2 
3import { ParticleHoverButton } from "@/components/sora-ui/buttons/particle-hover-button";
4 
5// Same heart path as the "Sponsor" nav link in the anime.js reference this
6// primitive reimplements — kept 1:1 so the demo reads as the same mark,
7// not a redraw.
8const HEART_PATH =
9  "M12 18.445a.778.778 0 0 1-.34-.078C11.39 18.235 5 15.077 5 9.889a3.889 3.889 0 0 1 6.638-2.75L12 7.5l.362-.361A3.889 3.889 0 0 1 19 9.889c0 5.17-6.387 8.344-6.66 8.478a.778.778 0 0 1-.34.078z";
10 
11function HeartIcon({ className }: { className?: string }) {
12  return (
13    <svg
14      aria-hidden="true"
15      className={className}
16      fill="currentColor"
17      viewBox="0 0 24 24"
18      xmlns="http://www.w3.org/2000/svg"
19    >
20      <path d={HEART_PATH} />
21    </svg>
22  );
23}
24 
25export default function ParticleHoverButtonExample() {
26  return (
27    <ParticleHoverButton
28      className="text-[#ff4b4b]"
29      particle={<HeartIcon className="h-2.5 w-2.5" />}
30    >
31      <button
32        className="inline-flex items-center gap-1.5 font-medium text-sm"
33        type="button"
34      >
35        <HeartIcon className="h-4 w-4" />
36        Sponsor
37      </button>
38    </ParticleHoverButton>
39  );
40}