front-hub/src/components/UnderlinedLink.tsx
2022-11-19 15:39:57 +03:00

31 lines
822 B
TypeScript

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