46 lines
No EOL
1.4 KiB
TypeScript
46 lines
No EOL
1.4 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 SolidLinkButton: FC<Props> = ({ children, className, href, icon, size = "medium", variant }) => {
|
|
const style = classNames(
|
|
"py-2 px-4 text-xl p-2 rounded hover:bg-secondary mb-0 text-center flex",
|
|
{
|
|
'background-red text-white': variant === "primary",
|
|
'background-secondary border-2 border-secondary': variant === "secondary",
|
|
},
|
|
className
|
|
)
|
|
|
|
const iconClassNames = classNames("mt-1", {
|
|
"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={style} to={href}>
|
|
<div className="flex-grow"></div>
|
|
{iconElement}
|
|
{children}
|
|
<div className="flex-grow"></div>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
export default SolidLinkButton |