"use client"; import { motion, useReducedMotion } from "motion/react"; import { type ComponentProps, useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; import { PrimaryCtaLink } from "./get-in-touch-button"; const END_STATE_DELAY_MS = 460; const textTransition = { duration: 0.24, ease: [0.2, 0, 0, 1] } as const; const avatarSpring = { type: "spring", stiffness: 460, damping: 26, mass: 0.8, } as const; const mergeSpring = { type: "spring", stiffness: 540, damping: 32 } as const; const slideSpring = { type: "spring", stiffness: 360, damping: 17, mass: 0.9, } as const; const CLUSTER_CENTER_X = -32; const HOVER_TEXT_DELAY = 0.2; const DEFAULT_PORTRAIT = "/unsplash/1507003211169-0a1dd7228f2d.webp"; type InteractionPhase = "idle" | "start" | "end"; type BookACallLinkProps = Omit< ComponentProps, "children" | "variant" > & { imageSrc?: string; defaultText?: string; hoverText?: string; youLabel?: string; }; export function BookACallLink({ href, imageSrc = DEFAULT_PORTRAIT, defaultText = "تماس بگیرید", hoverText = "بزن حرف بزنیم!", youLabel = "شما", className, ...linkProps }: BookACallLinkProps) { const [interactionPhase, setInteractionPhase] = useState("idle"); const interactionPhaseRef = useRef("idle"); const endStateTimerRef = useRef | null>(null); const isHoveredRef = useRef(false); const isFocusedRef = useRef(false); const shouldReduceMotion = useReducedMotion(); const updateInteractionPhase = (nextPhase: InteractionPhase) => { interactionPhaseRef.current = nextPhase; setInteractionPhase(nextPhase); }; const clearEndStateTimer = () => { if (!endStateTimerRef.current) { return; } clearTimeout(endStateTimerRef.current); endStateTimerRef.current = null; }; const handleInteractionStart = () => { if (interactionPhaseRef.current !== "idle") { return; } clearEndStateTimer(); if (shouldReduceMotion) { updateInteractionPhase("end"); return; } updateInteractionPhase("start"); endStateTimerRef.current = setTimeout(() => { updateInteractionPhase("end"); endStateTimerRef.current = null; }, END_STATE_DELAY_MS); }; const handleInteractionEnd = () => { if (isHoveredRef.current || isFocusedRef.current) { return; } clearEndStateTimer(); updateInteractionPhase("idle"); }; const handleMouseEnter = () => { isHoveredRef.current = true; handleInteractionStart(); }; const handleMouseLeave = () => { isHoveredRef.current = false; handleInteractionEnd(); }; const handleFocus = () => { isFocusedRef.current = true; handleInteractionStart(); }; const handleBlur = () => { isFocusedRef.current = false; handleInteractionEnd(); }; useEffect(() => clearEndStateTimer, []); const isActive = interactionPhase !== "idle"; const isEndState = interactionPhase === "end"; const withMotion = (transition: T) => shouldReduceMotion ? ({ duration: 0 } as const) : transition; return ( ); } export default function GetInTouch() { return (

); }