Navigate from chapter to individual verse

ve1ld · Dec 29, 2023 · d25475f · d25475f
1 parent 3a6e44b
commit d25475f
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 5 deletions.
diff --git a/lib/vyasa_web/live/gita_live/show.ex b/lib/vyasa_web/live/gita_live/show.ex
@@ -20,14 +20,50 @@ defmodule VyasaWeb.GitaLive.Show do
       :chapter_number => chapter,
       :chapter_summary => summary,
       :name => chapter_name,
-      :name_meaning => meaning,
+      :name_meaning => meaning
     } = socket.assigns.chapter
 
     assign(socket, :meta, %{
       title: "Chapter #{chapter} | #{chapter_name} -- #{meaning}",
       description: summary,
       type: "website",
-      url: url(socket, ~p"/gita/#{chapter}"),
+      url: url(socket, ~p"/gita/#{chapter}")
     })
   end
+
+  @doc """
+  Renders a clickable verse list.
+
+  ## Examples
+      <.verse_list>
+        <:item title="Title" navigate={~p"/myPath"}><%= @post.title %></:item>
+      </.list>
+  """
+  slot :item, required: true do
+    attr :title, :string
+    attr :navigate, :any, required: false
+  end
+
+  def verse_list(assigns) do
+    ~H"""
+    <div class="mt-14">
+      <dl class="-my-4 divide-y divide-zinc-100">
+        <div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
+          <dt
+            :if={Map.has_key?(item, :title) && Map.has_key?(item, :navigate)}
+            class="w-1/6 flex-none text-zinc-500"
+          >
+            <.link
+              navigate={item[:navigate]}
+              class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
+            >
+              <%= item.title %>
+            </.link>
+          </dt>
+          <dd class="text-zinc-700"><%= render_slot(item) %></dd>
+        </div>
+      </dl>
+    </div>
+    """
+  end
 end
diff --git a/lib/vyasa_web/live/gita_live/show.html.heex b/lib/vyasa_web/live/gita_live/show.html.heex
@@ -3,10 +3,13 @@
         <:subtitle> <%= @chapter.chapter_summary %></:subtitle>
     </.header>
 
-    <.list :for={{_dom_id, text} <- @streams.verses}>
-        <:item title={"#{text.chapter_number}.#{text.verse_number}"}><p class="font-dn text-2xl"><%= text.text |> String.split("।।") |> List.first()  %></p></:item>
+    <.verse_list :for={{_dom_id, text} <- @streams.verses}>
+        <:item title={"#{text.chapter_number}.#{text.verse_number}"}
+               navigate={~p"/gita/#{text.chapter_number}/#{text.verse_number}"} >
+           <p class="font-dn text-2xl"><%= text.text |> String.split("।।") |> List.first()  %></p>
+        </:item>
         <:item><%= text.transliteration %></:item>
         <:item><%= text.word_meanings %></:item>
-    </.list>
+    </.verse_list>
 
     <.back navigate={~p"/gita"}>Back to Gita</.back>