app/views/spina/admin/embeds/new.html.erb
<%= render Spina::UserInterface::ModalComponent.new(size: "max-w-screen-md h-full md:h-96") do %>
<div class="h-full" data-controller="embed" data-trix-target="<%= params[:target] %>">
<%= turbo_frame_tag :trix_attachment_html, class: 'hidden', data: {embeddables_target: "html", action: "embed-tag:embedded->embed#insertEmbeddable embed-tag:embedded->modal#close"} %>
<%= turbo_frame_tag :embeddable_form do %>
<div class="flex h-full">
<div class="p-4 w-64 bg-gray-100 md:bg-opacity-50">
<div class="text-xs font-medium text-gray-600 mb-2">
<%=t "spina.embeds.embed_a_component" %>
</div>
<% embeddables.each do |embeddable| %>
<% if embeddable.name == @embeddable.class.name %>
<% classes = "font-medium w-full text-sm px-3 py-2 rounded-lg flex items-center text-gray-900 bg-spina-dark bg-opacity-20" %>
<% else %>
<% classes = "font-medium w-full text-sm px-3 py-2 rounded-lg flex items-center text-gray-600 hover:bg-gray-200 bg-opacity-100 hover:bg-gray-200" %>
<% end %>
<%= link_to spina.new_admin_embed_path(embed_type: embeddable.name), class: classes, data: {turbo_frame: :embeddable_form} do %>
<%= heroicon(embeddable.icon, style: :solid, class: 'w-5 h-5 mr-2 text-spina-light') %>
<%= embeddable.model_name.human %>
<% end %>
<% end %>
</div>
<div class="bg-white flex-1">
<%= form_with model: @embeddable, scope: :embeddable, url: spina.admin_embeds_path, class: 'h-full' do |f| %>
<%= hidden_field_tag :embed_type, @embeddable.class.name %>
<div class="h-full relative">
<div class="flex-1 p-5 h-full pb-20 overflow-scroll">
<%= render partial: @embeddable.to_fields_path, locals: {f: f} %>
</div>
<div class="w-full flex backdrop-filter backdrop-blur-lg absolute bottom-0 justify-end p-5 py-4 border-t border-gray-200">
<%= button_tag type: :submit, class: 'btn btn-primary' do %>
<%= heroicon('plus', style: :mini, class: 'w-4 h-4 -ml-1 mr-1') %>
<%=t "spina.embeds.embed_component" %>
<% end %>
</div>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
<% end %>