depot/app/views/products/index.html.erb

<%= turbo_stream_from "products" %>
<%= turbo_refreshes_with method: :morph, scroll: :preserve  %>

<div class="w-full">
  <% if notice.present? %>
    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium
              rounded-lg inline-block" id="notice">
      <%= notice %>
    </p>
  <% end %>

  <div class="flex justify-between items-center pb-8">
    <h1 class="mx-auto font-bold text-4xl">Products</h1>
  </div>

  <table id="products" class="mx-auto">
    <tfoot>
      <tr>
        <td colspan="3">
          <div class="mt-8">
            <%= link_to 'New product', 
                        new_product_path,
                        class: "inline rounded-lg py-3 px-5 bg-green-600
                                text-white block font-medium" %>
          </div>
        </td>
      </tr>
    </tfoot>

    <tbody>
      <% @products.each do |product| %>
        <tr class="<%= cycle('bg-green-50', 'bg-white') %>">

          <td class="px-2 py-3">
            <%= image_tag(product.image, class: 'w-40') %>
          </td>

          <td>
            <h1 class="text-xl font-bold"><%= product.title %></h1>
            <p class="my-3">
              <%= truncate(strip_tags(product.description),
                           length: 80) %>
            </p>
            <p>
              <%= number_to_currency(product.price) %>
            </p>
          </td>

          <td class="px-3">
            <ul>
              <li>
                <%= link_to 'Show', 
                             product,
                             class: 'hover:underline' %>
              </li>
              <li>
                <%= link_to 'Edit',
                             edit_product_path(product),
                             class: 'hover:underline' %>
              </li>

              <li>
                <%= button_to 'Destroy',
                             product,
                             method: :delete,
                             class: 'hover:underline',
                             data: { turbo_confirm: "Are you sure?" } %>
              </li>
            </ul>
          </td>
        </tr>
      <% end %>
    </tbody>
  </table>
</div>