1'use client'
2import React, { useState } from "react";
3import { motion } from 'motion/react';
4
5interface Sparkle {
6 id: number;
7 x: number;
8 y: number;
9 size: number;
10 delay: number;
11}
12
13function Star({ size }: { size: number }) {
14 return (
15 <svg
16 width={size}
17 height={size}
18 viewBox="0 0 24 24"
19 fill="none"
20 xmlns="http://www.w3.org/2000/svg"
21 className="drop-shadow-lg"
22 >
23 <path
24 d="M12 2L14.09 8.26L20 9.27L15.45 13.14L16.91 19L12 15.77L7.09 19L8.55 13.14L4 9.27L9.91 8.26L12 2Z"
25 fill="url(#starGradient)"
26 stroke="#FFF"
27 strokeWidth="0.5"
28 />
29 <defs>
30 <linearGradient id="starGradient" x1="0%" y1="0%" x2="100%" y2="100%">
31 <stop offset="0%" stopColor="#FFD700" />
32 <stop offset="50%" stopColor="#FFA500" />
33 <stop offset="100%" stopColor="#FF69B4" />
34 </linearGradient>
35 </defs>
36 </svg>
37 );
38}
39
40const Page = () => {
41 const [sparkles, setSparkles] = useState<Sparkle[]>([]);
42
43 const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
44 const button = e.currentTarget;
45 const rect = button.getBoundingClientRect();
46
47 const newSparkles: Sparkle[] = Array.from({ length: 50 }, (_, i) => ({
48 id: Date.now() + i,
49 x: Math.random() * 200 - 100,
50 y: Math.random() * 200 - 100,
51 size: Math.random() * 8 + 5,
52 delay: Math.random() * 0.1,
53 }));
54
55 setSparkles(newSparkles);
56
57 setTimeout(() => {
58 setSparkles([]);
59 }, 1000);
60 };
61
62 return (
63 <div className="flex flex-col justify-center items-center min-h-screen relative w-full light-black">
64 <div className="relative">
65 <button
66 className="bg-gradient-to-r from-purple-600 to-pink-600 text-white px-6 py-3 rounded-xl hover:scale-105 transition-transform relative z-10 cursor-pointer"
67 onClick={handleClick}
68 >
69 Submit Feedback
70 </button>
71 <div className="absolute inset-0 pointer-events-none">
72 {sparkles.map((sparkle) => (
73 <motion.div
74 key={sparkle.id}
75 className="absolute top-1/2 left-1/2"
76 initial={{
77 x: 0,
78 y: 0,
79 scale: 0,
80 opacity: 1,
81 rotate: 0
82 }}
83 animate={{
84 x: sparkle.x,
85 y: sparkle.y,
86 scale: [0, 1, 0],
87 opacity: [0, 1, 0],
88 rotate: 360
89 }}
90 transition={{
91 duration: 1,
92 delay: sparkle.delay,
93 ease: "easeOut"
94 }}
95 >
96 <Star size={sparkle.size} />
97 </motion.div>
98 ))}
99 </div>
100 </div>
101 </div>
102 );
103};
104
105export default Page;
106