45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
|
import { Button, ButtonProps, SxProps, Theme, useMediaQuery, useTheme } from "@mui/material";
|
||
|
|
import { MouseEventHandler, ReactNode } from "react";
|
||
|
|
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
icon?: ReactNode;
|
||
|
|
ButtonProps?: ButtonProps;
|
||
|
|
children?: ReactNode;
|
||
|
|
sx?: SxProps<Theme>;
|
||
|
|
onClick?: MouseEventHandler<HTMLButtonElement>;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function UnderlinedButtonWithIcon({ ButtonProps, icon, children, sx, onClick }: Props) {
|
||
|
|
const theme = useTheme();
|
||
|
|
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Button
|
||
|
|
variant="text"
|
||
|
|
startIcon={icon}
|
||
|
|
disableTouchRipple
|
||
|
|
sx={{
|
||
|
|
p: 0,
|
||
|
|
fontWeight: 400,
|
||
|
|
fontSize: upMd ? "18px" : "16px",
|
||
|
|
lineHeight: "21px",
|
||
|
|
textDecorationLine: "underline",
|
||
|
|
color: "#7E2AEA",
|
||
|
|
textAlign: "start",
|
||
|
|
textUnderlineOffset: "2px",
|
||
|
|
"& .MuiButton-startIcon": {
|
||
|
|
alignSelf: "start",
|
||
|
|
},
|
||
|
|
"&:hover": {
|
||
|
|
backgroundColor: "rgb(0 0 0 / 0)",
|
||
|
|
},
|
||
|
|
...sx,
|
||
|
|
}}
|
||
|
|
onClick={onClick}
|
||
|
|
{...ButtonProps}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</Button>
|
||
|
|
);
|
||
|
|
}
|