move tsx kit -> uikit

web/uikit/Alerts.tsx

@@ -0,0 +1,44 @@
+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");