'use client'; import type { Variants } from 'motion/react'; import { motion, useAnimation } from 'motion/react'; import type { HTMLAttributes } from 'react'; import { forwardRef } from 'react'; import { useIconAnimation } from '@/lib/use-icon-animation'; import { cn } from '@/lib/utils'; export interface BookmarkAdd01IconHandle { startAnimation: () => void; stopAnimation: () => void; } interface BookmarkAdd01IconProps extends HTMLAttributes { size?: number; } // the bookmark drops into place while the add mark stamps the corner const containerVariants: Variants = { normal: { y: 0, scaleY: 1 }, animate: { y: [0, -1.8, 1, -0.25, 0], scaleY: [1, 1.02, 0.96, 1.01, 1], transition: { duration: 0.62, times: [0, 0.16, 0.5, 0.76, 1], ease: [0.23, 1, 0.32, 1] }, }, }; const plusVariants: Variants = { normal: { rotate: 0, scale: 1 }, animate: { rotate: [0, -12, 4, 0], scale: [1, 0.5, 1.22, 1], transition: { duration: 0.56, delay: 0.04, times: [0, 0.2, 0.62, 1], ease: [0.23, 1, 0.32, 1] }, }, }; const BookmarkAdd01Icon = forwardRef( ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => { const controls = useAnimation(); const { handleMouseEnter, handleMouseLeave } = useIconAnimation({ controls, loops: false, onMouseEnter, onMouseLeave, ref, }); return (

); } ); BookmarkAdd01Icon.displayName = 'BookmarkAdd01Icon'; export { BookmarkAdd01Icon };