bluetooth-connected-icon

1"use client";
2import { forwardRef, useImperativeHandle } from "react";
3import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
4import { motion, useAnimate } from "motion/react";
5 
6const BluetoothConnectedIcon = forwardRef<
7  AnimatedIconHandle,
8  AnimatedIconProps
9>(
10  (
11    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
12    ref,
13  ) => {
14    const [scope, animate] = useAnimate();
15 
16    const start = async () => {
17      // Pulse the bluetooth symbol
18      animate(
19        ".bluetooth-symbol",
20        {
21          scale: [1, 1.1, 1],
22        },
23        {
24          duration: 0.6,
25          ease: "easeInOut",
26        },
27      );
28 
29      // Animate connection dots
30      animate(
31        ".connection-dot",
32        {
33          scale: [1, 1.5, 1],
34          opacity: [1, 0.5, 1],
35        },
36        {
37          duration: 0.8,
38          delay: (i) => i * 0.2,
39          ease: "easeInOut",
40        },
41      );
42    };
43 
44    const stop = async () => {
45      animate(
46        ".bluetooth-symbol",
47        {
48          scale: 1,
49        },
50        {
51          duration: 0.3,
52          ease: "easeInOut",
53        },
54      );
55 
56      animate(
57        ".connection-dot",
58        {
59          scale: 1,
60          opacity: 1,
61        },
62        {
63          duration: 0.3,
64          ease: "easeInOut",
65        },
66      );
67    };
68 
69    useImperativeHandle(ref, () => {
70      return {
71        startAnimation: start,
72        stopAnimation: stop,
73      };
74    });
75 
76    const handleHoverStart = () => {
77      start();
78    };
79 
80    const handleHoverEnd = () => {
81      stop();
82    };
83 
84    return (
85      <motion.svg
86        ref={scope}
87        xmlns="http://www.w3.org/2000/svg"
88        width={size}
89        height={size}
90        viewBox="0 0 24 24"
91        fill="none"
92        stroke={color}
93        strokeWidth={strokeWidth}
94        strokeLinecap="round"
95        strokeLinejoin="round"
96        className={`cursor-pointer ${className}`}
97        onHoverStart={handleHoverStart}
98        onHoverEnd={handleHoverEnd}
99      >
100        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
101 
102        {/* Bluetooth symbol */}
103        <motion.path
104          className="bluetooth-symbol"
105          d="M7 8l10 8l-5 4l0 -16l5 4l-10 8"
106          style={{ transformOrigin: "50% 50%" }}
107        />
108 
109        {/* Connection dots */}
110        <motion.path className="connection-dot" d="M4 12l1 0" />
111        <motion.path className="connection-dot" d="M18 12l1 0" />
112      </motion.svg>
113    );
114  },
115);
116 
117// … truncated