127 lines
3.9 KiB
TypeScript
127 lines
3.9 KiB
TypeScript
import { Box, Typography, Button } from '@mui/material';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { CardContainer } from '@/components/CardContainer';
|
|
import { PageWrapper } from '../PageWrapper';
|
|
import React from 'react';
|
|
|
|
export function RecentLogins() {
|
|
const { t } = useTranslation('setting');
|
|
const data = [
|
|
{
|
|
id: 0,
|
|
time: 'دقایقی پیش',
|
|
device: 'asus i5 24i',
|
|
ip: '192.168.1.1',
|
|
current: true,
|
|
},
|
|
{
|
|
id: 1,
|
|
time: '۲۲:۱۳ - ۱۴۰۴/۰۹/۰۹',
|
|
device: 'samsung s23 ultra',
|
|
ip: '192.220.1.1',
|
|
current: false,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<PageWrapper>
|
|
<CardContainer
|
|
title={t('securityForm.recentLogins')}
|
|
subtitle={t('securityForm.description')}
|
|
>
|
|
<Box
|
|
sx={{
|
|
py: 2,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 2,
|
|
bgcolor: 'background.paper',
|
|
flex: 1,
|
|
borderBottom: '1px solid',
|
|
borderColor: 'divider',
|
|
'&:last-child': {
|
|
borderBottom: 'none',
|
|
},
|
|
}}
|
|
>
|
|
<Box sx={{ px: 4 }}>
|
|
{data.map((d) => (
|
|
<React.Fragment key={d.id}>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: { xs: 'column', sm: 'row' },
|
|
alignItems: { xs: 'flex-start', sm: 'center' },
|
|
minHeight: 50,
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="body2"
|
|
sx={{
|
|
flexBasis: { xs: '100%', sm: 'auto' },
|
|
mb: { xs: 1, sm: 0 },
|
|
minWidth: { sm: '172.5px' },
|
|
order: { xs: 1, sm: 1 },
|
|
}}
|
|
>
|
|
{d.time}
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
sx={{
|
|
flexBasis: { xs: '100%', sm: 'auto' },
|
|
mb: { xs: 1, sm: 0 },
|
|
minWidth: { sm: '172.5px' },
|
|
order: { xs: 1, sm: 1 },
|
|
}}
|
|
>
|
|
{d.device}
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
sx={{
|
|
flexBasis: { xs: '100%', sm: 'auto' },
|
|
mb: { xs: 1, sm: 0 },
|
|
minWidth: { sm: '172.5px' },
|
|
order: { xs: 1, sm: 1 },
|
|
}}
|
|
>
|
|
{d.ip}
|
|
</Typography>
|
|
<Box
|
|
sx={{
|
|
flexBasis: { xs: '100%', sm: 'auto' },
|
|
mb: { xs: 1, sm: 0 },
|
|
textAlign: { xs: 'left', sm: 'center' },
|
|
minWidth: { sm: '172.5px' },
|
|
order: { xs: 4, sm: 4 },
|
|
}}
|
|
>
|
|
{d.current && (
|
|
<Button
|
|
variant="outlined"
|
|
sx={{
|
|
borderRadius: 2,
|
|
border: '2px solid',
|
|
borderColor: 'success.main',
|
|
height: '30px',
|
|
whiteSpace: 'nowrap',
|
|
color: 'success.main',
|
|
textTransform: 'none',
|
|
}}
|
|
>
|
|
{t('securityForm.currentDevice')}
|
|
</Button>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
<Box sx={{ color: 'divider', borderBottom: '1px solid' }} />
|
|
</React.Fragment>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
</CardContainer>
|
|
</PageWrapper>
|
|
);
|
|
}
|