attach-file

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 AttachFileIconHandle {
11  startAnimation: () => void;
12  stopAnimation: () => void;
13}
14 
15interface AttachFileIconProps extends HTMLAttributes<HTMLDivElement> {
16  size?: number;
17}
18 
19const PATH_VARIANTS: Variants = {
20  normal: { pathLength: 1, opacity: 1, pathOffset: 0 },
21  animate: {
22    opacity: [0, 1],
23    pathLength: [0, 1],
24    transition: {
25      delay: 0.1,
26      duration: 0.4,
27      opacity: { duration: 0.1, delay: 0.1 },
28    },
29  },
30};
31 
32const AttachFileIcon = forwardRef<AttachFileIconHandle, AttachFileIconProps>(
33  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
34    const controls = useAnimation();
35    const isControlledRef = useRef(false);
36 
37    useImperativeHandle(ref, () => {
38      isControlledRef.current = true;
39 
40      return {
41        startAnimation: () => controls.start("animate"),
42        stopAnimation: () => controls.start("normal"),
43      };
44    });
45 
46    const handleMouseEnter = useCallback(
47      (e: React.MouseEvent<HTMLDivElement>) => {
48        if (isControlledRef.current) {
49          onMouseEnter?.(e);
50        } else {
51          controls.start("animate");
52        }
53      },
54      [controls, onMouseEnter]
55    );
56 
57    const handleMouseLeave = useCallback(
58      (e: React.MouseEvent<HTMLDivElement>) => {
59        if (isControlledRef.current) {
60          onMouseLeave?.(e);
61        } else {
62          controls.start("normal");
63        }
64      },
65      [controls, onMouseLeave]
66    );
67 
68    return (
69      <div
70        className={cn(className)}
71        onMouseEnter={handleMouseEnter}
72        onMouseLeave={handleMouseLeave}
73        {...props}
74      >
75        <svg
76          fill="none"
77          height={size}
78          stroke="currentColor"
79          strokeLinecap="round"
80          strokeLinejoin="round"
81          strokeWidth="2"
82          viewBox="0 0 24 24"
83          width={size}
84          xmlns="http://www.w3.org/2000/svg"
85        >
86          <motion.path
87            animate={controls}
88            d="M6 7.90909V16C6 19.3137 8.68629 22 12 22V22C15.3137 22 18 19.3137 18 16V6C18 3.79086 16.2091 2 14 2V2C11.7909 2 10 3.79086 10 6V15.1818C10 16.2864 10.8954 17.1818 12 17.1818V17.1818C13.1046 17.1818 14 16.2864 14 15.1818V8"
89// … truncated