"use client"; import { cn } from "@/lib/utils"; import React from "react"; import { motion, AnimatePresence, useAnimate } from "motion/react"; interface ButtonProps extends React.ButtonHTMLAttributes { className?: string; children: React.ReactNode; } export const Button = ({ className, children, ...props }: ButtonProps) => { const [scope, animate] = useAnimate(); const animateLoading = async () => { await animate( ".loader", { width: "20px", scale: 1, display: "block", }, { duration: 0.2, }, ); }; const animateSuccess = async () => { await animate( ".loader", { width: "0px", scale: 0, display: "none", }, { duration: 0.2, }, ); await animate( ".check", { width: "20px", scale: 1, display: "block", }, { duration: 0.2, }, ); await animate( ".check", { width: "0px", scale: 0, display: "none", }, { delay: 2, duration: 0.2, }, ); }; const handleClick = async (event: React.MouseEvent) => { await animateLoading(); await props.onClick?.(event); await animateSuccess(); }; const { onClick, onDrag, onDragStart, onDragEnd, onAnimationStart, onAnimationEnd, ...buttonProps } = props; return ( {children} ); }; const Loader = () => { return ( ); }; const CheckIcon = () => { return ( ); };

Stateful Button

Instalação