43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import type { ButtonHTMLAttributes } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type ButtonVariant = "primary" | "outline" | "ghost";
|
|
type ButtonSize = "sm" | "icon-sm";
|
|
|
|
const variantClassNames: Record<ButtonVariant, string> = {
|
|
primary: "border-[#7dc8cf]/35 bg-[#7dc8cf]/18 text-[#dff8fa] hover:bg-[#7dc8cf]/26",
|
|
outline: "border-[#39434b] text-[#c9cccf] hover:bg-[#22272c] hover:text-[#f2f4f4]",
|
|
ghost: "border-transparent text-[#c9cccf] hover:border-[#39434b] hover:bg-[#22272c] hover:text-[#f2f4f4]",
|
|
};
|
|
|
|
const sizeClassNames: Record<ButtonSize, string> = {
|
|
sm: "h-8 px-3 text-xs",
|
|
"icon-sm": "size-6 p-0 text-sm",
|
|
};
|
|
|
|
export function Button({
|
|
className,
|
|
variant = "outline",
|
|
size = "sm",
|
|
type = "button",
|
|
...props
|
|
}: ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
variant?: ButtonVariant;
|
|
size?: ButtonSize;
|
|
}) {
|
|
return (
|
|
<button
|
|
type={type}
|
|
className={cn(
|
|
"inline-flex items-center justify-center rounded-md border font-medium outline-none transition focus-visible:ring-2 focus-visible:ring-[#7dc8cf]/45 disabled:pointer-events-none disabled:opacity-50",
|
|
variantClassNames[variant],
|
|
sizeClassNames[size],
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|