homeos/resources/views/livewire/modals/create-room.blade.php

34 lines
2.0 KiB
PHP

<form wire:submit="save">
<x-modal :title="__('rooms.add_title')" icon="rooms">
<div class="p-5 flex flex-col gap-4">
<div class="flex flex-col gap-1.5">
<label for="r-name" class="text-[12px] font-semibold text-ink-2">{{ __('rooms.name') }}</label>
<input wire:model="name" id="r-name" type="text" autofocus
class="w-full rounded-lg bg-raised border border-line px-3 py-2.5 text-sm text-ink outline-none focus:border-accent focus:ring-1 focus:ring-accent">
@error('name') <p class="text-[12px] text-offline">{{ $message }}</p> @enderror
</div>
<div class="flex flex-col gap-1.5">
<label class="text-[12px] font-semibold text-ink-2">{{ __('rooms.icon') }}</label>
<div class="flex flex-wrap gap-1.5">
@foreach (\App\Models\Room::ICON_CHOICES as $ic)
<button type="button" wire:click="$set('icon', '{{ $ic }}')"
@class([
'grid place-items-center w-9 h-9 rounded-lg border transition-colors',
'border-accent bg-accent/15 text-accent' => $icon === $ic,
'border-line-soft bg-raised text-ink-2 hover:text-ink' => $icon !== $ic,
])>
<x-icon :name="$ic" :size="17" />
</button>
@endforeach
</div>
</div>
</div>
<x-slot:footer>
<button type="button" wire:click="closeModal" class="rounded-lg border border-line px-3.5 py-2 text-[13px] font-semibold text-ink-2 hover:text-ink hover:bg-raised transition-colors">{{ __('common.cancel') }}</button>
<button type="submit" class="rounded-lg bg-accent px-3.5 py-2 text-[13px] font-bold text-base hover:brightness-110 transition-[filter]">{{ __('rooms.add') }}</button>
</x-slot:footer>
</x-modal>
</form>