arrow-down-a-z-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const ArrowDownAZIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  (
7    { size = 40, className = "", color = "currentColor", strokeWidth = "1" },
8    ref,
9  ) => {
10    const [scope, animate] = useAnimate();
11 
12    const swapDistance = 24;
13 
14    const start = async () => {
15      animate(
16        ".text-z",
17        {
18          y: -swapDistance,
19        },
20        {
21          duration: 0.3,
22          ease: "easeInOut",
23        },
24      );
25      animate(
26        ".text-a",
27        {
28          y: swapDistance,
29          scale: 1.05,
30        },
31        {
32          duration: 0.3,
33          ease: "easeInOut",
34        },
35      );
36    };
37 
38    const stop = async () => {
39      await animate(
40        ".text-z, .text-a",
41        {
42          y: 0,
43          scale: 1,
44        },
45        {
46          duration: 0.3,
47          ease: "easeInOut",
48        },
49      );
50    };
51 
52    useImperativeHandle(ref, () => {
53      return {
54        startAnimation: start,
55        stopAnimation: stop,
56      };
57    });
58 
59    const handleHoverStart = () => {
60      start();
61    };
62 
63    const handleHoverEnd = () => {
64      stop();
65    };
66 
67    return (
68      <motion.svg
69        ref={scope}
70        onHoverStart={handleHoverStart}
71        onHoverEnd={handleHoverEnd}
72        xmlns="http://www.w3.org/2000/svg"
73        width={size}
74        height={size}
75        viewBox="0 0 48 48"
76        fill="currentColor"
77        stroke="currentColor"
78        strokeWidth={strokeWidth}
79        strokeLinecap="round"
80        strokeLinejoin="round"
81        color={color}
82        className={`cursor-pointer ${className}`}
83      >
84        <motion.path className="text-line" d="M35.5 3.5V43H32.5V3.5H35.5Z" />
85 
86        <motion.path
87          className="text-z"
88          d="M6.5 26H21.5V29.1627L10.4518 41H21.5V44H6.5V40.8373L17.5482 29H6.5V26Z"
89        />
90 
91        <motion.path
92          className="text-a"
93          d="M11.7802 4H16.0532L22.5532 22H18.7V20.1625L13.9469 7H13.8865L9.13335 20.1625V22H5.28021L11.7802 4Z"
94        />
95 
96        <motion.path className="text-a" d="M19.5 18H8.5V15H19.5V18Z" />
97 
98        <motion.path
99          className="text-arrow"
100          style={{ transformOrigin: "34px 38px" }}
101          d="M25 31.8787L34 40.8787L43 31.8787L45.1213 34L34 45.1213L22.8787 34L25 31.8787Z"
102        />
103      </motion.svg>
104    );
105  },
106);
107 
108// … truncated