v7.0.1

frontend/src/components/ui/activity.tsx

@@ -1,104 +1,63 @@
 'use client';
-
 import type { Variants } from 'motion/react';
 import type { HTMLAttributes } from 'react';
 import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
 import { motion, useAnimation } from 'motion/react';
-
 import { cn } from '@/lib/utils';
-
 export interface ActivityIconHandle {
-  startAnimation: () => void;
-  stopAnimation: () => void;
+    startAnimation: () => void;
+    stopAnimation: () => void;
 }
-
 interface ActivityIconProps extends HTMLAttributes<HTMLDivElement> {
-  size?: number;
+    size?: number;
 }
-
 const PATH_VARIANTS: Variants = {
-  normal: {
-    pathLength: 1,
-    opacity: 1,
-    pathOffset: 0,
-  },
-  animate: {
-    pathLength: [0, 1],
-    opacity: [0, 1],
-    pathOffset: [1, 0],
-    transition: {
-      duration: 0.8,
-      ease: 'easeInOut',
+    normal: {
+        pathLength: 1,
+        opacity: 1,
+        pathOffset: 0,
+    },
+    animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.8,
+            ease: 'easeInOut',
+        },
     },
-  },
 };
-
-const ActivityIcon = forwardRef<ActivityIconHandle, ActivityIconProps>(
-  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+const ActivityIcon = forwardRef<ActivityIconHandle, ActivityIconProps>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
     const controls = useAnimation();
     const isControlledRef = useRef(false);
-
     useImperativeHandle(ref, () => {
-      isControlledRef.current = true;
-
-      return {
-        startAnimation: () => controls.start('animate'),
-        stopAnimation: () => controls.start('normal'),
-      };
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start('animate'),
+            stopAnimation: () => controls.start('normal'),
+        };
     });
-
-    const handleMouseEnter = useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
+    const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
         if (!isControlledRef.current) {
-          controls.start('animate');
-        } else {
-          onMouseEnter?.(e);
+            controls.start('animate');
         }
-      },
-      [controls, onMouseEnter]
-    );
-
-    const handleMouseLeave = useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
+        else {
+            onMouseEnter?.(e);
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
         if (!isControlledRef.current) {
-          controls.start('normal');
-        } else {
-          onMouseLeave?.(e);
+            controls.start('normal');
         }
-      },
-      [controls, onMouseLeave]
-    );
-
-    return (
-      <div
-        className={cn(className)}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        {...props}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width={size}
-          height={size}
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <motion.path
-            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"
-            variants={PATH_VARIANTS}
-            animate={controls}
-            initial="normal"
-          />
+        else {
+            onMouseLeave?.(e);
+        }
+    }, [controls, onMouseLeave]);
+    return (<div className={cn(className)} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} {...props}>
+        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <motion.path 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" variants={PATH_VARIANTS} animate={controls} initial="normal"/>
         </svg>
-      </div>
-    );
-  }
-);
-
+      </div>);
+});
 ActivityIcon.displayName = 'ActivityIcon';
-
 export { ActivityIcon };