54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import { Avatar, Paper, Typography } from "@material-ui/core";
|
|
import EditIcon from "@material-ui/icons/Edit";
|
|
import React from "react";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import ChangeRole from "./ChangeRole";
|
|
import { UppercaseUserRole } from "../jwt/jwt";
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
width: "100%",
|
|
marginBottom: theme.spacing(1),
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
},
|
|
avatar: {
|
|
margin: theme.spacing(1),
|
|
},
|
|
title: {
|
|
marginLeft: theme.spacing(1),
|
|
width: "100%",
|
|
},
|
|
editButton: {
|
|
margin: theme.spacing(1),
|
|
},
|
|
}));
|
|
|
|
interface PersonCardProps {
|
|
firstName: string;
|
|
lastName: string;
|
|
userRole: UppercaseUserRole;
|
|
}
|
|
|
|
export default function PersonCard(props: PersonCardProps): React.ReactElement {
|
|
const classes = useStyles();
|
|
const userRole = props.userRole;
|
|
const getInitials = (): string => {
|
|
const initials =
|
|
(props.firstName.charAt(0) || "") + (props.lastName.charAt(0) || "");
|
|
return initials ? initials.toUpperCase() : "?";
|
|
};
|
|
|
|
const fullName = `${props.firstName} ${props.lastName}`.trim();
|
|
return (
|
|
<Paper className={classes.root}>
|
|
<Avatar className={classes.avatar} aria-label={fullName}>
|
|
{getInitials()}
|
|
</Avatar>
|
|
<Typography className={classes.title}>{fullName}</Typography>
|
|
<ChangeRole currentRole={userRole} />
|
|
</Paper>
|
|
);
|
|
}
|