79 lines
1.9 KiB
TypeScript
79 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { motion, useAnimation, type Variants } from "motion/react";
|
|
|
|
const frameVariants: Variants = {
|
|
visible: { opacity: 1 },
|
|
hidden: { opacity: 1 },
|
|
};
|
|
|
|
const lineVariants: Variants = {
|
|
visible: { pathLength: 1, opacity: 1 },
|
|
hidden: { pathLength: 0, opacity: 0 },
|
|
};
|
|
|
|
const ChartColumnIncreasingIcon = () => {
|
|
const controls = useAnimation();
|
|
|
|
const handleHoverStart = async () => {
|
|
await controls.start((i) => ({
|
|
pathLength: 0,
|
|
opacity: 0,
|
|
transition: { delay: i * 0.1, duration: 0.3 },
|
|
}));
|
|
await controls.start((i) => ({
|
|
pathLength: 1,
|
|
opacity: 1,
|
|
transition: { delay: i * 0.1, duration: 0.3 },
|
|
}));
|
|
};
|
|
|
|
const handleHoverEnd = () => {
|
|
void controls.start("visible");
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="flex cursor-pointer select-none items-center justify-center rounded-md p-2 transition-colors duration-200 hover:bg-accent"
|
|
onMouseEnter={handleHoverStart}
|
|
onMouseLeave={handleHoverEnd}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="28"
|
|
height="28"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<motion.path
|
|
variants={lineVariants}
|
|
initial="visible"
|
|
animate={controls}
|
|
custom={1}
|
|
d="M13 17V9"
|
|
/>
|
|
<motion.path
|
|
variants={lineVariants}
|
|
initial="visible"
|
|
animate={controls}
|
|
custom={2}
|
|
d="M18 17V5"
|
|
/>
|
|
<motion.path variants={frameVariants} d="M3 3v16a2 2 0 0 0 2 2h16" />
|
|
<motion.path
|
|
variants={lineVariants}
|
|
initial="visible"
|
|
animate={controls}
|
|
custom={0}
|
|
d="M8 17v-3"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { ChartColumnIncreasingIcon };
|