zoeys.computer/lib/zoeyscomputer_web/live/gist_live/index.html.heex

<.header>
  Listing Gists
  <:actions>
    <.link patch={~p"/gists/new"}>
      <.button>New Gist</.button>
    </.link>
  </:actions>
</.header>

<.table
  id="gists"
  rows={@streams.gists}
  row_click={fn {_id, gist} -> JS.navigate(~p"/gists/#{gist}") end}
>
  <:col :let={{_id, gist}} label="Code">
    <p class="truncate max-w-72"><%= gist.title || gist.code %></p>
  </:col>
  <:col :let={{_id, gist}} label="Lang"><%= gist.lang %></:col>
  <:action :let={{_id, gist}}>
    <div class="sr-only">
      <.link navigate={~p"/gists/#{gist}"}>Show</.link>
    </div>
    <.link patch={~p"/gists/#{gist}/edit"}>Edit</.link>
  </:action>
  <:action :let={{id, gist}}>
    <.link
      phx-click={JS.push("delete", value: %{id: gist.id}) |> hide("##{id}")}
      data-confirm="Are you sure?"
    >
      Delete
    </.link>
  </:action>
</.table>

<.modal :if={@live_action in [:new, :edit]} id="gist-modal" show on_cancel={JS.patch(~p"/gists")}>
  <.live_component
    module={ZoeyscomputerWeb.GistLive.FormComponent}
    id={@gist.id || :new}
    title={@page_title}
    action={@live_action}
    gist={@gist}
    patch={~p"/gists"}
  />
</.modal>