44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import { type Component, type JSX, splitProps } from "solid-js";
|
|
import { cva, type VariantProps } from "class-variance-authority";
|
|
|
|
const buttonVariants = cva(
|
|
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
primary: "bg-indigo-600 text-white hover:bg-indigo-700",
|
|
secondary: "bg-white text-gray-700 border border-gray-300 hover:bg-gray-50",
|
|
danger: "bg-red-600 text-white hover:bg-red-700",
|
|
success: "bg-green-600 text-white hover:bg-green-700",
|
|
ghost: "text-indigo-600 hover:text-indigo-900",
|
|
link: "text-red-600 hover:text-red-900",
|
|
},
|
|
size: {
|
|
sm: "px-3 py-1",
|
|
md: "px-4 py-2",
|
|
lg: "w-full px-4 py-2",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "primary",
|
|
size: "md",
|
|
},
|
|
},
|
|
);
|
|
|
|
export interface ButtonProps
|
|
extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
VariantProps<typeof buttonVariants> {}
|
|
|
|
const Button: Component<ButtonProps> = (props) => {
|
|
const [local, others] = splitProps(props, ["variant", "size", "class"]);
|
|
return (
|
|
<button
|
|
class={buttonVariants({ variant: local.variant, size: local.size, class: local.class })}
|
|
{...others}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export { Button, buttonVariants };
|