Add the my components and AuthorCard.

lib/decentralised_book_index_web.ex

@@ -90,6 +90,7 @@ defmodule DecentralisedBookIndexWeb do
       # Core UI components
       import DecentralisedBookIndexWeb.CoreComponents
       use DecentralisedBookIndexWeb.Components.MyPartials
+      use DecentralisedBookIndexWeb.Components.MyComponents
 
       # Shortcut for generating JS commands
       alias Phoenix.LiveView.JS

lib/decentralised_book_index_web/components/my_components.ex

@@ -0,0 +1,9 @@
+defmodule DecentralisedBookIndexWeb.Components.MyComponents do
+  alias DecentralisedBookIndexWeb.Components.MyComponents
+
+  defmacro __using__(_) do
+    quote do
+      import MyComponents.AuthorCard, only: [author_card: 1]
+    end
+  end
+end

lib/decentralised_book_index_web/components/my_components/author_card.ex

@@ -0,0 +1,24 @@
+defmodule DecentralisedBookIndexWeb.Components.MyComponents.AuthorCard do
+  use Phoenix.Component
+
+  attr(:author, :map, required: true)
+
+  def author_card(assigns) do
+    ~H"""
+    <div class="w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3">
+        <div class="flex flex-col items-center py-5">
+            <%= if @author.avatar_url != nil do %>
+                <img class="w-24 h-24 mb-3 rounded-full shadow-lg" src={@author.avatar_url} alt="Bonnie image"/>
+            <% else %>
+                <div class="relative w-36 h-36 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600">
+                    <svg class="absolute w-36 h-36 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
+                </div>
+            <% end %>
+
+            <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">{@author.name}</h5>
+            <span class="text-sm text-gray-500 dark:text-gray-400">{@author.description}</span>
+        </div>
+    </div>
+    """
+  end
+end