amir/Account
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add sidebar and change the style of that

Browse Source
This commit is contained in:
Koosha Lahouti
2025-08-03 12:13:53 +03:30
parent ed347d8b61
commit bf87dd8123
22 changed files with 2430 additions and 788 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
src/features/profile/components/security/RecentLogins.tsx
View File

@@ -1,6 +1,7 @@
import { Box, Typography, Button } from '@mui/material';
import { CardContainer } from '@/components/CardContainer';
import { useTranslation } from 'react-i18next';
import Logo from '@/components/Logo';
import { CardContainer } from '@/components/CardContainer';
export function RecentLogins() {
const { t } = useTranslation('security');
@@ -22,78 +23,82 @@ export function RecentLogins() {
];
return (
<Box sx={{ overflowX: 'hidden', px: { xs: 2, sm: 3 } }}>
<Box
sx={{
backgroundColor: 'background.paper',
width: '100%',
maxWidth: '796px',
mx: 'auto',
px: { xs: 1, sm: 2 },
}}
<Box
sx={{
mx: 'auto',
backgroundColor: 'background.paper',
display: 'flex',
flexDirection: 'column',
}}
>
<CardContainer
title={t('securityForm.recentLogins')}
subtitle={t('securityForm.description')}
>
<Box>
<CardContainer
title={t('securityForm.recentLogins')}
subtitle={t('securityForm.description')}
>
<Box sx={{ width: '100%', maxWidth: '754px', px: 4 }}>
{data.map((d) => (
<Box
sx={{
display: 'flex',
// flexWrap: 'wrap',
alignItems: 'center',
gap: 1,
height: '50px',
}}
key={d.id}
<Box
sx={{
px: { xs: 2, sm: 3, md: 4 },
py: 2,
display: 'flex',
flexDirection: 'column',
gap: 2,
bgcolor: 'background.paper',
flex: 1,
}}
>
<Box sx={{ width: '100%', maxWidth: '754px', px: 4 }}>
{data.map((d) => (
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: 1,
height: '50px',
}}
key={d.id}
>
<Typography
variant="body2"
sx={{ width: { xs: '100%', sm: '172.5px' } }}
>
<Typography
variant="body2"
sx={{ width: { xs: '100%', sm: '172.5px' } }}
>
{d.time}
</Typography>
<Typography
variant="body2"
sx={{ width: { xs: '100%', sm: '172.5px' } }}
>
{d.device}
</Typography>
<Typography
variant="body2"
sx={{ width: { xs: '100%', sm: '172.5px' } }}
>
{d.ip}
</Typography>
<Box sx={{ width: { xs: '100%', sm: '172.5px' } }}>
{d.current ? (
<Button
variant="outlined"
sx={{
borderRadius: '15px',
border: '2px solid',
borderColor: 'success.main',
height: '30px',
whiteSpace: 'nowrap',
color: 'success.main',
width: '93px',
textTransform: 'none',
}}
>
{t('securityForm.currentDevice')}
</Button>
) : (
<Typography></Typography>
)}
</Box>
{d.time}
</Typography>
<Typography
variant="body2"
sx={{ width: { xs: '100%', sm: '172.5px' } }}
>
{d.device}
</Typography>
<Typography
variant="body2"
sx={{ width: { xs: '100%', sm: '172.5px' } }}
>
{d.ip}
</Typography>
<Box sx={{ width: { xs: '100%', sm: '172.5px' } }}>
{d.current && (
<Button
variant="outlined"
sx={{
borderRadius: '15px',
border: '2px solid',
borderColor: 'success.main',
height: '30px',
whiteSpace: 'nowrap',
color: 'success.main',
width: '93px',
textTransform: 'none',
}}
>
{t('securityForm.currentDevice')}
</Button>
)}
</Box>
))}
</Box>
</CardContainer>
</Box>
))}
</Box>
</Box>
</Box>
</CardContainer>
</Box>
);
}