mirror of
https://github.com/rjNemo/ticket_manager
synced 2026-06-12 11:46:40 +00:00
Updated AvatarList component style
This commit is contained in:
parent
058d70cb44
commit
382dc145c8
1 changed files with 13 additions and 2 deletions
|
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue