Add speaker tab to talk show page

app/views/talks/_talk.html.erb

@@ -59,6 +59,36 @@
       <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
         <%= render partial: "talks/transcript", locals: {talk: talk} %>
       </div>
+
+      <input type="radio" name="talk_tabs" role="tab" class="tab" aria-label="<%= "Speaker".pluralize(talk.speakers.count) %>">
+      <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <% talk.speakers.each do |speaker| %>
+            <%= link_to speaker_path(speaker), class: "bg-[#f3f4f6] hover:bg-[#e5e7eb] rounded-lg flex content-center p-2 border border-[#e5e7eb] hover:border-[#d1d5db]" do %>
+              <div class="flex items-start gap-4">
+                <% if speaker.github.present? && local_assigns.fetch(:picture_profile, true) %>
+                  <%= image_tag speaker.github_avatar_url(size: 128), class: "rounded-full w-16 h-16", alt: "GitHub picture profile of #{talk.speakers.last.github}", loading: :lazy %>
+                <% else %>
+                  <div class="avatar">
+                    <div class="flex bg-[#D74B47] text-neutral-content w-16 rounded-full text-center font-lg content-center">
+                      <span class="text-xl"><%= speaker.name.split(" ").map(&:first).join.first(2) %></span>
+                    </div>
+                  </div>
+                <% end %>
+
+                <div class="flex flex-col text-black place-self-center">
+                  <div class="line-clamp-1 font-bold">
+                    <%= speaker.name %>
+                  </div>
+                  <div class="line-clamp-1 text-[#6b7280]">
+                    <%= pluralize(speaker.talks.count, "talk") %>
+                  </div>
+                </div>
+              </div>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
     </div>
 
     <% if action_name != "show" %>