arrow-down-1-0

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