"use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Loader2, Check, Sparkles } from "lucide-react" import confetti from "canvas-confetti" import { cn } from "@/lib/utils" import { useTheme } from "next-themes" interface SaveButtonProps { text?: { idle?: string saving?: string saved?: string } className?: string onSave?: () => Promise | void } export function SaveButton({ text = { idle: "Save", saving: "Saving...", saved: "Saved!" }, className, onSave }: SaveButtonProps) { const [status, setStatus] = useState<"idle" | "saving" | "saved">("idle") const [bounce, setBounce] = useState(false) const { theme } = useTheme() const isDark = theme === "dark" const handleSave = async () => { if (status === "idle") { setStatus("saving") try { if (onSave) { await onSave() } else { // Симуляция сохранения если onSave не предоставлен await new Promise(resolve => setTimeout(resolve, 2000)) } setStatus("saved") setBounce(true) confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 }, colors: ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#00ffff", "#ff00ff"], shapes: ["star", "circle"], }) setTimeout(() => { setStatus("idle") setBounce(false) }, 2000) } catch (error) { setStatus("idle") console.error("Save failed:", error) } } } const buttonVariants = { idle: { backgroundColor: isDark ? "rgb(64, 64, 64)" : "rgb(243, 244, 246)", color: isDark ? "white" : "black", scale: 1, }, saving: { backgroundColor: "rgb(59, 130, 246)", color: "white", scale: 1, }, saved: { backgroundColor: "rgb(34, 197, 94)", color: "white", scale: [1, 1.1, 1], transition: { duration: 0.2, times: [0, 0.5, 1], }, }, } const sparkleVariants = { initial: { opacity: 0, scale: 0 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0 }, } return (

{status === "idle" && ( )} {status === "saving" && ( )} {status === "saved" && ( )} {status === "idle" ? text.idle : status === "saving" ? text.saving : text.saved} {bounce && ( )}

) }