a-arrow-down

1"use client";
2 
3import type { Variants } from "motion/react";
4import { motion, useAnimation } from "motion/react";
5import type { HTMLAttributes } from "react";
6import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
7 
8import { cn } from "@/lib/utils";
9 
10export interface AArrowDownIconHandle {
11  startAnimation: () => void;
12  stopAnimation: () => void;
13}
14 
15interface AArrowDownIconProps extends HTMLAttributes<HTMLDivElement> {
16  size?: number;
17}
18 
19const LETTER_VARIANTS: Variants = {
20  normal: { opacity: 1, scale: 1 },
21  animate: {
22    opacity: [0, 1],
23    scale: [0.8, 1],
24    transition: { duration: 0.3 },
25  },
26};
27 
28const ARROW_VARIANTS: Variants = {
29  normal: { opacity: 1, y: 0 },
30  animate: {
31    opacity: [0, 1],
32    y: [-10, 0],
33    transition: { duration: 0.3, delay: 0.2 },
34  },
35};
36 
37const AArrowDownIcon = forwardRef<AArrowDownIconHandle, AArrowDownIconProps>(
38  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
39    const controls = useAnimation();
40    const isControlledRef = useRef(false);
41 
42    useImperativeHandle(ref, () => {
43      isControlledRef.current = true;
44 
45      return {
46        startAnimation: () => controls.start("animate"),
47        stopAnimation: () => controls.start("normal"),
48      };
49    });
50 
51    const handleMouseEnter = useCallback(
52      (e: React.MouseEvent<HTMLDivElement>) => {
53        if (isControlledRef.current) {
54          onMouseEnter?.(e);
55        } else {
56          controls.start("animate");
57        }
58      },
59      [controls, onMouseEnter]
60    );
61 
62    const handleMouseLeave = useCallback(
63      (e: React.MouseEvent<HTMLDivElement>) => {
64        if (isControlledRef.current) {
65          onMouseLeave?.(e);
66        } else {
67          controls.start("normal");
68        }
69      },
70      [controls, onMouseLeave]
71    );
72 
73    return (
74      <div
75        className={cn(className)}
76        onMouseEnter={handleMouseEnter}
77        onMouseLeave={handleMouseLeave}
78        {...props}
79      >
80        <svg
81          fill="none"
82          height={size}
83          stroke="currentColor"
84          strokeLinecap="round"
85          strokeLinejoin="round"
86          strokeWidth="2"
87          viewBox="0 0 24 24"
88          width={size}
89          xmlns="http://www.w3.org/2000/svg"
90        >
91          <motion.path
92            animate={controls}
93            d="M3.5 13h6"
94            variants={LETTER_VARIANTS}
95          />
96          <motion.path
97            animate={controls}
98            d="m2 16 4.5-9 4.5 9"
99// … truncated