40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import { IconButton, IconButtonProps, useTheme } from "@mui/material";
|
|
import { deepmerge } from "@mui/utils";
|
|
|
|
|
|
export function LogoutButton(props: IconButtonProps) {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<IconButton
|
|
{...deepmerge({
|
|
sx: {
|
|
height: 36,
|
|
width: 36,
|
|
p: 0,
|
|
borderRadius: "6px",
|
|
backgroundColor: theme.palette.background.default,
|
|
color: theme.palette.gray.main,
|
|
"&:hover": {
|
|
color: theme.palette.background.default,
|
|
backgroundColor: theme.palette.gray.main,
|
|
},
|
|
"&:active": {
|
|
backgroundColor: theme.palette.purple.main,
|
|
color: "white",
|
|
},
|
|
}
|
|
}, props)}
|
|
>
|
|
<svg width="100%" height="100%" viewBox="0 0 36 37" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M22.559 22.052v2.95a2 2 0 0 1-2 2h-6.865a2 2 0 0 1-2-2v-12.5a2 2 0 0 1 2-2h6.865a2 2 0 0 1 2 2v2.95M25.067 21.227l1.786-1.763a1 1 0 0 0 0-1.423l-1.786-1.764M26.737 18.752H16.71"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
</IconButton>
|
|
);
|
|
}
|