atom

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