Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | 167x 4495x 4495x 4495x | import { Link, LinkProps } from "@mui/material";
import { Link as RouterLink } from "react-router-dom";
import { Icon } from "@phosphor-icons/react";
import { DEFAULT_ICON_SIZE } from "../constants";
interface RebrandedLinkProps extends LinkProps {
link?: string;
replace?: boolean;
Icon?: Icon;
iconPosition?: "left" | "right";
disabled?: boolean;
iconSize?: string;
openInNewTab?: boolean;
state?: any;
}
const GiveLink = ({
children,
link = "",
replace,
disabled = false,
Icon,
iconPosition = "left",
component = RouterLink,
color,
onClick,
iconSize,
openInNewTab = false,
...rest
}: RebrandedLinkProps) => {
//MUI does not handle colors as we handle them in our theme,
//passing down `destructive` direclty causes an error.To overcome this,
//we can use a color variant, like `error` under the hood, while still using`destructive` as a styling value
//when we use this component, to follow our figma design system.
const isIconLeft = iconPosition === "left" && Icon;
const isIconRight = iconPosition === "right" && Icon;
return (
<Link
component={disabled ? "p" : component}
to={link}
replace={replace}
disabled={disabled}
version="two"
color={color === "destructive" ? "error" : color}
onClick={disabled ? undefined : onClick}
target={openInNewTab ? "_blank" : undefined}
rel={openInNewTab ? "noopener noreferrer" : undefined}
{...(component === "button" ? { type: "button" } : {})}
{...rest}
>
{isIconLeft && <Icon size={iconSize ?? DEFAULT_ICON_SIZE} />}
<span style={{ fontFamily: "Give Whyte,sans-serif" }}>{children}</span>
{isIconRight && <Icon size={iconSize ?? DEFAULT_ICON_SIZE} />}
</Link>
);
};
export default GiveLink;
|