UIKit/lib/components/PenaLink.tsx

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