use card for displaying github profile #17

lib/app_web/live/app_live.ex

@@ -8,7 +8,9 @@ defmodule AppWeb.AppLive do
     if connected?(socket) do
       AppWeb.Endpoint.subscribe(@topic) # subscribe to the channel
     end
-    p = %{id: 1, login: "Alex", avatar_url: "#{@img}1"}
+    p = %{id: 183617417, login: "Alex",
+      avatar_url: "#{@img}183617417", name: "Alexander",
+      bio: "Love learning", created_at: "2015", company: "dwyl"}
     {:ok, assign(socket, %{data: p})}
   end
 
@@ -23,41 +25,27 @@ defmodule AppWeb.AppLive do
   end
 
   def handle_event("dec", _, socket) do
-    val = socket.assigns.val - 1
+    val = socket.assigns.data.id - 1
     p = %{id: val, login: "Alex", avatar_url: "#{@img}#{val}"}
     new_state = assign(socket, %{data: p})
     broadcast("dec", new_state.assigns)
     {:noreply, new_state}
   end
 
   def handle_event("sync", _value, socket) do
-    IO.inspect("sync")
     sync(socket)
-    # val = socket.assigns.val + 1
-    # p = %{login: "Alex", avatar_url: "#{@img}#{val}"}
-    # new_state = assign(socket, %{val: val, data: p})
-    # broadcast("inc", new_state.assigns)
-
-    # :timer.apply_interval(1000, IO, :puts, ["weeeee"])
 
     {:noreply, socket}
   end
 
   def handle_event("update", _value, socket) do
-    IO.inspect("- - - - - - - - - - - - - - - - - - - handle_event: update")
     {:noreply, socket}
   end
 
   # update `data` by broadcasting it as the profiles are crawled:
   def sync(socket) do
-
-    dbg(socket.assigns)
-    list = App.GitHub.org_user_list("dwyl")
-    # dbg(list)
-    # Iterate through the list of people
-    # Enum.map(list, Task.async( fn u ->
-    #   dbg(u)
-    # end))
+    list = App.GitHub.org_user_list("ideaq")
+    # Iterate through the list of people and fetch profiles from API
     list
     |> Stream.with_index
     |> Enum.map(fn {u, i} ->

lib/app_web/live/app_live.html.heex

@@ -1,28 +1,31 @@
-<h1 class="text-3xl text-white py-3 text-center
-  bg-gradient-to-r from-green-400 to-blue-500 rounded-lg shadow-lg">
-  hello david 
-</h1>
-
-<div>
-  <h1 class="text-4xl font-bold text-center"> 
-    The count is: <%= @data.id %> </h1>
-
-  <p class="text-center">
-   <button phx-click="dec" 
-    class="w-20 bg-red-500 hover:bg-red-600">-</button>
-   <button phx-click="inc" 
-    class="w-20 bg-green-500 hover:bg-green-600">+</button>
-   </p>
-</div>
-
-<h1>{ @data.login }</h1>
-
-<img style="height:auto;" src={@data.avatar_url} 
-width="260" height="260" 
-class="rounded-full">
-
-
 <button phx-click="sync" 
 class="w-20 bg-green-600 hover:bg-green-800 text-white font-bold py-2 px-4 rounded">
   Sync
-</button>
+</button>
+
+
+<div class="flex flex-row justify-center items-center">
+<div class="w-64 m-10 max-w-sm">
+  <div class="rounded-lg border bg-white px-4 pt-8 pb-10 shadow-lg">
+    <div class="relative mx-auto w-36 rounded-full">
+      <span class="absolute right-0 m-3 h-3 w-3 rounded-full bg-green-500 ring-2 ring-green-300 ring-offset-2"></span>
+      <img class="mx-auto h-auto w-full rounded-full" 
+      src={@data.avatar_url} alt={@data.name} />
+    </div>
+    <h1 class="my-1 text-center text-xl font-bold leading-8 text-gray-900">@{@data.login}</h1>
+    <h3 class="font-lg text-semibold text-center leading-6 text-gray-600">{@data.name}</h3>
+    <p class="text-center text-sm leading-6 text-gray-500 hover:text-gray-600">{@data.bio}</p>
+    <ul class="mt-3 divide-y rounded bg-gray-100 py-2 px-3 text-gray-600 shadow-sm hover:text-gray-700 hover:shadow">
+      <li class="flex items-center py-3 text-sm">
+        <span>Company</span>
+        <span class="ml-auto">
+        <span class="rounded-full bg-green-200 py-1 px-2 text-xs font-medium text-green-700">{@data.company}</span></span>
+      </li>
+      <li class="flex items-center py-3 text-sm">
+        <span>Joined On</span>
+        <span class="ml-auto">{@data.created_at}</span>
+      </li>
+    </ul>
+  </div>
+</div>
+</div>

lib/app_web/templates/layout/root.html.heex

@@ -13,11 +13,44 @@
     <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
   </head>
 <body>
-  <header>
-    <section class="container">
-      <h1 class="text-center py-2">App MVP Phoenix</h1>
-    </section>
-  </header>
+
+<nav class="bg-white border-gray-200 dark:bg-gray-900">
+<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+  <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
+      <img src="https://dwyl.com/img/common/dwyl-heart-only-logo.png" class="h-8" alt="Flowbite Logo" />
+      <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white"></span>
+  </a>
+  <button data-collapse-toggle="navbar-default" type="button" 
+    class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
+      <span class="sr-only">Open main menu</span>
+      <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
+      </svg>
+  </button>
+  <div class="hidden w-full md:block md:w-auto" id="navbar-default">
+    <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
+      <li>
+        <a href="#" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500" aria-current="page">Home</a>
+      </li>
+      <!--
+      <li>
+        <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About</a>
+      </li>
+      <li>
+        <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Services</a>
+      </li>
+      <li>
+        <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Pricing</a>
+      </li>
+      <li>
+        <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
+      </li>
+      -->
+    </ul>
+  </div>
+</div>
+</nav>
+
   <%= @inner_content %>
 </body>
 </html>