align-center

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