feat: add sidebar

2025-08-02 12:41:25 +03:30
parent 064b3f66dc
commit 482d672955
11 changed files with 435 additions and 72 deletions
--- a/src/features/profile/components/security/RecentLogins.tsx
+++ b/src/features/profile/components/security/RecentLogins.tsx
@@ -0,0 +1,99 @@
+import { Box, Typography, Button } from '@mui/material';
+import { CardContainer } from '@/components/CardContainer';
+import { useTranslation } from 'react-i18next';
+
+export function RecentLogins() {
+  const { t } = useTranslation('security');
+  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 (
+    <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>
+          <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}
+                >
+                  <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>
+                </Box>
+              ))}
+            </Box>
+          </CardContainer>
+        </Box>
+      </Box>
+    </Box>
+  );
+}