mirror of
https://github.com/LukeHagar/better-auth.git
synced 2025-12-09 04:19:26 +00:00
38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { motion } from "framer-motion";
|
|
import { Sparkles } from "lucide-react";
|
|
|
|
export default function UpgradeButton() {
|
|
const [isHovered, setIsHovered] = useState(false);
|
|
|
|
return (
|
|
<motion.button
|
|
className="relative overflow-hidden px-6 py-3 rounded-md bg-linear-to-r from-gray-900 to-black text-white font-bold text-lg shadow-lg transition-all duration-300 ease-out transform hover:scale-105 hover:shadow-xl"
|
|
onHoverStart={() => setIsHovered(true)}
|
|
onHoverEnd={() => setIsHovered(false)}
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
<span className="relative z-10 flex items-center justify-center">
|
|
<Sparkles className="w-5 h-5 mr-2" />
|
|
Upgrade to Pro
|
|
</span>
|
|
<motion.div
|
|
className="absolute inset-0 bg-linear-to-r from-gray-800 to-gray-700"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: isHovered ? 1 : 0 }}
|
|
transition={{ duration: 0.3 }}
|
|
/>
|
|
<motion.div
|
|
className="absolute inset-0 bg-white opacity-10"
|
|
initial={{ scale: 0, x: "100%", y: "100%" }}
|
|
animate={{ scale: isHovered ? 2 : 0, x: "0%", y: "0%" }}
|
|
transition={{ duration: 0.4, ease: "easeOut" }}
|
|
style={{ borderRadius: "2px" }}
|
|
/>
|
|
</motion.button>
|
|
);
|
|
}
|