45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import { JSXElement, Show } from "solid-js";
|
|
|
|
type AlertColor = "white" | "gray" | "blue" | "green" | "red" | "yellow";
|
|
|
|
interface AlertProps {
|
|
header?: string;
|
|
class?: string;
|
|
children: JSXElement;
|
|
}
|
|
|
|
const BASE = "p-4 rounded-default shadow-xs border";
|
|
|
|
const COLORS: Record<AlertColor, string> = {
|
|
white: "bg-white border-neutral-100",
|
|
gray: "bg-neutral-50 border-neutral-200",
|
|
blue: "bg-sky-50 border-sky-200",
|
|
green: "bg-green-50 border-green-200",
|
|
red: "bg-red-50 border-red-200",
|
|
yellow: "bg-yellow-50 border-yellow-200",
|
|
};
|
|
|
|
function alertClass(color: AlertColor, extra?: string): string {
|
|
return BASE + " " + COLORS[color] + (extra ? " " + extra : "");
|
|
}
|
|
|
|
function makeAlert(color: AlertColor) {
|
|
return function Alert(props: AlertProps) {
|
|
return (
|
|
<div class={alertClass(color, props.class)}>
|
|
<Show when={props.header}>
|
|
<h3 class="font-semibold mb-2">{props.header}</h3>
|
|
</Show>
|
|
<p class="text-sm">{props.children}</p>
|
|
</div>
|
|
);
|
|
};
|
|
}
|
|
|
|
export const AlertWhite = makeAlert("white");
|
|
export const AlertGray = makeAlert("gray");
|
|
export const AlertBlue = makeAlert("blue");
|
|
export const AlertGreen = makeAlert("green");
|
|
export const AlertRed = makeAlert("red");
|
|
export const AlertYellow = makeAlert("yellow");
|