summaryrefslogtreecommitdiff
path: root/client/src/components/Desktop.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/components/Desktop.tsx')
-rw-r--r--client/src/components/Desktop.tsx29
1 files changed, 29 insertions, 0 deletions
diff --git a/client/src/components/Desktop.tsx b/client/src/components/Desktop.tsx
new file mode 100644
index 0000000..13de4ee
--- /dev/null
+++ b/client/src/components/Desktop.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { useContext } from 'react';
+import { Link } from 'react-router-dom';
+import { Button, IconButton } from '@mui/material';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import { useTheme } from '@mui/material/styles';
+import { ThemeContext } from '../ThemeContextProvider';
+import pages from '../pages';
+
+function Desktop() {
+ const theme = useTheme();
+ const { toggleColorMode } = useContext(ThemeContext);
+
+ return (
+ <div style={{ marginLeft: 'auto' }}>
+ {pages.map((page) => (
+ <Button color="inherit" component={Link} to={page?.to} key={page?.name}>
+ {page?.name}
+ </Button>
+ ))}
+ <IconButton color="inherit" onClick={toggleColorMode}>
+ {theme.palette.mode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
+ </IconButton>
+ </div>
+ );
+}
+
+export default Desktop;