From a7b6d64d40b011ae59063759aa5c5019181ee0a0 Mon Sep 17 00:00:00 2001
From: KKlochko <KKlochko@protonmail.com>
Date: Sun, 30 Mar 2025 19:48:17 +0300
Subject: [PATCH] Update the Book Show LiveView to show the cover image.

---
 .../live/book_live/show.ex                    | 33 +++++++++++++------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/lib/decentralised_book_index_web/live/book_live/show.ex b/lib/decentralised_book_index_web/live/book_live/show.ex
index 9f3d60e..1fedbf0 100644
--- a/lib/decentralised_book_index_web/live/book_live/show.ex
+++ b/lib/decentralised_book_index_web/live/book_live/show.ex
@@ -19,23 +19,36 @@ defmodule DecentralisedBookIndexWeb.BookLive.Show do
       </:actions>
     </.header>
 
-    <.list>
-      <:item title="Id">{@book.id}</:item>
+    <div class="flex flex-wrap flex-[2_1_auto] gap-5">
+      <%= if @book.cover_image_url != nil do %>
+        <img class="w-36 shadow-lg mt-14 mx-auto md:mx-0 object-cover" src={@book.cover_image_url} alt={"#{@book.title} image"}/>
+      <% else %>
+        <div class="relative w-36 h-36 overflow-hidden mt-14 mx-auto md:mx-0">
+          <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 %>
 
-      <:item title="Title">{@book.title}</:item>
+      <.list>
+        <:item title="Id">{@book.id}</:item>
 
-      <:item title="Description">{@book.description}</:item>
+        <:item title="Title">{@book.title}</:item>
 
-      <:item title="Published">{@book.published}</:item>
+        <:item title="Description">{@book.description}</:item>
 
-      <:item title="Language">{@book.language}</:item>
+        <:item title="Published">{@book.published}</:item>
 
-      <:item title="Format">{@book.format}</:item>
+        <:item title="Language">{@book.language}</:item>
 
-      <:item title="Page count">{@book.page_count}</:item>
+        <:item title="Format">{@book.format}</:item>
+
+        <:item title="Page count">{@book.page_count}</:item>
+
+        <:item title="Cover image url">{@book.cover_image_url}</:item>
+      </.list>
+    </div>
 
-      <:item title="Cover image url">{@book.cover_image_url}</:item>
-    </.list>
 
     <.back navigate={~p"/books"}>Back to books</.back>
     """