60 lines
2.5 KiB
TypeScript
60 lines
2.5 KiB
TypeScript
import { Avatar, IconButton, IconButtonProps, Typography, useTheme } from "@mui/material";
|
|
import { deepmerge } from "@mui/utils";
|
|
import { ForwardRefExoticComponent, RefAttributes } from "react";
|
|
import { LinkProps } from "react-router-dom";
|
|
|
|
|
|
type Props = IconButtonProps & {
|
|
component?: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
|
|
to?: string;
|
|
};
|
|
|
|
export function AvatarButton(props: Props) {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<IconButton
|
|
{...deepmerge({
|
|
sx: {
|
|
height: 36,
|
|
width: 36,
|
|
p: 0,
|
|
"&:hover .MuiAvatar-root": {
|
|
border: `2px solid ${theme.palette.gray.main}`,
|
|
},
|
|
"&:active .MuiAvatar-root": {
|
|
backgroundColor: theme.palette.purple.main,
|
|
color: theme.palette.purple.main,
|
|
border: "1px solid black",
|
|
},
|
|
}
|
|
}, props)}
|
|
>
|
|
<Avatar sx={{
|
|
height: "100%",
|
|
width: "100%",
|
|
backgroundColor: theme.palette.orange.main,
|
|
color: theme.palette.orange.light,
|
|
transition: "all 100ms",
|
|
}}>
|
|
<Typography sx={{
|
|
fontWeight: 500,
|
|
fontSize: "14px",
|
|
lineHeight: "20px",
|
|
zIndex: 1,
|
|
textTransform: "uppercase",
|
|
position: "absolute",
|
|
color: "white",
|
|
}}>
|
|
{props.children ?? "AA"}
|
|
</Typography>
|
|
<svg width="100%" height="100%" viewBox="0 0 36 37" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path fillRule="evenodd" clipRule="evenodd" d="M15.348 16.146c.1-5.981 6.823-10.034 12.62-11.479 6.055-1.508 13.264-.719 17.31 4.023 3.673 4.303.83 10.565-.085 16.16-.678 4.152-1.209 8.41-4.383 11.171-3.418 2.973-8.742 6.062-12.43 3.452-3.663-2.593 1.412-8.88-.78-12.8-2.764-4.95-12.347-4.85-12.252-10.527Z" fill="currentColor" />
|
|
<circle cx="28.052" cy="-3.333" r="5.519" transform="rotate(-32.339 28.052 -3.333)" fill="currentColor" />
|
|
<circle cx="24.363" cy="29.03" r="1.27" transform="rotate(-32.339 24.363 29.03)" fill="currentColor" />
|
|
</svg>
|
|
</Avatar>
|
|
</IconButton>
|
|
);
|
|
}
|