front-hub/src/components/UnderlinedLink.tsx

import { Link, SxProps, Theme, Typography } from "@mui/material";


interface Props {
    text: string;
    linkHref: string;
    isHighlighted?: boolean;
    sx?: SxProps<Theme>;
    endIcon?: React.ReactNode;
}

export default function UnderlinedLink({ text, linkHref, isHighlighted = false, sx, endIcon }: Props) {

    return (
        <Link
            href={linkHref}
            color={isHighlighted ? "text.primary" : "text.secondary"}
            underline="none"
            sx={{
                display: "flex",
                gap: "3px",
                borderBottom: isHighlighted ? "1px solid #ffffff" : "1px solid #7E2AEA",
                pb: "3px",
                ...sx,
            }}
        >
            <Typography variant="body2">{text}</Typography>
            {endIcon}
        </Link>
    );
}