60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import type { JSX, Component } from "solid-js";
|
|
|
|
interface ButtonProps {
|
|
variant?: "primary" | "secondary" | "ghost";
|
|
size?: "sm" | "md" | "lg";
|
|
disabled?: boolean;
|
|
fullWidth?: boolean;
|
|
children: JSX.Element;
|
|
onClick?: () => void;
|
|
class?: string;
|
|
type?: "button" | "submit";
|
|
}
|
|
|
|
const Button: Component<ButtonProps> = (props) => {
|
|
const variant = () => props.variant ?? "primary";
|
|
const size = () => props.size ?? "md";
|
|
|
|
const baseStyles =
|
|
"inline-flex items-center justify-center font-medium uppercase tracking-[0.05em] transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] cursor-pointer select-none";
|
|
|
|
const variantStyles = () => {
|
|
switch (variant()) {
|
|
case "primary":
|
|
return "bg-orange text-white border-none hover:bg-orange-hover hover:scale-[0.98] active:scale-[0.96]";
|
|
case "secondary":
|
|
return "bg-transparent border-2 border-white text-white hover:bg-white hover:text-black";
|
|
case "ghost":
|
|
return "bg-transparent border-none text-white/60 hover:text-white";
|
|
default:
|
|
return "";
|
|
}
|
|
};
|
|
|
|
const sizeStyles = () => {
|
|
switch (size()) {
|
|
case "sm":
|
|
return "h-8 px-4 text-[12px]";
|
|
case "md":
|
|
return "h-12 px-6 text-[14px]";
|
|
case "lg":
|
|
return "h-14 px-8 text-[16px]";
|
|
default:
|
|
return "";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<button
|
|
type={props.type ?? "button"}
|
|
class={`${baseStyles} ${variantStyles()} ${sizeStyles()} ${props.fullWidth ? "w-full" : ""} ${props.disabled ? "opacity-40 pointer-events-none" : ""} ${props.class ?? ""}`}
|
|
onClick={props.onClick}
|
|
disabled={props.disabled}
|
|
>
|
|
{props.children}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default Button;
|