35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import { Link, LinkProps, LinkTypeMap, Typography, useTheme } from "@mui/material";
|
|
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
|
|
import { deepmerge } from "@mui/utils";
|
|
import { OverridableComponent } from "@mui/material/OverridableComponent";
|
|
|
|
|
|
export const PenaLink: OverridableComponent<LinkTypeMap<object, "a">> = (props: LinkProps) => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<Link
|
|
{...deepmerge({
|
|
sx: {
|
|
display: "flex",
|
|
gap: "3px",
|
|
textUnderlinePosition: "under",
|
|
color: theme.palette.purple.light,
|
|
textDecorationColor: theme.palette.purple.main,
|
|
textUnderlineOffset: "2px",
|
|
"&:hover": {
|
|
textDecorationColor: theme.palette.purple.light,
|
|
},
|
|
"&:active": {
|
|
color: "white",
|
|
textDecorationColor: "white",
|
|
},
|
|
}
|
|
}, props)}
|
|
>
|
|
<Typography variant="body2">{props.children}</Typography>
|
|
<ArrowForwardIcon sx={{ height: "20px", width: "20px" }} />
|
|
</Link>
|
|
);
|
|
};
|