Updated AvatarList component style

This commit is contained in:
Ruidy Nemausat 2020-04-17 08:24:36 +02:00
parent 058d70cb44
commit 382dc145c8

View file

@ -3,16 +3,27 @@ import { Link } from "react-router-dom";
import Avatar from "@material-ui/core/Avatar"; import Avatar from "@material-ui/core/Avatar";
import AvatarGroup from "@material-ui/lab/AvatarGroup"; import AvatarGroup from "@material-ui/lab/AvatarGroup";
import { User } from "../types/User"; import { User } from "../types/User";
import { makeStyles, Theme, createStyles } from "@material-ui/core";
interface AvatarListProps { interface AvatarListProps {
users: User[]; users: User[];
} }
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
marginLeft: theme.spacing(2),
marginRight: theme.spacing(2),
},
})
);
export const AvatarList: FC<AvatarListProps> = ({ users }) => { export const AvatarList: FC<AvatarListProps> = ({ users }) => {
const classes = useStyles();
return users === undefined ? ( return users === undefined ? (
<></> <></>
) : ( ) : (
<> <div className={classes.root}>
<AvatarGroup max={5}> <AvatarGroup max={5}>
{users.map((user: User, i: number) => ( {users.map((user: User, i: number) => (
<Link to={`/users/${user.id}`} key={i}> <Link to={`/users/${user.id}`} key={i}>
@ -20,6 +31,6 @@ export const AvatarList: FC<AvatarListProps> = ({ users }) => {
</Link> </Link>
))} ))}
</AvatarGroup> </AvatarGroup>
</> </div>
); );
}; };