46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import Link from "next/link";
|
|
import { JSX } from "react";
|
|
|
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
href?: string;
|
|
variant?: "primary" | "secondary" | "ghost" | "outline-white" | "ghost-white";
|
|
className?: string;
|
|
}
|
|
|
|
export function Button({
|
|
children,
|
|
href,
|
|
variant = "primary",
|
|
className = "",
|
|
type = "button",
|
|
...props
|
|
}: ButtonProps) {
|
|
const base =
|
|
"inline-flex items-center justify-center px-6 py-3 text-sm font-medium transition-all duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none cursor-pointer";
|
|
|
|
const variants = {
|
|
primary: "bg-primary text-secondary hover:opacity-90 border border-transparent",
|
|
secondary: "bg-transparent border border-primary text-primary hover:bg-primary hover:text-secondary",
|
|
ghost: "text-primary hover:bg-neutral/50",
|
|
"outline-white": "border border-secondary text-secondary hover:bg-secondary hover:text-primary",
|
|
"ghost-white": "text-secondary hover:bg-secondary/10",
|
|
};
|
|
|
|
const selectedVariant = variants[variant] || variants.primary;
|
|
const combinedClasses = `${base} ${selectedVariant} ${className}`;
|
|
|
|
if (href) {
|
|
return (
|
|
<Link href={href} className={combinedClasses}>
|
|
{children}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button type={type} className={combinedClasses} {...props}>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|