align-vertical-space-around-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const AlignVerticalSpaceAroundIcon = forwardRef<
6  AnimatedIconHandle,
7  AnimatedIconProps
8>(
9  (
10    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
11    ref,
12  ) => {
13    const [scope, animate] = useAnimate();
14 
15    const start = async () => {
16      animate(".top-line", { y: 3 }, { duration: 0.3, ease: "easeOut" });
17      animate(".bottom-line", { y: -3 }, { duration: 0.3, ease: "easeOut" });
18      animate(
19        ".rectangle",
20        { scale: 0.85 },
21        { duration: 0.3, ease: "easeOut" },
22      );
23    };
24 
25    const stop = () => {
26      animate(".top-line", { y: 0 }, { duration: 0.2, ease: "easeInOut" });
27      animate(".bottom-line", { y: 0 }, { duration: 0.2, ease: "easeInOut" });
28      animate(".rectangle", { scale: 1 }, { duration: 0.2, ease: "easeInOut" });
29    };
30 
31    useImperativeHandle(ref, () => {
32      return {
33        startAnimation: start,
34        stopAnimation: stop,
35      };
36    });
37 
38    const handleHoverStart = () => {
39      start();
40    };
41 
42    const handleHoverEnd = () => {
43      stop();
44    };
45 
46    return (
47      <motion.svg
48        ref={scope}
49        onHoverStart={handleHoverStart}
50        onHoverEnd={handleHoverEnd}
51        xmlns="http://www.w3.org/2000/svg"
52        width={size}
53        height={size}
54        viewBox="0 0 24 24"
55        fill="none"
56        stroke={color}
57        strokeWidth={strokeWidth}
58        strokeLinecap="round"
59        strokeLinejoin="round"
60        className={`cursor-pointer ${className}`}
61      >
62        <motion.rect
63          className="rectangle"
64          style={{ transformOrigin: "12px 12px" }}
65          width="10"
66          height="6"
67          x="7"
68          y="9"
69          rx="2"
70        />
71        <motion.path className="bottom-line" d="M22 20H2" />
72        <motion.path className="top-line" d="M22 4H2" />
73      </motion.svg>
74    );
75  },
76);
77 
78AlignVerticalSpaceAroundIcon.displayName = "AlignVerticalSpaceAroundIcon";
79 
80export default AlignVerticalSpaceAroundIcon;