110 lines
2.7 KiB
TypeScript
110 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import type { Variants } from "motion/react";
|
|
import { motion, useAnimation } from "motion/react";
|
|
import type { HTMLAttributes } from "react";
|
|
import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export interface ShieldCheckIconHandle {
|
|
startAnimation: () => void;
|
|
stopAnimation: () => void;
|
|
}
|
|
|
|
interface ShieldCheckIconProps extends HTMLAttributes<HTMLDivElement> {
|
|
size?: number;
|
|
}
|
|
|
|
const PATH_VARIANTS: Variants = {
|
|
normal: {
|
|
opacity: 1,
|
|
pathLength: 1,
|
|
scale: 1,
|
|
transition: {
|
|
duration: 0.3,
|
|
opacity: { duration: 0.1 },
|
|
},
|
|
},
|
|
animate: {
|
|
opacity: [0, 1],
|
|
pathLength: [0, 1],
|
|
scale: [0.5, 1],
|
|
transition: {
|
|
duration: 0.4,
|
|
opacity: { duration: 0.1 },
|
|
},
|
|
},
|
|
};
|
|
|
|
const ShieldCheckIcon = forwardRef<ShieldCheckIconHandle, ShieldCheckIconProps>(
|
|
({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
|
|
const controls = useAnimation();
|
|
const isControlledRef = useRef(false);
|
|
|
|
useImperativeHandle(ref, () => {
|
|
isControlledRef.current = true;
|
|
|
|
return {
|
|
startAnimation: () => controls.start("animate"),
|
|
stopAnimation: () => controls.start("normal"),
|
|
};
|
|
});
|
|
|
|
const handleMouseEnter = useCallback(
|
|
(e: React.MouseEvent<HTMLDivElement>) => {
|
|
if (isControlledRef.current) {
|
|
onMouseEnter?.(e);
|
|
} else {
|
|
controls.start("animate");
|
|
}
|
|
},
|
|
[controls, onMouseEnter]
|
|
);
|
|
|
|
const handleMouseLeave = useCallback(
|
|
(e: React.MouseEvent<HTMLDivElement>) => {
|
|
if (isControlledRef.current) {
|
|
onMouseLeave?.(e);
|
|
} else {
|
|
controls.start("normal");
|
|
}
|
|
},
|
|
[controls, onMouseLeave]
|
|
);
|
|
|
|
return (
|
|
<div
|
|
className={cn(className)}
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
{...props}
|
|
>
|
|
<svg
|
|
fill="none"
|
|
height={size}
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
viewBox="0 0 24 24"
|
|
width={size}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
|
|
<motion.path
|
|
animate={controls}
|
|
d="m9 12 2 2 4-4"
|
|
initial="normal"
|
|
variants={PATH_VARIANTS}
|
|
/>
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
ShieldCheckIcon.displayName = "ShieldCheckIcon";
|
|
|
|
export { ShieldCheckIcon };
|