Press Button

"use client";
import { motion, type HTMLMotionProps } from "motion/react";
import { usePress } from "@/lib/use-press";
interface PressButtonProps extends Omit<HTMLMotionProps<"button">, "animate"> {
  children: React.ReactNode;
  scale?: number;
}
export function PressButton({
  children,
  scale = 0.95,
  ...props
}: PressButtonProps) {
  const pressProps = usePress({
    pressScale: scale,
  });
  return (
    <motion.button {...pressProps} {...props}>
      {children}
    </motion.button>
  );
}

import { type MotionProps, type Easing } from "motion/react";

export interface UsePressOptions {
  pressScale?: number;

  duration?: number;

  ease?: Easing | Easing[];

  addRotation?: boolean;

  rotationAmount?: number;
}

export function usePress(options: UsePressOptions = {}): MotionProps {
  const {
    pressScale = 0.95,
    duration = 0.1,
    ease = "easeInOut",
    addRotation = false,
    rotationAmount = 2,
  } = options;

  return {
    whileTap: {
      scale: pressScale,
      rotate: addRotation ? rotationAmount : 0,
    },
    transition: {
      duration,
      ease,
    },
  };
}