app/components/dropdown_component.html.erb

@@ -2,13 +2,21 @@
   <div class="relative inline-block">
     <div role="button" tabindex="0" data-dropdown-target="button"
          class="inline-block select-none">
+      <% if @size == :large %>
       <span class="appearance-none flex items-center inline-block">
         <span class="p-2 bg-gray-50 hover:bg-gray-100 rounded-full">
-          <%= render partial: "icons/kebab-menu", locals: {
-                     custom_class: "inline text-gray-500 h-6 w-6"
-          } %>
+          <%= render partial: "icons/#{@icon_name}",
+                     locals: { custom_class: "inline text-gray-500 h-6 w-6" } %>
         </span>
       </span>
+      <% elsif @size == :small %>
+      <span class="appearance-none flex items-center inline-block">
+        <span class="text-gray-500 hover:text-blue-600">
+          <%= render partial: "icons/#{@icon_name}",
+                     locals: { custom_class: "inline h-4 w-4" } %>
+        </span>
+      </span>
+      <% end %>
     </div>
     <div data-dropdown-target="menu"
          data-transition-enter="transition ease-out duration-200"

app/components/dropdown_component.rb

@@ -1,5 +1,8 @@
 # frozen_string_literal: true
 
 class DropdownComponent < ViewComponent::Base
-
+  def initialize(size: :large, icon_name: "kebap-menu")
+    @size = size.to_sym
+    @icon_name = icon_name
+  end
 end

app/views/admin/users/show.html.erb

@@ -43,7 +43,26 @@
           <tr>
             <th>Invitations available</th>
             <td>
-              <%= @user.invitations.count %>
+              <div class="flex justify-between">
+                <span>
+                  <%= @user.invitations.count %>
+                </span>
+                <span>
+                  <%= render DropdownComponent.new(size: :small, icon_name: "edit") do %>
+                    <%= render DropdownLinkComponent.new(
+                          href: ""
+                        ) do %>
+                      Add more
+                    <% end %>
+                    <%= render DropdownLinkComponent.new(
+                          href: "",
+                          separator: true, add_class: "text-red-700"
+                        ) do %>
+                      Remove all
+                    <% end %>
+                  <% end %>
+                </span>
+              </div>
             </td>
           </tr>
           <tr>