mirror of
https://github.com/fly-apps/live_beats.git
synced 2024-05-16 16:22:42 +00:00
7461256268
The focus_wrap function component (and hook) can be used to focus wrap any content. The focus and focus_closest JS functions were added to programmtaically focus an element on the client or find the next element or previous element sibling when an action is taken that requires moving focus to cloest item. Co-authored-by: Nolan Darilek <nolan@thewordnerd.info>
67 lines
3 KiB
Plaintext
67 lines
3 KiB
Plaintext
<div>
|
|
<p class="inline text-gray-500 text-sm">(songs expire every six hours)</p>
|
|
|
|
<.form
|
|
for={:songs}
|
|
id="song-form"
|
|
class="space-y-8"
|
|
phx-target={@myself}
|
|
phx-change="validate"
|
|
phx-submit="save">
|
|
|
|
<div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
|
|
<div class="space-y-2 sm:space-y-2">
|
|
<%= for {{ref, changeset}, i} <- Enum.with_index(@changesets) do %>
|
|
<.live_component id={ref} module={SongEntryComponent} changeset={changeset} index={i} />
|
|
<% end %>
|
|
|
|
<!-- upload -->
|
|
<div class="sm:grid sm:border-t sm:border-gray-200 sm:pt-5">
|
|
<div class="mt-1 sm:mt-0" phx-drop-target={@uploads.mp3.ref}>
|
|
<%= if Enum.any?(@error_messages) do %>
|
|
<div class="rounded-md bg-red-50 p-4 mb-2">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<.icon name={:x_circle} class="h-5 w-5 text-red-400"/>
|
|
</div>
|
|
<div class="ml-3">
|
|
<h3 class="text-sm font-medium text-red-800">
|
|
Oops!
|
|
</h3>
|
|
<div class="mt-2 text-sm text-red-700">
|
|
<ul role="list" class="list-disc pl-5 space-y-1">
|
|
<%= for {label, kind} <- @error_messages do %>
|
|
<li><.file_error label={label} kind={kind} /></li>
|
|
<% end %>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="max-w-lg flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
|
|
<div class="space-y-1 text-center">
|
|
<svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
|
|
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
</svg>
|
|
<div class="flex text-sm text-gray-600">
|
|
<label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
|
|
<span phx-click={js_exec("##{@uploads.mp3.ref}", "click", [])}>Upload files</span>
|
|
<%= live_file_input @uploads.mp3, class: "sr-only", tabindex: "0" %>
|
|
</label>
|
|
<p class="pl-1">or drag and drop</p>
|
|
</div>
|
|
<p class="text-xs text-gray-500">
|
|
MP3s up to 20MB
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /upload -->
|
|
</div>
|
|
</div>
|
|
</.form>
|
|
</div>
|