battery-pause-icon

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