41 lines
918 B
TypeScript
41 lines
918 B
TypeScript
import { useTheme } from '@emotion/react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
export type AnimatedCheckmarkProps = React.ComponentProps<
|
|
typeof motion.path
|
|
> & {
|
|
isAnimating?: boolean;
|
|
color?: string;
|
|
duration?: number;
|
|
size?: number;
|
|
};
|
|
|
|
export const AnimatedCheckmark = ({
|
|
isAnimating = false,
|
|
color,
|
|
duration = 0.5,
|
|
size = 28,
|
|
}: AnimatedCheckmarkProps) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 52 52"
|
|
width={size}
|
|
height={size}
|
|
>
|
|
<motion.path
|
|
fill="none"
|
|
stroke={color ?? theme.grayScale.gray0}
|
|
strokeWidth={4}
|
|
d="M14 27l7.8 7.8L38 14"
|
|
pathLength="1"
|
|
strokeDasharray="1"
|
|
strokeDashoffset={isAnimating ? '1' : '0'}
|
|
animate={{ strokeDashoffset: isAnimating ? '0' : '1' }}
|
|
transition={{ duration }}
|
|
/>
|
|
</svg>
|
|
);
|
|
};
|