49 lines
No EOL
1.5 KiB
TypeScript
49 lines
No EOL
1.5 KiB
TypeScript
import React, { type FC, type ReactElement } from "react";
|
|
import classNames from "classnames";
|
|
import { Link } from "react-router"
|
|
|
|
interface Props {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
href: string;
|
|
icon?: React.ReactNode;
|
|
size?: "small" | "medium" | "large";
|
|
variant?: "primary" | "secondary";
|
|
}
|
|
|
|
const OutlineLinkButton: FC<Props> = ({ children, className, href, icon, size = "medium", variant }) => {
|
|
const linkClassNames = classNames(
|
|
"underline font-default pt-3 pb-3 px-4 rounded mb-0 flex",
|
|
{
|
|
'text-primary border-primary': variant === "primary",
|
|
'text-secondary border-secondary': variant === "secondary",
|
|
'text-accent-blue border-accent': !variant || !["primary", "secondary"].includes(variant),
|
|
}, {
|
|
'text-size-14': size === "small",
|
|
'font-size-18': !size || size === "medium",
|
|
'text-2xl': size === "large",
|
|
},
|
|
className,
|
|
)
|
|
|
|
const iconClassNames = classNames("mt-0.5", {
|
|
"h-4 w-4 mr-1": size === "small",
|
|
"h-5 w-5 mr-1": size === "medium", // Default size
|
|
"h-7 w-7 mr-2": size === "large",
|
|
});
|
|
|
|
const iconElement =
|
|
React.isValidElement(icon) &&
|
|
React.cloneElement(icon as ReactElement<{ className?: string }>, {
|
|
className: iconClassNames,
|
|
});
|
|
|
|
return (
|
|
<Link className={linkClassNames} to={href}>
|
|
{iconElement}
|
|
{children}
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
export default OutlineLinkButton |