Program Commit

2025-10-02 17:31:49 -04:00
parent fd73be0efd
commit 1341b325ee
39 changed files with 21396 additions and 0 deletions
--- a/frontend/src/components/UserSettings.js
+++ b/frontend/src/components/UserSettings.js
@@ -0,0 +1,92 @@
+import React, { useState, useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Avatar, Menu, MenuItem, Button, Typography } from '@mui/material';
+import { UserContext } from '../contexts/UserContext';
+import { ThemeContext } from '../contexts/ThemeContext';
+
+const UserSettings = () => {
+  const { user, setUser } = useContext(UserContext);
+  const { themeName, changeTheme } = useContext(ThemeContext);
+  const navigate = useNavigate();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [themeMenuAnchorEl, setThemeMenuAnchorEl] = useState(null);
+
+  const handleMenu = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleThemeMenu = (event) => {
+    setThemeMenuAnchorEl(event.currentTarget);
+  };
+
+  const handleThemeMenuClose = () => {
+    setThemeMenuAnchorEl(null);
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem('user');
+    localStorage.removeItem('guilds');
+    setUser(null);
+    navigate('/');
+  };
+
+  const handleThemeChange = (name) => {
+    changeTheme(name);
+    handleThemeMenuClose();
+  };
+
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <div>
+      <Button onClick={handleMenu}>
+        <Avatar sx={{ width: 48, height: 48 }} src={`https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png`} />
+      </Button>
+      <Menu
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        keepMounted
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        <MenuItem disabled>
+          <Typography>{user.username}</Typography>
+        </MenuItem>
+        <MenuItem onClick={handleThemeMenu}>Themes</MenuItem>
+        <MenuItem onClick={handleLogout}>Logout</MenuItem>
+      </Menu>
+      <Menu
+        anchorEl={themeMenuAnchorEl}
+        open={Boolean(themeMenuAnchorEl)}
+        onClose={handleThemeMenuClose}
+        anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left',
+        }}
+        transformOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+        }}
+      >
+        <MenuItem onClick={() => handleThemeChange('light')} disabled={themeName === 'light'}>Light</MenuItem>
+        <MenuItem onClick={() => handleThemeChange('dark')} disabled={themeName === 'dark'}>Dark</MenuItem>
+        <MenuItem onClick={() => handleThemeChange('discord')} disabled={themeName === 'discord'}>Discord</MenuItem>
+      </Menu>
+    </div>
+  );
+};
+
+export default UserSettings;