e26a154518
Connects to backend and gets all registered users by role. Enabled editors to see all registered users which wasn't possible.
53 lines
1.1 KiB
TypeScript
53 lines
1.1 KiB
TypeScript
import {
|
|
Avatar,
|
|
Card,
|
|
CardActionArea,
|
|
CardHeader,
|
|
Paper,
|
|
Typography,
|
|
} from "@material-ui/core";
|
|
import React from "react";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
|
|
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),
|
|
},
|
|
}));
|
|
|
|
interface PersonCardProps {
|
|
firstName: string;
|
|
lastName: string;
|
|
}
|
|
|
|
export default function PersonCard(props: PersonCardProps): React.ReactElement {
|
|
const classes = useStyles();
|
|
|
|
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>
|
|
</Paper>
|
|
);
|
|
}
|