battery-charging-icon

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