activity

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 ActivityIconHandle {
11  startAnimation: () => void;
12  stopAnimation: () => void;
13}
14 
15interface ActivityIconProps extends HTMLAttributes<HTMLDivElement> {
16  size?: number;
17}
18 
19const 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.6,
35      ease: "linear",
36      opacity: { duration: 0.1 },
37    },
38  },
39};
40 
41const ActivityIcon = forwardRef<ActivityIconHandle, ActivityIconProps>(
42  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
43    const controls = useAnimation();
44    const isControlledRef = useRef(false);
45 
46    useImperativeHandle(ref, () => {
47      isControlledRef.current = true;
48 
49      return {
50        startAnimation: () => controls.start("animate"),
51        stopAnimation: () => controls.start("normal"),
52      };
53    });
54 
55    const handleMouseEnter = useCallback(
56      (e: React.MouseEvent<HTMLDivElement>) => {
57        if (isControlledRef.current) {
58          onMouseEnter?.(e);
59        } else {
60          controls.start("animate");
61        }
62      },
63      [controls, onMouseEnter]
64    );
65 
66    const handleMouseLeave = useCallback(
67      (e: React.MouseEvent<HTMLDivElement>) => {
68        if (isControlledRef.current) {
69          onMouseLeave?.(e);
70        } else {
71          controls.start("normal");
72        }
73      },
74      [controls, onMouseLeave]
75    );
76 
77    return (
78      <div
79        className={cn(className)}
80        onMouseEnter={handleMouseEnter}
81        onMouseLeave={handleMouseLeave}
82        {...props}
83      >
84        <svg
85          fill="none"
86          height={size}
87          stroke="currentColor"
88          strokeLinecap="round"
89          strokeLinejoin="round"
90          strokeWidth="2"
91          viewBox="0 0 24 24"
92          width={size}
93          xmlns="http://www.w3.org/2000/svg"
94        >
95          <motion.path
96            animate={controls}
97            d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
98// … truncated