38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
import Link from "next/link";
|
|
import { clsx } from "clsx";
|
|
import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
|
|
|
|
type Common = {
|
|
children: ReactNode;
|
|
variant?: "primary" | "secondary" | "ghost";
|
|
size?: "sm" | "md";
|
|
className?: string;
|
|
};
|
|
|
|
const variants = {
|
|
primary: "bg-forest text-white shadow-lift hover:bg-mint dark:bg-mint dark:text-ink",
|
|
secondary: "bg-white/85 text-ink ring-1 ring-forest/15 hover:bg-white dark:bg-white/10 dark:text-paper dark:ring-white/15",
|
|
ghost: "text-forest hover:bg-forest/8 dark:text-mint dark:hover:bg-white/10"
|
|
};
|
|
|
|
const sizes = {
|
|
sm: "h-9 px-3 text-sm",
|
|
md: "h-11 px-5 text-sm"
|
|
};
|
|
|
|
export function Button({ children, variant = "primary", size = "md", className, ...props }: Common & ButtonHTMLAttributes<HTMLButtonElement>) {
|
|
return (
|
|
<button className={clsx("inline-flex items-center justify-center gap-2 rounded-lg font-semibold transition", variants[variant], sizes[size], className)} {...props}>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export function ButtonLink({ children, variant = "primary", size = "md", className, href, ...props }: Common & AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) {
|
|
return (
|
|
<Link href={href} className={clsx("inline-flex items-center justify-center gap-2 rounded-lg font-semibold transition", variants[variant], sizes[size], className)} {...props}>
|
|
{children}
|
|
</Link>
|
|
);
|
|
}
|