Active player list

components/Button.tsx

@@ -18,8 +18,13 @@ const colors = {
     text: "text-white",
   },
   fire: {
-    bg: "bg-grape",
-    border: "border-grape-800",
+    bg: "bg-fire",
+    border: "border-fire-800",
+    text: "text-white",
+  },
+  wasabi: {
+    bg: "bg-wasabi-600",
+    border: "border-wasabi-800",
     text: "text-white",
   },
 };
@@ -38,6 +43,7 @@ export function Button(
   ${colors[color].text}
   hover:bg-smoke-500
   transition-colors
+  disabled:opacity-30
   ${props.class || ""}`;
   return (
     <button

components/Content.tsx

@@ -2,7 +2,7 @@ import { VNode } from "preact";
 
 export function Content(props: { children?: VNode | VNode[] }) {
   return (
-    <div class="mt-16 bg-smoke-200 dark:bg-smoke-900 border-4 border-licorice-800 p-8 rounded-3xl">
+    <div class="bg-smoke-200 dark:bg-smoke-900 border-4 border-licorice-800 p-8 rounded-3xl">
       {props.children}
     </div>
   );

components/properties.tsx

@@ -0,0 +1,28 @@
+import { Button } from "./Button.tsx";
+import { Content } from "./Content.tsx";
+
+export function MCProperties(
+  { properties }: { properties: Map<string, string> },
+) {
+  return (
+    <div className="container p-8">
+      <Content>
+        <form method="POST" action="/properties">
+          <div class="grid grid-cols-3 gap-y-4 gap-x-16">
+            {Array.from(properties.entries()).sort(([a],[b]) => a > b ? 1 : -1).map(([k, v]) => (
+              <div>
+                <label class="block font-pixel text-lg" htmlFor={k}>{k}</label>
+                <input class="w-full" type="text" name={k} value={v} autocomplete="off" />
+              </div>
+            ))}
+          </div>
+          <div class="mt-8">
+            <Button type="submit">
+              Save
+            </Button>
+          </div>
+        </form>
+      </Content>
+    </div>
+  );
+}