cleanup layout

deno.json

@@ -1,14 +1,14 @@
 {
   "importMap": "./deno.map.json",
   "compilerOptions": {
-    "types": ["./ts/types"],
+    "types": ["./ts/types.d.ts"],
     "lib": ["deno.window", "dom"],
     "checkJs": true
   },
   "tasks": {
     "dev": "deno task fmt & deno task serve & deno task test",
-    "fmt": "deno fmt --watch --no-lock --no-check",
+    "fmt": "deno fmt --watch",
-    "serve": "deno run -A --unstable --no-lock --no-check https://deno.land/std@0.167.0/http/file_server.ts",
+    "serve": "deno run -A --unstable --no-check https://deno.land/std@0.167.0/http/file_server.ts",
     "test": "deno test ts/test.ts --watch --no-lock --no-check"
   }
 }

index.html

@@ -1,4 +1,4 @@
-<script type="importmap-shim" src="./deno.map.json"></script>
-<script async src="https://unpkg.com/es-module-shims@0.13.1/dist/es-module-shims.min.js"></script>
 <div id="app"></div>
-<script type="module-shim">import "app";</script>
+<script type="importmap-shim" src="./deno.map.json"></script>
+<script type="module-shim">import "app";</script>
+<script async src="https://unpkg.com/es-module-shims@0.13.1/dist/es-module-shims.min.js"></script>

js/people.js

@@ -4,7 +4,8 @@ import { Consumer } from "./store.js";
 
 /** @typedef {(e:SubmitEvent|Event)=>void|null} handler */
 
-/** @type {(props:{person:Store.Person })=>preact.VNode} */ const Person = (props) => {
+/** @type {(props:{person:Store.Person })=>preact.VNode} */
+const Person = (props) => {
   const [, dispatch] = Consumer();
 
   /** @type {handler} */ const handleClick = () => {
@@ -12,49 +13,81 @@ import { Consumer } from "./store.js";
   };
 
   return html`
-    <div class="flex font-sans">
+    <div class="flex font-sans gap-5">
-        <button class="w-8 h-8 text(white xs) bg-red-500 rounded-lg" onClick=${handleClick}>X</button>
+        <button class="w-8 h-8 text(white xs) font-black bg-red-500 rounded-lg" onClick=${handleClick}>X</button>
-        <span>${props.person.Name}</span>
+        <span class="w-36">${props.person.Name}</span>
-        <span>${props.person.Age}</span>
+        <span class="w-12">${props.person.Age}</span>
     </div>`;
 };
 
-/** @type {()=>preact.VNode} */ export default () => {
+/** @type {()=>preact.VNode} */
-  const [state, dispatch] = Consumer();
+const PersonTable = () => {
+  const [state] = Consumer();
+  return html`<h3 class="text-lg font-sans mb-3">People</h3>
+  <div class="p-4">
+    ${
+    state.People.length > 0
+      ? html`
+      <div class="flex flex-col gap-5">
+        <div class="flex font-sans text(xs gray-500) gap-5">
+          <span class="w-8">Delete</span>
+          <span class="w-36">Name</span>
+          <span class="w-12">Age</span>
+        </div>
+        ${state.People.map((p) => html`<${Person} person=${p}/>`)}
+      </div>`
+      : html`
+      <p class="text(sm gray-500) italic font-sans">No people created</p>
+      `
+  }</div>`;
+};
+
+/** @type {()=>preact.VNode} */
+const PersonForm = () => {
+  const [, dispatch] = Consumer();
   const [nameGet, nameSet] = Preact.useState("default name");
   const [ageGet, ageSet] = Preact.useState(21);
 
-  /** @type {handler} */ const handleSubmit = (e) => {
+  /** @type {handler} */
+  const handleSubmit = (e) => {
     e.preventDefault();
     dispatch({ Key: "person-create", Arg: { Name: nameGet, Age: ageGet } });
   };
 
-  /** @type {handler} */ const handleName = (e) => {
+  /** @type {handler} */
+  const handleName = (e) => {
     e.target && nameSet(/** @type {HTMLInputElement}*/ (e.target).value);
   };
 
-  /** @type {handler} */ const handleAge = (e) => {
+  /** @type {handler} */
+  const handleAge = (e) => {
     e.target &&
       ageSet(parseInt(/** @type {HTMLInputElement}*/ (e.target).value));
   };
 
+  return html`
+  <h3 class="text-lg font-sans">Add Person</h3>
+  <form onSubmit=${handleSubmit} class="p-4 font-sans flex items-end">
+    <span>
+      <label for="name" class="block text-xs">Name</label>
+      <input class="bg-gray-100 p-2 mr-2 rounded-lg" type="text"   value=${nameGet} onInput=${handleName}/>
+    </span>
+    <span>
+      <label for="name" class="block text-xs">Age</label>
+      <input class="bg-gray-100 p-2 mr-2 rounded-lg" type="number" value=${ageGet}  onInput=${handleAge} min="0" max="111"/>
+    </span>
+    <button class="p-2 rounded-lg text-white bg-blue-700">Create</button>
+  </form>`;
+};
+
+/** @type {()=>preact.VNode} */
+export default () => {
   return html`
     <div>
-        <h3 class="text-lg font-sans">Add Person</h3>
+      <h2 class="pb-2 mb-2 border-b text-2xl font-sans border(">Person Records</h2>
-        <form onSubmit=${handleSubmit} class="p-4 font-sans flex items-end">
+      <div class="px-2">
-          <span>
+        <${PersonForm}/>
-            <label for="name" class="block text-xs">Name</label>
+        <${PersonTable}/>
-            <input class="bg-gray-100 p-2 mr-2 rounded-lg" type="text"   value=${nameGet} onInput=${handleName}/>
+      </div>
-          </span>
-          <span>
-            <label for="name" class="block text-xs">Age</label>
-            <input class="bg-gray-100 p-2 mr-2 rounded-lg" type="number" value=${ageGet}  onInput=${handleAge} min="0" max="111"/>
-          </span>
-          <button class="p-2 rounded-lg text-white bg-blue-700">Create</button>
-        </form>
-        <h3 class="text-lg font-sans">People</h3>
-        <div>
-            ${state.People.map((p) => html`<${Person} person=${p}/>`)}
-        </div>
     </div>`;
 };