added state containers, user model, and the button for user menu

2024-10-31 20:30:11 -06:00 · 2024-10-31 20:30:11 -06:00 · f602a22b1b
commit f602a22b1b
parent 4fd156f663
7 changed files with 341 additions and 17 deletions
--- a/src/user/UserMenu.tsx
+++ b/src/user/UserMenu.tsx
@ -0,0 +1,104 @@
+import { Avatar, Button, PaletteColor, Theme, Typography, useTheme } from "@mui/material";
+import { useGlobalState } from "../providers/StateContainer";
+import { getSecondaryColour, getSignatureAccentColour } from "../services/whiteLabel";
+import { makeStyles } from "@mui/styles";
+import { Person } from "@mui/icons-material";
+import { useEffect } from "react";
+
+const useStyles = makeStyles((theme: Theme) => ({
+  userAvatar: {
+    color: "#fff",
+    backgroundColor: getSecondaryColour()["700" as keyof PaletteColor],
+    [theme.breakpoints.down("xs")]: {
+      width: "32px",
+      height: "32px"
+    }
+  },
+  profileButton: {
+    maxWidth: "50vw"
+  },
+  profileName: {
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    textTransform: "capitalize",
+    color: getSignatureAccentColour(),
+    marginBottom: -3,
+    marginTop: -3
+  },
+  red: {
+    color: "var(--status-alert)"
+  }
+}));
+
+interface Props {
+  toggleTheme: () => void;
+}
+  
+export default function UserMenu(props: Props) {
+
+    const { toggleTheme } = props;
+    const [{ user }] = useGlobalState();
+    const classes = useStyles();
+    const theme = useTheme();
+
+    const name = user.name();
+    const picture = user.settings.avatar;
+    const hasAdmin = user.hasFeature ? user.hasFeature("admin") : false;
+    const allowedToCopyToken = user.allowedTo("copy-token");
+    const hasTeams = user.hasFeature ? user.hasFeature("teams") : false;
+    // const hasBilling = user.settings.useTeam
+    //   ? userTeamPermissions.includes(pond.Permission.PERMISSION_BILLING)
+    //   : true;
+
+    useEffect(() => {
+      console.log(user)
+    }, [user])
+
+    return (
+      <Button
+          id="tour-user-menu"
+          // aria-owns={userMenuIsOpen ? "userMenu" : undefined}
+          aria-haspopup="true"
+          // onClick={openUserMenu}
+          className={classes.profileButton}>
+          <div style={{ display: "flex", flexDirection: "column" }}>
+            <Typography className={classes.profileName} variant="button">
+              {name}
+            </Typography>
+            {/* {team.settings.name && hasTeams && (
+              <Typography className={classes.profileName} variant="button">
+                ({team.settings.name})
+              </Typography>
+            )} */}
+          </div>
+          <div style={{ marginLeft: theme.spacing(1) }}>
+            {/* {picture && hasTeams ? (
+              <div>
+                <UserAvatar
+                  user={user}
+                  className={classes.userAvatar2}
+                  style={{ zIndex: as === "" ? 1000 : 0 }}
+                />
+                <div style={{ position: "relative" }}>
+                  <Avatar
+                    src={team.settings.avatar}
+                    className={classes.teamAvatar}
+                    style={{ background: purple[500] }}>
+                    <TeamIcon style={{ fontSize: 38 }} />
+                  </Avatar>
+                </div>
+              </div>
+            ) : picture ? (
+              <Avatar alt={name} src={picture} className={classes.userAvatar}>
+                {!picture && name}
+              </Avatar>
+            ) : ( */}
+              <Avatar alt={name} src={picture} className={classes.userAvatar}>
+                {/* <Person /> */}
+              </Avatar>
+            {/* )} */}
+          </div>
+        </Button>
+    )
+}