"use client"; import * as React from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Bookmark } from "lucide-react"; import { Button } from "@/components/ui/button"; const animations = { icon: { initial: { scale: 1, rotate: 0 }, tapActive: { scale: 0.85, rotate: -10 }, tapCompleted: { scale: 1, rotate: 0 }, }, burst: { initial: { scale: 0, opacity: 0 }, animate: { scale: [0, 1.4, 1], opacity: [0, 0.4, 0] }, transition: { duration: 0.7, ease: "easeOut" }, }, particles: (index: number) => { const angle = (index / 5) * (2 * Math.PI); const radius = 18 + Math.random() * 8; const scale = 0.8 + Math.random() * 0.4; const duration = 0.6 + Math.random() * 0.1; return { initial: { scale: 0, opacity: 0.3, x: 0, y: 0 }, animate: { scale: [0, scale, 0], opacity: [0.3, 0.8, 0], x: [0, Math.cos(angle) * radius], y: [0, Math.sin(angle) * radius * 0.75], }, transition: { duration, delay: index * 0.04, ease: "easeOut" }, }; }, }; export function BookmarkIconButton() { const [isSaved, setIsSaved] = React.useState(false); const handleClick = () => setIsSaved((prev) => !prev); return (

{isSaved && ( {[...Array(5)].map((_, i) => ( ))} )}

); }