feat: added a new hook to know the connection status

src/components/Footer.tsx

@@ -1,9 +1,27 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import { Flex, useColorModeValue, Link } from '@chakra-ui/react';
+import { Box, Flex, useColorModeValue, Link } from '@chakra-ui/react';
+
+import { useNetworkState } from '@hooks/useNetworkState';
 
 export function Footer() {
   const bgFooter = useColorModeValue('gray.100', 'gray.900');
+  const networkState = useNetworkState();
+  let connectionState;
+
+  if (networkState === 'online') {
+    connectionState = (
+      <Box w='14px' h='14px' rounded='full' bg='green.500'></Box>
+    );
+  }
+
+  if (networkState === 'offline') {
+    connectionState = <Box w='14px' h='14px' rounded='full' bg='red'></Box>;
+  }
+
+  if (networkState === 'slow') {
+    connectionState = <Box w='14px' h='14px' rounded='full' bg='#ffc700'></Box>;
+  }
 
   return (
     <>
@@ -26,6 +44,18 @@ export function Footer() {
         >
           Políticas de Privacidad
         </Link>
+        <Flex
+          mt='3'
+          align='center'
+          fontSize='xs'
+          bg='black'
+          p='2'
+          rounded='lg'
+          color='#EAEAEA'
+        >
+          <Box mr='2'>Estado de conexión</Box>
+          {connectionState}
+        </Flex>
       </Flex>
     </>
   );

src/hooks/useNetworkState.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+
+type NetworkState = 'online' | 'offline' | 'slow';
+
+export function useNetworkState(): NetworkState {
+  const [networkState, setNetworkState] = useState<NetworkState>('online');
+
+  useEffect(() => {
+    function handleNetworkChange() {
+      if (navigator.onLine) {
+        // Comprobar si la velocidad de conexión es lenta o no
+        const connection =
+          (navigator as any).connection ||
+          (navigator as any).mozConnection ||
+          (navigator as any).webkitConnection;
+
+        if (connection) {
+          const effectiveType = connection.effectiveType;
+
+          if (
+            effectiveType === 'slow-2g' ||
+            effectiveType === '2g' ||
+            effectiveType === '3g'
+          ) {
+            setNetworkState('slow');
+          } else {
+            setNetworkState('online');
+          }
+        } else {
+          setNetworkState('online');
+        }
+      } else {
+        setNetworkState('offline');
+      }
+    }
+
+    window.addEventListener('online', handleNetworkChange);
+    window.addEventListener('offline', handleNetworkChange);
+    handleNetworkChange();
+
+    return () => {
+      window.removeEventListener('online', handleNetworkChange);
+      window.removeEventListener('offline', handleNetworkChange);
+    };
+  }, []);
+
+  return networkState;
+}