client/src/components/Desktop.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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;