UIKit/lib/components/PenaLink.tsx
2023-08-21 14:10:34 +03:00

30 lines
951 B
TypeScript

import { Link, LinkProps, Typography, useTheme } from "@mui/material";
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import { deepmerge } from "@mui/utils";
export function PenaLink(props: LinkProps) {
const theme = useTheme();
return (
<Link
{...deepmerge({
sx: {
display: "flex",
gap: "3px",
textUnderlinePosition: "under",
color: theme.palette.brightPurple.main,
textDecorationColor: theme.palette.brightPurple.main,
textUnderlineOffset: "3px",
"&:active": {
color: "#FFFFFF",
},
}
}, props)}
>
<Typography variant="body2">{props.children}</Typography>
<ArrowForwardIcon sx={{ height: "20px", width: "20px" }} />
</Link>
);
}