66 lines
2.3 KiB
Plaintext
66 lines
2.3 KiB
Plaintext
package seasonsview
|
|
|
|
// NewSeasonModal renders a modal containing the new season form
|
|
// This is used on the seasons list page for a better UX
|
|
templ NewSeasonModal() {
|
|
<div
|
|
x-data="{ open: false }"
|
|
x-show="open"
|
|
x-cloak
|
|
@open-new-season-modal.window="open = true"
|
|
@close-new-season-modal.window="open = false"
|
|
class="fixed inset-0 z-50 overflow-y-auto"
|
|
aria-labelledby="modal-title"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
>
|
|
<!-- Background overlay -->
|
|
<div
|
|
x-show="open"
|
|
x-transition:enter="ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="ease-in duration-200"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
class="fixed inset-0 bg-base/75 transition-opacity"
|
|
@click="open = false"
|
|
></div>
|
|
<!-- Modal panel -->
|
|
<div class="flex min-h-full items-center justify-center p-4">
|
|
<div
|
|
x-show="open"
|
|
x-transition:enter="ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave="ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
class="relative transform overflow-hidden rounded-xl bg-mantle border border-surface0 shadow-xl transition-all w-full max-w-lg"
|
|
@click.stop
|
|
>
|
|
<!-- Header -->
|
|
<div class="px-6 py-4 border-b border-surface0">
|
|
<div class="flex justify-between items-center">
|
|
<h3 class="text-xl font-bold text-text" id="modal-title">Create New Season</h3>
|
|
<button
|
|
type="button"
|
|
@click="open = false"
|
|
class="text-subtext0 hover:text-text transition-colors"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<p class="text-sm text-subtext0 mt-1">Add a new season to the system. All fields are required.</p>
|
|
</div>
|
|
<!-- Form content -->
|
|
<div class="p-6">
|
|
@NewFormModal()
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|