import { motion } from 'framer-motion' import { useEffect, useState } from 'react' export function AssistedPasswordConfirmation({password}:{password: sting}) { const [confirmPassword, setConfirmPassword] = useState('') const [shake, setShake] = useState(false) const handleConfirmPasswordChange = ( e: React.ChangeEvent, ) => { if ( confirmPassword.length >= password.length && e.target.value.length > confirmPassword.length ) { setShake(true) } else { setConfirmPassword(e.target.value) } } useEffect(() => { if (shake) { const timer = setTimeout(() => setShake(false), 500) return () => clearTimeout(timer) } }, [shake]) const getLetterStatus = (letter: string, index: number) => { if (!confirmPassword[index]) return '' return confirmPassword[index] === letter ? 'bg-green-500/20' : 'bg-red-500/20' } const passwordsMatch = password === confirmPassword const bounceAnimation = { x: shake ? [-10, 10, -10, 10, 0] : 0, transition: { duration: 0.5 }, } const matchAnimation = { scale: passwordsMatch ? [1, 1.05, 1] : 1, transition: { duration: 0.3 }, } const borderAnimation = { borderColor: passwordsMatch ? '#10B981' : '', transition: { duration: 0.3 }, } return (

→ {password}

{password.split('').map((_, index) => (

))}

{password.split('').map((letter, index) => ( ))}

) }