Add js web stuff to landing page + documentation

go/jsruntime/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-surface border-line",
+    gray:   "bg-surface-muted border-line",
+    blue:   "bg-sky-50 dark:bg-sky-950/40 border-sky-200 dark:border-sky-900",
+    green:  "bg-green-50 dark:bg-green-950/40 border-green-200 dark:border-green-900",
+    red:    "bg-red-50 dark:bg-red-950/40 border-red-200 dark:border-red-900",
+    yellow: "bg-yellow-50 dark:bg-yellow-950/40 border-yellow-200 dark:border-yellow-900",
+};
+
+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");