fix typo

Author: pushpak1300

resources/js/components/two-factor-recovery-codes.tsx

@@ -11,33 +11,33 @@ interface TwoFactorRecoveryCodesProps {
 }
 
 export default function TwoFactorRecoveryCodes({ recoveryCodesList, fetchRecoveryCodes }: TwoFactorRecoveryCodesProps) {
-    const [codesAeVisible, setCodesAeVisible] = useState<boolean>(false);
+    const [codesAreVisible, setCodesAreVisible] = useState<boolean>(false);
     const codesSectionRef = useRef<HTMLDivElement | null>(null);
 
     const toggleCodesVisibility = useCallback(async () => {
-        if (!codesAeVisible && !recoveryCodesList.length) {
+        if (!codesAreVisible && !recoveryCodesList.length) {
             await fetchRecoveryCodes();
         }
 
-        setCodesAeVisible(!codesAeVisible);
+        setCodesAreVisible(!codesAreVisible);
 
-        if (!codesAeVisible) {
+        if (!codesAreVisible) {
             setTimeout(() => {
                 codesSectionRef.current?.scrollIntoView({
                     behavior: 'smooth',
                     block: 'nearest',
                 });
             });
         }
-    }, [codesAeVisible, recoveryCodesList.length, fetchRecoveryCodes]);
+    }, [codesAreVisible, recoveryCodesList.length, fetchRecoveryCodes]);
 
     useEffect(() => {
         if (!recoveryCodesList.length) {
             fetchRecoveryCodes();
         }
     }, [recoveryCodesList.length, fetchRecoveryCodes]);
 
-    const RecoveryCodeIconComponent = codesAeVisible ? EyeOff : Eye;
+    const RecoveryCodeIconComponent = codesAreVisible ? EyeOff : Eye;
 
     return (
         <Card>
@@ -52,12 +52,12 @@ export default function TwoFactorRecoveryCodes({ recoveryCodesList, fetchRecover
             </CardHeader>
             <CardContent>
                 <div className="flex flex-col gap-3 select-none sm:flex-row sm:items-center sm:justify-between">
-                    <Button onClick={toggleCodesVisibility} className="w-fit" aria-expanded={codesAeVisible} aria-controls="recovery-codes-section">
+                    <Button onClick={toggleCodesVisibility} className="w-fit" aria-expanded={codesAreVisible} aria-controls="recovery-codes-section">
                         <RecoveryCodeIconComponent className="size-4" aria-hidden="true" />
-                        {codesAeVisible ? 'Hide' : 'View'} Recovery Codes
+                        {codesAreVisible ? 'Hide' : 'View'} Recovery Codes
                     </Button>
 
-                    {codesAeVisible && (
+                    {codesAreVisible && (
                         <Form {...regenerateRecoveryCodes.form()} options={{ preserveScroll: true }} onSuccess={fetchRecoveryCodes}>
                             {({ processing }) => (
                                 <Button variant="secondary" type="submit" disabled={processing} aria-describedby="regenerate-warning">
@@ -69,8 +69,8 @@ export default function TwoFactorRecoveryCodes({ recoveryCodesList, fetchRecover
                 </div>
                 <div
                     id="recovery-codes-section"
-                    className={`relative overflow-hidden transition-all duration-300 ${codesAeVisible ? 'h-auto opacity-100' : 'h-0 opacity-0'}`}
-                    aria-hidden={!codesAeVisible}
+                    className={`relative overflow-hidden transition-all duration-300 ${codesAreVisible ? 'h-auto opacity-100' : 'h-0 opacity-0'}`}
+                    aria-hidden={!codesAreVisible}
                 >
                     <div className="mt-3 space-y-3">
                         <div