feat: add setting and Active devices

src/components/CardContainer.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+
+export function CardContainer({
+  title,
+  subtitle,
+  action,
+  children,
+  highlighted,
+}: {
+  title: string;
+  subtitle: string;
+  action?: React.ReactNode;
+  children?: React.ReactNode;
+  highlighted?: boolean;
+}) {
+  return (
+    <Box sx={{ width: '100%', bgcolor: 'background.paper' }}>
+      <Box
+        sx={{
+          marginInline: 'auto',
+          width: '100%',
+          maxWidth: 'min(100%, 818px)',
+          paddingInline: { xs: 2, sm: 3, md: 4 },
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: { xs: 'flex-start', sm: 'center' },
+            flexDirection: { xs: 'column', sm: 'row' },
+            bgcolor: highlighted ? 'primary.light' : 'background.default',
+            p: 2,
+            borderRadius: 1,
+            gap: { xs: 1, sm: 0 },
+          }}
+        >
+          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+            <Typography
+              variant="h6"
+              color={highlighted ? 'primary.main' : 'text.primary'}
+            >
+              {title}
+            </Typography>
+            <Typography
+              color={highlighted ? 'primary.main' : 'text.secondary'}
+              variant="body2"
+            >
+              {subtitle}
+            </Typography>
+          </Box>
+          {action}
+        </Box>
+
+        {children}
+      </Box>
+    </Box>
+  );
+}

src/components/Logo.tsx

@@ -0,0 +1,7 @@
+import LogoSvg from '@/assets/logo.svg';
+
+function Logo() {
+  return <img src={LogoSvg} style={{ width: '150px', height: 'auto' }} />;
+}
+
+export default Logo;

src/components/ThemToggle.tsx

@@ -0,0 +1,68 @@
+import { ToggleButtonGroup, ToggleButton, Box } from '@mui/material';
+import { useColorScheme } from '@mui/material/styles';
+import { Sun1, Moon } from 'iconsax-react';
+import { useTranslation } from 'react-i18next';
+
+export const ThemeToggleButton = () => {
+  const { mode, setMode } = useColorScheme();
+  const { t } = useTranslation('setting');
+
+  const handleChange = (_: any, newMode: 'light' | 'dark' | null) => {
+    if (newMode !== null) {
+      setMode(newMode);
+      localStorage.setItem('theme', newMode);
+    }
+  };
+
+  return (
+    <Box dir="rtl">
+      <ToggleButtonGroup
+        value={mode}
+        exclusive
+        onChange={handleChange}
+        sx={{
+          borderRadius: '12px',
+          border: '1px solid',
+          borderColor: 'divider',
+          overflow: 'hidden',
+        }}
+      >
+        <ToggleButton
+          value="light"
+          sx={{
+            textTransform: 'none',
+            display: 'flex',
+            gap: 1,
+            px: 2,
+            py: 1,
+            '&.Mui-selected': {
+              bgcolor: 'primary.light',
+              color: 'primary.main',
+            },
+          }}
+        >
+          <Sun1 size={18} color="#2979FF" variant="Bold" />
+          {t('settings.light')}
+        </ToggleButton>
+
+        <ToggleButton
+          value="dark"
+          sx={{
+            textTransform: 'none',
+            display: 'flex',
+            gap: 1,
+            px: 2,
+            py: 1,
+            '&.Mui-selected': {
+              bgcolor: 'primary.light',
+              color: 'primary.main',
+            },
+          }}
+        >
+          <Moon size={18} color="#82B1FF" />
+          {t('settings.dark')}
+        </ToggleButton>
+      </ToggleButtonGroup>
+    </Box>
+  );
+};