From 2aa4aff6089d43075ce47d95cba4c004d857eb74 Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 5 Nov 2025 20:54:35 +0530
Subject: [PATCH] feat:  match api layout w new menu layout

---
 src/components/api/ApiKey.tsx | 137 +++++++++++++++++-----------------
 1 file changed, 68 insertions(+), 69 deletions(-)

diff --git a/src/components/api/ApiKey.tsx b/src/components/api/ApiKey.tsx
index 9feb9551..2da3502f 100644
--- a/src/components/api/ApiKey.tsx
+++ b/src/components/api/ApiKey.tsx
@@ -107,73 +107,72 @@ const ApiKeyManager = () => {
   }
 
   return (
-    <Container sx={{ alignSelf: 'flex-start' }}>
-      <Typography variant="body1" sx={{ marginTop: '10px', marginBottom: '40px' }}>
-        Start by creating an API key below. Then,
-        <a href={`${apiUrl}/api-docs/`} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', marginLeft: '5px', marginRight: '5px' }}>
-          test your API
-        </a>
-        or read the <a href="https://docs.maxun.dev/category/api-docs" target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
-          API documentation
-        </a> for setup instructions.
-      </Typography>
-      <Typography
-        variant="h6"
-        gutterBottom
-        component="div"
-        style={{ marginBottom: '20px', textAlign: 'left', width: '100%' }}
-      >
-        {t('apikey.title')}
-      </Typography>
-      {apiKey ? (
-        <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}>
-          <Table>
-            <TableHead>
-              <TableRow>
-                <TableCell>{t('apikey.table.name')}</TableCell>
-                <TableCell>{t('apikey.table.key')}</TableCell>
-                <TableCell>{t('apikey.table.actions')}</TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              <TableRow>
-                <TableCell>{apiKeyName}</TableCell>
-                <TableCell>
-                  <Box sx={{ fontFamily: 'monospace', width: '10ch' }}>
-                    {showKey ? `${apiKey?.substring(0, 10)}...` : '**********'}
-                  </Box>
-                </TableCell>
-                <TableCell>
-                  <Tooltip title={t('apikey.actions.copy')}>
-                    <IconButton onClick={copyToClipboard}>
-                      <ContentCopy />
-                    </IconButton>
-                  </Tooltip>
-                  <Tooltip title={showKey ? t('apikey.actions.hide') : t('apikey.actions.show')}>
-                    <IconButton onClick={() => setShowKey(!showKey)}>
-                      {showKey ? <VisibilityOff /> : <Visibility />}
-                    </IconButton>
-                  </Tooltip>
-                  <Tooltip title={t('apikey.actions.delete')}>
-                    <IconButton onClick={deleteApiKey} color="error">
-                      <Delete />
-                    </IconButton>
-                  </Tooltip>
-                </TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-        </TableContainer>
-      ) : (
-        <>
-          <Typography>{t('apikey.no_key_message')}</Typography>
-          <Button onClick={generateApiKey} variant="contained" color="primary" sx={{ marginTop: '20px' }}>
-            {t('apikey.generate_button')}
-          </Button>
-        </>
-      )}
-    </Container>
-  );
-};
-
+  <Container sx={{ alignSelf: 'flex-start' }}>
+    <Typography variant="body1" sx={{ marginBottom: '40px' }}>
+      Start by creating an API key below. Then,
+      <a href={`${apiUrl}/api-docs/`} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', marginLeft: '5px', marginRight: '5px' }}>
+        test your API
+      </a>
+      or read the <a href="https://docs.maxun.dev/category/api-docs" target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
+        API documentation
+      </a> for setup instructions.
+    </Typography>
+    <Typography
+      variant="h6"
+      gutterBottom
+      component="div"
+      style={{ marginBottom: '20px', textAlign: 'left', width: '100%' }}
+    >
+      {t('apikey.title')}
+    </Typography>
+    {apiKey ? (
+      <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>{t('apikey.table.name')}</TableCell>
+              <TableCell>{t('apikey.table.key')}</TableCell>
+              <TableCell>{t('apikey.table.actions')}</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <TableRow>
+              <TableCell>{apiKeyName}</TableCell>
+              <TableCell>
+                <Box sx={{ fontFamily: 'monospace', width: '10ch' }}>
+                  {showKey ? `${apiKey?.substring(0, 10)}...` : '**********'}
+                </Box>
+              </TableCell>
+              <TableCell>
+                <Tooltip title={t('apikey.actions.copy')}>
+                  <IconButton onClick={copyToClipboard}>
+                    <ContentCopy />
+                  </IconButton>
+                </Tooltip>
+                <Tooltip title={showKey ? t('apikey.actions.hide') : t('apikey.actions.show')}>
+                  <IconButton onClick={() => setShowKey(!showKey)}>
+                    {showKey ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                </Tooltip>
+                <Tooltip title={t('apikey.actions.delete')}>
+                  <IconButton onClick={deleteApiKey} color="error">
+                    <Delete />
+                  </IconButton>
+                </Tooltip>
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </TableContainer>
+    ) : (
+      <>
+        <Typography>{t('apikey.no_key_message')}</Typography>
+        <Button onClick={generateApiKey} variant="contained" color="primary" sx={{ marginTop: '20px' }}>
+          {t('apikey.generate_button')}
+        </Button>
+      </>
+    )}
+  </Container>
+);
+}
 export default ApiKeyManager;
\ No newline at end of file