diff --git a/src/components/icons/EyeToggleIcon.tsx b/src/components/icons/EyeToggleIcon.tsx index 2cb3d03..8b9af67 100644 --- a/src/components/icons/EyeToggleIcon.tsx +++ b/src/components/icons/EyeToggleIcon.tsx @@ -1,91 +1,107 @@ -import { motion, Variants } from "framer-motion"; -import React from "react"; +import { motion, Variants } from 'framer-motion' +import React from 'react' type EyeToggleIconProps = { - slash: boolean; -} & React.SVGProps; + slash: boolean +} & React.SVGProps -export const EyeToggleIcon: React.FC = ({ slash, ...props }) => { - const slashVariants: Variants = { - enter: { - pathLength: 1, - opacity: 1, - pathOffset: 0, - transition: { - pathOffset: { duration: 0 }, - pathLength: { duration: 0.3, ease: "easeInOut" }, - opacity: { duration: 0.2, ease: "easeInOut", delay: 0 } - } - }, - exit: { - pathLength: 0, - opacity: 0, - pathOffset: 2, - transition: { - pathOffset: { duration: 0 }, - pathLength: { duration: 0.3, ease: "easeInOut" }, - opacity: { duration: 0.2, ease: "easeInOut", delay: .1 } - } - }, +export const EyeToggleIcon: React.FC = ({ + slash, + ...props +}) => { + const slashVariants: Variants = { + enter: { + pathLength: 1, + opacity: 1, + pathOffset: 0, + transition: { + pathOffset: { duration: 0 }, + pathLength: { duration: 0.3, ease: 'easeInOut' }, + opacity: { duration: 0.2, ease: 'easeInOut', delay: 0 } + } + }, + exit: { + pathLength: 0, + opacity: 0, + pathOffset: 2, + transition: { + pathOffset: { duration: 0 }, + pathLength: { duration: 0.3, ease: 'easeInOut' }, + opacity: { duration: 0.2, ease: 'easeInOut', delay: 0.1 } + } } + } - return ( - + + - - - - - - {/* Eye Circle */} - + + + + {/* Eye Circle */} + - {/* Eye Outline */} - + {/* Eye Outline */} + - {/* Slash Line - Animate with Framer Motion */} - - - - ); -}; + {/* Slash Line - Animate with Framer Motion */} + + + + ) +}