30 lines
983 B
TypeScript
30 lines
983 B
TypeScript
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-red-500/20 hover:bg-[#b60014]',
|
|
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>;
|
|
};
|