Added the chakra ui components and removed the gitignore changes

Author: dagapurva3

.gitignore

@@ -33,6 +33,3 @@ npm-debug.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-
-# Docker
-.dockerignore

src/pages/exportUsers.tsx

@@ -1,4 +1,6 @@
 import React, { useState } from 'react';
+import { Button, Box, Text } from '@chakra-ui/react';
+import { DownloadIcon } from '@chakra-ui/icons';
 
 export default function ExportUsersPage() {
   const [error, setError] = useState<string | null>(null);
@@ -34,9 +36,7 @@ export default function ExportUsersPage() {
       const link = document.createElement('a');
       link.href = url;
       link.download = 'users.csv';
-      document.body.appendChild(link);
       link.click();
-      document.body.removeChild(link);
       URL.revokeObjectURL(url);
     } catch (err) {
       console.error('Error downloading CSV:', err);
@@ -45,66 +45,22 @@ export default function ExportUsersPage() {
   };
 
   return (
-    <div style={{ textAlign: 'center' }}>
-      <button
+    <Box>
+      <Button
+        leftIcon={<DownloadIcon />}
+        colorScheme="blue"
+        variant="solid"
         onClick={handleDownload}
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: '46.36px',
-          padding: '11.273px 15.031px',
-          gap: '16px',
-          backgroundColor: '#0468C1',
-          color: '#FFFFFF',
-          fontFamily: 'Poppins, sans-serif',
-          fontSize: '16px',
-          fontWeight: 600,
-          border: '1px solid #D2D2D2',
-          borderRadius: '7px',
-          cursor: 'pointer',
-          transition: 'background 0.2s ease-in-out, transform 0.1s',
-        }}
-        onMouseOver={(e) => (e.currentTarget.style.backgroundColor = '#0358A3')}
-        onMouseOut={(e) => (e.currentTarget.style.backgroundColor = '#0468C1')}
-        onMouseDown={(e) => (e.currentTarget.style.transform = 'scale(0.95)')}
-        onMouseUp={(e) => (e.currentTarget.style.transform = 'scale(1)')}
+        _hover={{ bg: 'blue.600' }}
+        _active={{ transform: 'scale(0.95)' }}
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="26"
-          height="25"
-          viewBox="0 0 26 25"
-          fill="white"
-        >
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M3.7443 14.583C4.3196 14.583 4.78597 15.0494 4.78597 15.6247V19.7913C4.78597 20.0676 4.89572 20.3326 5.09107 20.5279C5.28642 20.7233 5.55137 20.833 5.82764 20.833H20.411C20.6872 20.833 20.9522 20.7233 21.1475 20.5279C21.3429 20.3326 21.4526 20.0676 21.4526 19.7913V15.6247C21.4526 15.0494 21.919 14.583 22.4943 14.583C23.0696 14.583 23.536 15.0494 23.536 15.6247V19.7913C23.536 20.6201 23.2067 21.415 22.6207 22.001C22.0346 22.5871 21.2398 22.9163 20.411 22.9163H5.82764C4.99883 22.9163 4.20398 22.5871 3.61793 22.001C3.03188 21.415 2.70264 20.6201 2.70264 19.7913V15.6247C2.70264 15.0494 3.16901 14.583 3.7443 14.583Z"
-            fill="white"
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M7.17448 9.6801C7.58128 9.2733 8.24082 9.2733 8.64762 9.6801L13.1194 14.1519L17.5911 9.6801C17.9979 9.2733 18.6575 9.2733 19.0643 9.6801C19.4711 10.0869 19.4711 10.7464 19.0643 11.1532L13.856 16.3616C13.4492 16.7684 12.7896 16.7684 12.3828 16.3616L7.17448 11.1532C6.76769 10.7464 6.76769 10.0869 7.17448 9.6801Z"
-            fill="white"
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M13.1193 2.08301C13.6946 2.08301 14.161 2.54938 14.161 3.12467V15.6247C14.161 16.2 13.6946 16.6663 13.1193 16.6663C12.544 16.6663 12.0776 16.2 12.0776 15.6247V3.12467C12.0776 2.54938 12.544 2.08301 13.1193 2.08301Z"
-            fill="white"
-          />
-        </svg>
-
-        {/* Export Text */}
-        <span style={{ lineHeight: 'normal' }}>Export</span>
-      </button>
+        Export
+      </Button>
       {error && (
-        <p style={{ color: 'red', marginTop: '10px', fontSize: '14px' }}>
+        <Text color="red.500" mt={4} fontSize="sm">
           {error}
-        </p>
+        </Text>
       )}
-    </div>
+    </Box>
   );
 }