docbrown/app/views/admin/users/_member_index.html.erb

<%= javascript_packs_with_chunks_tag "admin/users/memberIndex", defer: true %>
<div id="member-index-content" class="crayons-card overflow-admin-main-layout-padding p-4 xl:p-7">
  <header class="flex flex-col l:flex-row justify-content-between l:items-center ">
    <h1 class="crayons-title ml-2 m:ml-0">Members</h1>
    <%= render "admin/users/index/tabs" %>
  </header>
    <%= render "admin/users/index/controls" %>

    <!-- Responsive screen (breakpoints below XL) data view start -->
    <div class="block xl:hidden fs-s">
      <h2 class="member-data-heading fs-s py-2 -mx-4 px-6 color-base-60">Members</h2>
      <ul class="list-none mx-2">
        <% @users.includes([:organizations]).each do |user| %>
          <li class="py-4">
            <article>
              <header class="flex items-center justify-between m:justify-start mb-2">
                <div class="flex grow-1 mr-4 m:w-50 m:max-w-50">
                  <a href="<%= admin_user_path(user.id) %>" class="mr-2">
                    <img class="radius-full align-middle" src="<%= user.profile_image_url_for(length: 50) %>" width="40" height="40" alt="<%= user.name %>" />
                  </a>
                  <div class="flex flex-col">
                    <h3 class="fs-base"><%= link_to user.name, admin_user_path(user) %></h3>
                    <div class="flex">
                      <span class="color-base-60">@<%= user.username %></span>
                      <span class="hidden m:block">
                         &nbsp;
                        <span class="c-indicator ml-2 crayons-hover-tooltip" data-tooltip="<%= cascading_high_level_roles(user) %>">
                          <%= cascading_high_level_roles(user) %>
                        </span>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="flex justify-between items-center grow-1">
                  <div class="hidden m:block">
                    <% if user.suspended? %>
                      <span class="c-indicator mr-2 inline-block" style="--bg: #DC2626"></span>Suspended
                    <% elsif user.warned? %>
                      <span class="c-indicator mr-2 inline-block" style="--bg: #F59E0B"></span>Warned
                    <% elsif user.comment_suspended? %>
                      <span class="c-indicator mr-2 inline-block" style="--bg: #DC2626"></span>Comment suspended
                    <% elsif user.trusted? %>
                      <span class="c-indicator mr-2 inline-block" style="--bg: #059669"></span>Trusted
                    <% else %>
                      <span class="c-indicator mr-2 inline-block" style="--bg: #A3A3A3"></span>Good standing
                    <% end %>
                  </div>
                  <div class="ml-auto">
                    <%= render "admin/users/index/user_actions_dropdown", user: user, id: "responsive-#{user.id}" %>
                  </div>
                </div>
              </header>
              <div class="flex justify-between mb-2 block m:hidden">
                <div>
                  <% if user.suspended? %>
                    <span class="c-indicator mr-2 inline-block" style="--bg: #DC2626"></span>Suspended
                  <% elsif user.warned? %>
                    <span class="c-indicator mr-2 inline-block" style="--bg: #F59E0B"></span>Warned
                  <% elsif user.comment_suspended? %>
                    <span class="c-indicator mr-2 inline-block" style="--bg: #DC2626"></span>Comment suspended
                  <% elsif user.trusted? %>
                    <span class="c-indicator mr-2 inline-block" style="--bg: #059669"></span>Trusted
                  <% else %>
                    <span class="c-indicator mr-2 inline-block" style="--bg: #A3A3A3"></span>Good standing
                  <% end %>
                </div>
                <span class="c-indicator ml-2 crayons-hover-tooltip" data-tooltip="<%= cascading_high_level_roles(user) %>">
                  <%= cascading_high_level_roles(user) %>
                </span>
              </div>
              <div class="flex justify-between items-end">
                <dl class="flex gap-4">
                  <div>
                    <dt class="color-base-60 fw-normal">Last activity</dt>
                    <dd><%= format_last_activity_timestamp(user.last_activity) %></dd>
                  </div>
                  <div>
                    <dt class="color-base-60 fw-normal">Joined on</dt>
                    <dd><%= user.registered_at.strftime("%d %b, %Y") %></dd>
                  </div>
                </dl>
                <div>
                  <%= render "admin/users/index/organizations", organizations: user.organizations %>
                </div>
              </div>
            </article>
          </li>
        <% end %>
      </ul>
    </div>
    <!-- Responsive screen (breakpoints below XL) data view end -->

    <!-- XL screen data view start -->
    <table class="crayons-table crayons-table__lowercase hidden xl:block" width="100%">
      <thead>
        <tr>
          <th scope="col" class="normal-case">Member</th>
          <th scope="col">Status</th>
          <th scope="col">Last activity & Joined on</th>
          <th scope="col">Organizations</th>
          <th scope="col" class="screen-reader-only">Actions</th>
        </tr>
      </thead>
      <tbody class="crayons-card">
        <% @users.includes([:organizations]).each do |user| %>
        <tr>
          <td>
            <div class="flex s:items-start flex-col s:flex-row">
              <a href="<%= admin_user_path(user.id) %>">
                <img class="radius-full align-middle" src="<%= user.profile_image_url_for(length: 50) %>" width="40" height="40" alt="<%= user.name %>" />
              </a>
              <div class="pl-3 flex-1 fs-s"><h3 class="fs-base"><%= link_to user.name, admin_user_path(user), class: "color-base-80" %></h3>
                <%= link_to "@#{user.username}", admin_user_path(user), class: "color-base-60" %>&nbsp;
                <span class="c-indicator ml-2 crayons-hover-tooltip" data-tooltip="<%= cascading_high_level_roles(user) %>">
                  <%= cascading_high_level_roles(user) %>
                </span>
              </div>
            </div>
          </td>
          <td>
            <% if user.suspended? %>
              <span class="c-indicator mr-2 inline-block" style="--bg: #DC2626"></span>Suspended
            <% elsif user.warned? %>
              <span class="c-indicator mr-2 inline-block" style="--bg: #F59E0B"></span>Warned
            <% elsif user.comment_suspended? %>
              <span class="c-indicator mr-2 inline-block" style="--bg: #DC2626"></span>Comment suspended
            <% elsif user.trusted? %>
              <span class="c-indicator mr-2 inline-block" style="--bg: #059669"></span>Trusted
            <% else %>
              <span class="c-indicator mr-2 inline-block" style="--bg: #A3A3A3"></span>Good standing
            <% end %>
          </td>
          <td>
          <%= format_last_activity_timestamp(user.last_activity) %>
          <p class="fs-xs color-base-60">
            <%= user.registered_at.strftime("%d %b, %Y") %>
          </p>
          </td>
          <td>
            <% if user.organizations.any? %>
              <%= render "admin/users/index/organizations", organizations: user.organizations %>
            <% else %>
              -
            <% end %>
          </td>
          <td>
            <%= render "admin/users/index/user_actions_dropdown", user: user, id: "xl-#{user.id}" %>
          </td>
        </tr>
        <% end %>
      </tbody>
    </table>
    <!-- XL screen data view end -->

    <div class="flex justify-end">
      <%= paginate @users, theme: "admin", scope: @users, label: "Paginate users" %>
    </div>
</div>