41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import type { ButtonHTMLAttributes } from "react";
|
|
import type { LucideIcon } from "lucide-react";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
variant?: "primary" | "ghost";
|
|
Icon?: LucideIcon;
|
|
};
|
|
|
|
const baseClass =
|
|
"h-[30px] px-3 rounded-[5px] inline-flex items-center justify-center gap-2 " +
|
|
"text-[13px] font-medium cursor-pointer transition-colors whitespace-nowrap";
|
|
|
|
const variantClass = {
|
|
primary: "bg-primary text-white font-semibold hover:opacity-90",
|
|
ghost:
|
|
"text-foreground-light/70 dark:text-foreground-dark/70 " +
|
|
"hover:text-foreground-light dark:hover:text-foreground-dark " +
|
|
"border border-slate-200 dark:border-white/10 " +
|
|
"hover:border-secondary/60 dark:hover:border-secondary/60",
|
|
};
|
|
|
|
export default function AdminButton({
|
|
variant = "ghost",
|
|
Icon,
|
|
className,
|
|
children,
|
|
...props
|
|
}: Props) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
{...props}
|
|
className={twMerge(baseClass, variantClass[variant], className)}
|
|
>
|
|
{Icon ? <Icon size={13} strokeWidth={2.25} /> : null}
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|