46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import Link from "next/link";
|
|
|
|
interface ButtonProps {
|
|
children: React.ReactNode;
|
|
href?: string;
|
|
variant?: "primary" | "secondary" | "ghost";
|
|
className?: string;
|
|
type?: "button" | "submit" | "reset";
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export function Button({
|
|
children,
|
|
href,
|
|
variant = "primary",
|
|
className = "",
|
|
type = "button",
|
|
onClick,
|
|
}: 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";
|
|
|
|
const variants = {
|
|
primary: "bg-primary text-secondary hover:opacity-80",
|
|
secondary:
|
|
"border border-primary text-primary hover:bg-primary hover:text-secondary",
|
|
ghost: "text-primary underline-offset-4 hover:underline",
|
|
};
|
|
|
|
const classes = `${base} ${variants[variant]} ${className}`;
|
|
|
|
if (href) {
|
|
return (
|
|
<Link href={href} className={classes}>
|
|
{children}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button type={type} className={classes} onClick={onClick}>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|