UIKit/lib/components/AvatarButton.tsx

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>
    );
}