ZeusWPI/Tab

<%= render 'shared/dashboard_card',
      card_title: "Notifications",
      view_all_path: user_notifications_path(current_user) do %>
  <ul role="list" class="divide-y divide-gray-200">
    <% if @notifications.any? %>
      <% @notifications.each do |n| %>
        <li class="py-3 sm:py-4">
          <div class="flex items-center space-x-4">
            <div class="flex-auto min-w-0">
              <p class="text-sm font-medium text-gray-900 truncate">
                <%= n.message %>
              </p>
            </div>
            <div class="flex-initial items-center text-base font-semibold text-gray-900">
              <%= button_to notification_read_path(n), class: 'inline-flex items-center py-2 px-4 text-sm font-medium focus:outline-none text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 rounded-lg border focus:z-10 focus:ring-2' do %>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
              <% end %>
            </div>
          </div>
        </li>
      <% end %>
    <% else %>
      All caught up!
    <% end %>
  </ul>
<% end %>