27 lines
1.1 KiB
TypeScript
27 lines
1.1 KiB
TypeScript
import Link from 'next/link';
|
|
|
|
type Props = ({ href: string } | { onClick?: () => void }) & {
|
|
children: React.ReactNode;
|
|
variant?: 'primary' | 'secondary' | 'danger' | 'success';
|
|
};
|
|
|
|
const base = 'inline-flex items-center justify-center rounded px-4 py-2 font-semibold focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2';
|
|
|
|
export default function Button(props: Props) {
|
|
const variantClass = {
|
|
primary: 'bg-brand-orange text-white hover:opacity-90',
|
|
secondary: 'bg-white text-slate-900 border',
|
|
danger: 'bg-brand-red text-white',
|
|
success: 'bg-brand-green text-white'
|
|
}[props.variant ?? 'primary'];
|
|
|
|
const className = `${base} ${variantClass}`;
|
|
if ('href' in props) {
|
|
const href = (props as any).href;
|
|
if (href.startsWith('http') || href.startsWith('tel:') || href.startsWith('mailto:')) {
|
|
return <a href={href} className={className}>{props.children}</a>;
|
|
}
|
|
return <Link href={href} className={className}>{props.children}</Link>;
|
|
}
|
|
return <button className={className} onClick={(props as any).onClick}>{props.children}</button>;
|
|
} |