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 ArrowDownIconHandle {
11  startAnimation: () => void;
12  stopAnimation: () => void;
13}
14 
15interface ArrowDownIconProps extends HTMLAttributes<HTMLDivElement> {
16  size?: number;
17}
18 
19const PATH_VARIANTS: Variants = {
20  normal: { d: "m19 12-7 7-7-7", translateY: 0 },
21  animate: {
22    d: "m19 12-7 7-7-7",
23    translateY: [0, -3, 0],
24    transition: {
25      duration: 0.4,
26    },
27  },
28};
29 
30const SECOND_PATH_VARIANTS: Variants = {
31  normal: { d: "M12 5v14" },
32  animate: {
33    d: ["M12 5v14", "M12 5v9", "M12 5v14"],
34    transition: {
35      duration: 0.4,
36    },
37  },
38};
39 
40const ArrowDownIcon = forwardRef<ArrowDownIconHandle, ArrowDownIconProps>(
41  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
42    const controls = useAnimation();
43    const isControlledRef = useRef(false);
44 
45    useImperativeHandle(ref, () => {
46      isControlledRef.current = true;
47 
48      return {
49        startAnimation: () => controls.start("animate"),
50        stopAnimation: () => controls.start("normal"),
51      };
52    });
53 
54    const handleMouseEnter = useCallback(
55      (e: React.MouseEvent<HTMLDivElement>) => {
56        if (isControlledRef.current) {
57          onMouseEnter?.(e);
58        } else {
59          controls.start("animate");
60        }
61      },
62      [controls, onMouseEnter]
63    );
64 
65    const handleMouseLeave = useCallback(
66      (e: React.MouseEvent<HTMLDivElement>) => {
67        if (isControlledRef.current) {
68          onMouseLeave?.(e);
69        } else {
70          controls.start("normal");
71        }
72      },
73      [controls, onMouseLeave]
74    );
75 
76    return (
77      <div
78        className={cn(className)}
79        onMouseEnter={handleMouseEnter}
80        onMouseLeave={handleMouseLeave}
81        {...props}
82      >
83        <svg
84          fill="none"
85          height={size}
86          stroke="currentColor"
87          strokeLinecap="round"
88          strokeLinejoin="round"
89          strokeWidth="2"
90          viewBox="0 0 24 24"
91          width={size}
92          xmlns="http://www.w3.org/2000/svg"
93        >
94          <motion.path
95            animate={controls}
96            d="m19 12-7 7-7-7"
97            variants={PATH_VARIANTS}
98          />
99          <motion.path
100            animate={controls}
101// … truncated