audio-lines

1"use client";
2 
3import { motion, useAnimation } from "motion/react";
4import type { HTMLAttributes } from "react";
5import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
6 
7import { cn } from "@/lib/utils";
8 
9export interface AudioLinesIconHandle {
10  startAnimation: () => void;
11  stopAnimation: () => void;
12}
13 
14interface AudioLinesIconProps extends HTMLAttributes<HTMLDivElement> {
15  size?: number;
16}
17 
18const AudioLinesIcon = forwardRef<AudioLinesIconHandle, AudioLinesIconProps>(
19  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
20    const controls = useAnimation();
21    const isControlledRef = useRef(false);
22 
23    useImperativeHandle(ref, () => {
24      isControlledRef.current = true;
25 
26      return {
27        startAnimation: () => controls.start("animate"),
28        stopAnimation: () => controls.start("normal"),
29      };
30    });
31 
32    const handleMouseEnter = useCallback(
33      (e: React.MouseEvent<HTMLDivElement>) => {
34        if (isControlledRef.current) {
35          onMouseEnter?.(e);
36        } else {
37          controls.start("animate");
38        }
39      },
40      [controls, onMouseEnter]
41    );
42 
43    const handleMouseLeave = useCallback(
44      (e: React.MouseEvent<HTMLDivElement>) => {
45        if (isControlledRef.current) {
46          onMouseLeave?.(e);
47        } else {
48          controls.start("normal");
49        }
50      },
51      [controls, onMouseLeave]
52    );
53 
54    return (
55      <div
56        className={cn(className)}
57        onMouseEnter={handleMouseEnter}
58        onMouseLeave={handleMouseLeave}
59        {...props}
60      >
61        <svg
62          fill="none"
63          height={size}
64          stroke="currentColor"
65          strokeLinecap="round"
66          strokeLinejoin="round"
67          strokeWidth="2"
68          viewBox="0 0 24 24"
69          width={size}
70          xmlns="http://www.w3.org/2000/svg"
71        >
72          <path d="M2 10v3" />
73          <motion.path
74            animate={controls}
75            d="M6 6v11"
76            variants={{
77              normal: { d: "M6 6v11" },
78              animate: {
79                d: ["M6 6v11", "M6 10v3", "M6 6v11"],
80                transition: {
81                  duration: 1.5,
82                  repeat: Number.POSITIVE_INFINITY,
83                },
84              },
85            }}
86          />
87          <motion.path
88            animate={controls}
89            d="M10 3v18"
90            variants={{
91              normal: { d: "M10 3v18" },
92              animate: {
93// … truncated