feat: add setting and Active devices

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>
+  );
+};