56cada6335
* feat: wip import csv * feat: start implementing twenty UI * feat: new radio button component * feat: use new radio button component and fix scroll issue * fix: max height modal * feat: wip try to customize react-data-grid to match design * feat: wip match columns * feat: wip match column selection * feat: match column * feat: clean heading component & try to fix scroll in last step * feat: validation step * fix: small cleaning and remove unused component * feat: clean folder architecture * feat: remove translations * feat: remove chackra theme * feat: remove unused libraries * feat: use option button to open spreadsheet & fix stories * Fix lint and fix imports --------- Co-authored-by: Charles Bochet <charles@twenty.com>
39 lines
845 B
TypeScript
39 lines
845 B
TypeScript
import { motion } from 'framer-motion';
|
|
|
|
export type CheckmarkProps = React.ComponentProps<typeof motion.path> & {
|
|
isAnimating?: boolean;
|
|
color?: string;
|
|
duration?: number;
|
|
size?: number;
|
|
};
|
|
|
|
export function AnimatedCheckmark({
|
|
isAnimating = false,
|
|
color = '#FFF',
|
|
duration = 0.5,
|
|
size = 28,
|
|
...restProps
|
|
}: CheckmarkProps) {
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 52 52"
|
|
width={size}
|
|
height={size}
|
|
>
|
|
<motion.path
|
|
{...restProps}
|
|
fill="none"
|
|
stroke={color}
|
|
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>
|
|
);
|
|
}
|