at-sign

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