vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: match api layout w new menu layout

Browse Source
This commit is contained in:
amhsirak
2025-11-05 20:54:35 +05:30
parent e1d10042d7
commit 2aa4aff608
1 changed files with 68 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/components/api/ApiKey.tsx
View File

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