66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import {
|
|
AnchorHTMLAttributes,
|
|
ButtonHTMLAttributes,
|
|
DetailedHTMLProps,
|
|
HTMLAttributeAnchorTarget,
|
|
HTMLAttributes,
|
|
} from "react";
|
|
import { ClassNameValue, twMerge } from "tailwind-merge";
|
|
|
|
export default function Button({
|
|
href,
|
|
target,
|
|
variant,
|
|
color,
|
|
linkProps,
|
|
...props
|
|
}: DetailedHTMLProps<
|
|
ButtonHTMLAttributes<HTMLButtonElement>,
|
|
HTMLButtonElement
|
|
> & {
|
|
variant?: "normal" | "ghost" | "outlined";
|
|
color?: "primary" | "secondary" | "accent";
|
|
href?: string;
|
|
target?: HTMLAttributeAnchorTarget;
|
|
linkProps?: DetailedHTMLProps<
|
|
AnchorHTMLAttributes<HTMLAnchorElement>,
|
|
HTMLAnchorElement
|
|
>;
|
|
}) {
|
|
const finalClassName: string = (() => {
|
|
if (variant == "normal" || !variant) {
|
|
if (color == "primary" || !color) return "bg-blue-500 text-white";
|
|
} else if (variant == "outlined") {
|
|
if (color == "primary" || !color)
|
|
return (
|
|
"bg-transparent outline outline-1 outline-blue-500" +
|
|
" text-blue-500"
|
|
);
|
|
} else if (variant == "ghost") {
|
|
}
|
|
|
|
return "";
|
|
})();
|
|
|
|
const buttonComponent = (
|
|
<button
|
|
{...props}
|
|
className={twMerge(
|
|
"bg-blue-600 text-white text-base font-medium px-4 py-2 rounded",
|
|
finalClassName,
|
|
props.className
|
|
)}
|
|
>
|
|
{props.children}
|
|
</button>
|
|
);
|
|
|
|
if (href)
|
|
return (
|
|
<a {...linkProps} href={href} target={target}>
|
|
{buttonComponent}
|
|
</a>
|
|
);
|
|
return buttonComponent;
|
|
}
|