Add BookCard component.

lib/decentralised_book_index_web/components/my_components.ex

@@ -3,6 +3,8 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents do
 
   defmacro __using__(_) do
     quote do
+      import MyComponents.BookCard, only: [book_card: 1]
+
       import MyComponents.AuthorCard, only: [author_card: 1]
       import MyComponents.AuthorSearch, only: [author_search: 1]
 

lib/decentralised_book_index_web/components/my_components/book_card.ex

@@ -0,0 +1,55 @@
+defmodule DecentralisedBookIndexWeb.Components.MyComponents.BookCard do
+  use Phoenix.Component
+  use DecentralisedBookIndexWeb, :verified_routes
+
+  attr(:book, :map, required: true)
+
+  def book_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 justify-end px-4 pt-4">
+            <button id={"dropdownButton#{@book.id}"} data-dropdown-toggle={"dropdown#{@book.id}"} class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5" type="button">
+                <span class="sr-only">Open dropdown</span>
+                <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 3">
+                    <path d="M2 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6.041 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM14 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z"/>
+                </svg>
+            </button>
+            <!-- Dropdown menu -->
+            <div id={"dropdown#{@book.id}"} class="z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700">
+                <ul class="py-2" aria-labelledby="dropdownButton">
+                    <li>
+                        <.link navigate={~p"/books/#{@book.id}/edit"}
+                               class="flex items-center block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+                        >
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 -ml-0.5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
+                                <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"></path>
+                            </svg>
+                            Edit
+                        </.link>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="flex flex-col items-center py-5">
+            <.link navigate={~p"/books/#{@book.id}"}>
+                <%= if @book.cover_image_url != nil do %>
+                    <img class="w-36 mb-3 shadow-lg" src={@book.cover_image_url} alt={"#{@book.title} image"} />
+                <% else %>
+                    <div class="relative w-36 h-36 overflow-hidden">
+                        <svg class="w-36 h-36 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                            <path fill-rule="evenodd" d="M6 2a2 2 0 0 0-2 2v15a3 3 0 0 0 3 3h12a1 1 0 1 0 0-2h-2v-2h2a1 1 0 0 0 1-1V4a2 2 0 0 0-2-2h-8v16h5v2H7a1 1 0 1 1 0-2h1V2H6Z" clip-rule="evenodd"/>
+                        </svg>
+                    </div>
+                <% end %>
+            </.link>
+
+            <.link navigate={~p"/books/#{@book.id}"}>
+                <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">{@book.title}</h5>
+            </.link>
+            <span class="text-sm text-gray-500 dark:text-gray-400">{@book.description}</span>
+        </div>
+    </div>
+    """
+  end
+end