48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
'use client';
|
|
import { type ReactNode } from "react";
|
|
|
|
interface ButtonProps {
|
|
children: ReactNode;
|
|
onClick?: () => void;
|
|
href?: string;
|
|
variant?: "primary" | "secondary";
|
|
className?: string;
|
|
isNavyBg?: boolean;
|
|
}
|
|
|
|
export const Button = ({
|
|
children,
|
|
onClick,
|
|
href,
|
|
variant = "primary",
|
|
className = "",
|
|
isNavyBg = false,
|
|
}: ButtonProps) => {
|
|
const base =
|
|
"inline-flex items-center gap-3 px-8 py-4 text-base font-bold transition hover:scale-[1.02] cursor-pointer";
|
|
|
|
const styles = {
|
|
primary:
|
|
"bg-brand-red text-white shadow-lg shadow-blue-500/20 hover:bg-[#2563eb]",
|
|
secondary: isNavyBg
|
|
? "border border-white/15 bg-white/5 text-white hover:bg-white/10"
|
|
: "border border-brand-navy/15 text-brand-navy hover:border-brand-blue hover:text-brand-blue",
|
|
};
|
|
|
|
const cls = `${base} ${styles[variant]} ${className}`;
|
|
|
|
if (href) {
|
|
return (
|
|
<a href={href} className={cls}>
|
|
{children}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button onClick={onClick} className={cls}>
|
|
{children}
|
|
</button>
|
|
);
|
|
};
|