From 0e08c7f075571c8734bcda3347e2e2635c46c806 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sat, 9 Jan 2021 12:54:55 +0100
Subject: [PATCH] working on user detail page

ref #12
---
 src/components/UserDetailOne.svelte | 124 +++++++++++-----------------
 1 file changed, 49 insertions(+), 75 deletions(-)

diff --git a/src/components/UserDetailOne.svelte b/src/components/UserDetailOne.svelte
index e9b0f69a..e4d31aa6 100644
--- a/src/components/UserDetailOne.svelte
+++ b/src/components/UserDetailOne.svelte
@@ -24,80 +24,54 @@
   });
 </script>
 
-<!-- ////////// -->
-<section class="container p-5">
-  <p>{JSON.stringify(params)}</p>
-  <span class="mb-1 text-3xl font-extrabold leading-tight text-gray-900">John
-    Doe
-    <button
-      type="button"
-      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">Delete
-      User</button></span>
-  <div class="container mx-auto px-4">
-    <div>
-      <div class="px-6">
-        <div class="flex flex-wrap justify-center">
-          <div
-            class="w-full lg:w-4/12 px-4 lg:order-3 lg:text-right lg:self-center">
-            <div class="py-6 px-3 mt-32 sm:mt-0">
-              <button
-                class="bg-blue-500 active:bg-blue-600 uppercase text-white font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
-                type="button">Connect</button>
-            </div>
-          </div>
-          <div class="w-full lg:w-4/12 px-4 lg:order-1">
-            <div class="flex justify-center py-4 lg:pt-4 pt-8">
-              <div class="mr-4 p-3 text-center">
-                <span
-                  class="text-xl font-bold block uppercase tracking-wide text-gray-700">22</span><span
-                  class="text-sm text-gray-500">Friends</span>
-              </div>
-              <div class="mr-4 p-3 text-center">
-                <span
-                  class="text-xl font-bold block uppercase tracking-wide text-gray-700">10</span><span
-                  class="text-sm text-gray-500">Photos</span>
-              </div>
-              <div class="lg:mr-4 p-3 text-center">
-                <span
-                  class="text-xl font-bold block uppercase tracking-wide text-gray-700">89</span><span
-                  class="text-sm text-gray-500">Comments</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="text-center mt-12">
-          <h3
-            class="text-4xl font-semibold leading-normal mb-2 text-gray-800 mb-2">
-            Jenna Stones
-          </h3>
-          <div
-            class="text-sm leading-normal mt-0 mb-2 text-gray-500 font-bold uppercase">
-            <i class="fas fa-map-marker-alt mr-2 text-lg text-gray-500" />
-            Los Angeles, California
-          </div>
-          <div class="mb-2 text-gray-700 mt-10">
-            <i class="fas fa-briefcase mr-2 text-lg text-gray-500" />Solution
-            Manager - Creative Tim Officer
-          </div>
-          <div class="mb-2 text-gray-700">
-            <i class="fas fa-university mr-2 text-lg text-gray-500" />University
-            of Computer Science
-          </div>
-        </div>
-        <div class="mt-10 py-10 border-t border-gray-300 text-center">
-          <div class="flex flex-wrap justify-center">
-            <div class="w-full lg:w-9/12 px-4">
-              <p class="mb-4 text-lg leading-relaxed text-gray-800">
-                An artist of considerable range, Jenna the name taken by
-                Melbourne-raised, Brooklyn-based Nick Murphy writes, performs
-                and records all of his own music, giving it a warm, intimate
-                feel with a solid groove structure. An artist of considerable
-                range.
-              </p><a href="#pablo" class="font-normal text-blue-500">Show more</a>
-            </div>
-          </div>
-        </div>
+{#await user_promise}
+  <!--  -->
+{:then user}
+  <section class="container p-5 select-none">
+    <span
+      class="mb-4 text-3xl font-extrabold leading-tight text-gray-900">{user.firstname}
+      {user.middlename}
+      {user.lastname}
+      <button
+        type="button"
+        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">Delete
+        User</button></span>
+    <!--  -->
+    <div class="mt-2 flex items-center">
+      <span
+        class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100"><svg
+          class="h-full w-full text-gray-300"
+          fill="currentColor"
+          viewBox="0 0 24 24"><path
+            d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" /></svg></span>
+      <button
+        type="button"
+        class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Change</button>
+    </div>
+    <!--  -->
+    <div class="flex items-start">
+      <div class="flex items-center h-5">
+        <input
+          id="enabled"
+          name="enabled"
+          type="checkbox"
+          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+      </div>
+      <div class="ml-3 text-sm">
+        <label for="enabled" class="font-medium text-gray-700">Active?</label>
+        <p class="text-gray-500">set the user active/ inactive</p>
+      </div>
+      <div class="ml-3 text-sm">
+        <label for="trackname" class="font-medium text-gray-700">Active?</label>
+        <input
+          autocomplete="off"
+          placeholder="First name"
+          type="text"
+          name="trackname"
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
       </div>
     </div>
-  </div>
-</section>
+  </section>
+{:catch error}
+  <!-- promise was rejected -->
+{/await}