feat: add surprise-me

frontend/src/components/ui/confetti-button.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import React, { type MouseEventHandler } from "react";
+import confetti from "canvas-confetti";
+
+import { Button } from "@/components/ui/button";
+
+interface ConfettiButtonProps extends React.ComponentProps<typeof Button> {
+  angle?: number;
+  particleCount?: number;
+  startVelocity?: number;
+  spread?: number;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
+export function ConfettiButton({
+  className,
+  children,
+  angle = 90,
+  particleCount = 75,
+  startVelocity = 35,
+  spread = 70,
+  onClick,
+  ...props
+}: ConfettiButtonProps) {
+  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {
+    const target = event.currentTarget;
+    if (target) {
+      const rect = target.getBoundingClientRect();
+      confetti({
+        particleCount,
+        startVelocity,
+        angle,
+        spread,
+        origin: {
+          x: (rect.left + rect.width / 2) / window.innerWidth,
+          y: (rect.top + rect.height / 2) / window.innerHeight,
+        },
+      });
+    }
+    onClick?.(event);
+  };
+
+  return (
+    <Button onClick={handleClick} className={className} {...props}>
+      {children}
+    </Button>
+  );
+}