battery-icon

1"use client";
2import { forwardRef, useImperativeHandle } from "react";
3import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
4import { motion, useAnimate } from "motion/react";
5 
6const BatteryIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
7  (
8    { size = 24, color = "currentColor", strokeWidth = 2.5, className = "" },
9    ref,
10  ) => {
11    const [scope, animate] = useAnimate();
12 
13    const start = async () => {
14      await animate(
15        ".battery-bolt",
16        { pathLength: 0, opacity: 0 },
17        { duration: 0 },
18      );
19      animate(
20        ".battery-bolt",
21        {
22          pathLength: [0, 1],
23          opacity: [0, 1],
24        },
25        {
26          duration: 0.6,
27          ease: "easeInOut",
28        },
29      );
30      animate(
31        ".battery-body",
32        {
33          scale: [1, 1.04, 1],
34        },
35        {
36          duration: 0.6,
37          ease: "easeInOut",
38        },
39      );
40      await animate(
41        ".battery-bolt",
42        {
43          opacity: [1, 0.4, 1],
44        },
45        {
46          duration: 0.3,
47          ease: "easeInOut",
48        },
49      );
50    };
51 
52    const stop = () => {
53      animate(
54        ".battery-bolt",
55        { pathLength: 1, opacity: 1 },
56        { duration: 0.2 },
57      );
58    };
59 
60    useImperativeHandle(ref, () => {
61      return {
62        startAnimation: start,
63        stopAnimation: stop,
64      };
65    });
66 
67    const handleHoverStart = () => {
68      start();
69    };
70 
71    const handleHoverEnd = () => {
72      stop();
73    };
74 
75    return (
76      <motion.div
77        ref={scope}
78        onHoverStart={handleHoverStart}
79        onHoverEnd={handleHoverEnd}
80        className={`inline-flex cursor-pointer ${className}`}
81      >
82        <svg
83          xmlns="http://www.w3.org/2000/svg"
84          width={size}
85          height={size}
86          viewBox="0 0 48 48"
87          fill="none"
88          stroke={color}
89          strokeWidth={strokeWidth}
90          strokeMiterlimit="10"
91          strokeLinecap="square"
92        >
93          <motion.path className="battery-terminal" d="M46 20V28" />
94 
95          <motion.path
96            className="battery-body"
97            style={{ transformOrigin: "50% 50%" }}
98            d="M37 10H8C5.23858 10 3 12.2386 3 15V33C3 35.7614 5.23858 38 8 38H37C39.7614 38 42 35.7614 42 33V15C42 12.2386 39.7614 10 37 10Z"
99          />
100 
101          <motion.path
102            className="battery-bolt"
103            style={{ transformOrigin: "22.5px 24px" }}
104// … truncated