layout-dashboard-icon

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