50 lines
981 B
TypeScript
50 lines
981 B
TypeScript
import { JSX } from "preact";
|
|
import { IS_BROWSER } from "$fresh/runtime.ts";
|
|
|
|
const colors = {
|
|
licorice: {
|
|
bg: "bg-licorice",
|
|
border: "border-licorice-800",
|
|
text: "text-white",
|
|
},
|
|
sky: {
|
|
bg: "bg-sky",
|
|
border: "border-sky-800",
|
|
text: "text-white",
|
|
},
|
|
grape: {
|
|
bg: "bg-grape",
|
|
border: "border-grape-800",
|
|
text: "text-white",
|
|
},
|
|
fire: {
|
|
bg: "bg-grape",
|
|
border: "border-grape-800",
|
|
text: "text-white",
|
|
},
|
|
};
|
|
|
|
export function Button(
|
|
props: JSX.HTMLAttributes<HTMLButtonElement> & { color?: keyof typeof colors },
|
|
) {
|
|
const color = props.color || 'sky';
|
|
const classes = `
|
|
px-2
|
|
py-1
|
|
rounded-xl
|
|
border-2
|
|
${colors[color].bg}
|
|
${colors[color].border}
|
|
${colors[color].text}
|
|
hover:bg-smoke-500
|
|
transition-colors
|
|
${props.class || ""}`;
|
|
return (
|
|
<button
|
|
{...props}
|
|
disabled={(!IS_BROWSER && !props.href && props.type !== 'submit') || props.disabled}
|
|
class={classes}
|
|
/>
|
|
);
|
|
}
|