From 6da06d8c7beaccada5771c986d3b5d35d0946934 Mon Sep 17 00:00:00 2001
From: KKlochko <KKlochko@protonmail.com>
Date: Wed, 26 Mar 2025 11:49:55 +0200
Subject: [PATCH] Update the AuthorCard to allow edit and redirect to the show
 page.

---
 .../components/my_components/author_card.ex   | 41 +++++++++++++++----
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/lib/decentralised_book_index_web/components/my_components/author_card.ex b/lib/decentralised_book_index_web/components/my_components/author_card.ex
index a995cdb..b408f2b 100644
--- a/lib/decentralised_book_index_web/components/my_components/author_card.ex
+++ b/lib/decentralised_book_index_web/components/my_components/author_card.ex
@@ -1,21 +1,46 @@
 defmodule DecentralisedBookIndexWeb.Components.MyComponents.AuthorCard do
   use Phoenix.Component
+  use DecentralisedBookIndexWeb, :verified_routes
 
   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 justify-end px-4 pt-4">
+            <button id={"dropdownButton#{@author.id}"} data-dropdown-toggle={"dropdown#{@author.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#{@author.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"/authors/#{@author.id}"}
+                               class="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"
+                        >
+                            Edit
+                        </.link>
+                    </li>
+                </ul>
+            </div>
+        </div>
         <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 %>
+            <.link navigate={~p"/authors/#{@author.id}"}>
+                <%= 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 %>
+            </.link>
 
-            <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">{@author.name}</h5>
+            <.link navigate={~p"/authors/#{@author.id}"}>
+                <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">{@author.name}</h5>
+            </.link>
             <span class="text-sm text-gray-500 dark:text-gray-400">{@author.description}</span>
         </div>
     </div>