brightness-down-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrightnessDownIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  (
7    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
8    ref,
9  ) => {
10    const [scope, animate] = useAnimate();
11 
12    const start = async () => {
13      animate(
14        ".sun-center",
15        { scale: [1, 0.8, 1] },
16        { duration: 0.4, ease: "easeInOut" },
17      );
18      animate(
19        ".sun-rays",
20        { opacity: [1, 0.4, 1] },
21        { duration: 0.5, ease: "easeInOut" },
22      );
23    };
24 
25    const stop = () => {
26      animate(".sun-center", { scale: 1 }, { duration: 0.2, ease: "easeOut" });
27      animate(".sun-rays", { opacity: 1 }, { duration: 0.2, ease: "easeOut" });
28    };
29 
30    useImperativeHandle(ref, () => {
31      return {
32        startAnimation: start,
33        stopAnimation: stop,
34      };
35    });
36 
37    const handleHoverStart = () => {
38      start();
39    };
40 
41    const handleHoverEnd = () => {
42      stop();
43    };
44 
45    return (
46      <motion.div
47        ref={scope}
48        onHoverStart={handleHoverStart}
49        onHoverEnd={handleHoverEnd}
50        className={`inline-flex cursor-pointer items-center justify-center ${className}`}
51      >
52        <svg
53          xmlns="http://www.w3.org/2000/svg"
54          width={size}
55          height={size}
56          viewBox="0 0 24 24"
57          fill="none"
58          stroke={color}
59          strokeWidth={strokeWidth}
60          strokeLinecap="round"
61          strokeLinejoin="round"
62        >
63          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
64          <motion.path
65            className="sun-center"
66            d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"
67            style={{ transformOrigin: "center" }}
68          />
69          <motion.g className="sun-rays">
70            <path d="M12 5l0 .01" />
71            <path d="M17 7l0 .01" />
72            <path d="M19 12l0 .01" />
73            <path d="M17 17l0 .01" />
74            <path d="M12 19l0 .01" />
75            <path d="M7 17l0 .01" />
76            <path d="M5 12l0 .01" />
77            <path d="M7 7l0 .01" />
78          </motion.g>
79        </svg>
80      </motion.div>
81    );
82  },
83);
84 
85BrightnessDownIcon.displayName = "BrightnessDownIcon";
86 
87export default BrightnessDownIcon;