KTVRemote/resources/views/livewire/modals/sticker-modal.blade.php
allen.yan d13b00cb1f 202508281054
加入心情留言與貼圖
加入音控介面
修正 Button 載圖會太大的問題
2025-08-28 11:57:13 +08:00

28 lines
1.1 KiB
PHP

<x-modal id="sticker-modal" wire:model.defer="showModal" persistent>
<x-card class="border border-gray-200">
<x-slot name="action">
<button class="cursor-pointer p-1 rounded-full focus:outline-none focus:outline-hidden focus:ring-2 focus:ring-secondary-200 text-secondary-300"
wire:click="closeModal"
tabindex="-1"
>
<x-dynamic-component :component="WireUi::component('icon')" name="x-mark" class="w-5 h-5" />
</button>
</x-slot>
<x-slot name="title">
選擇貼圖
</x-slot>
<div class="flex flex-wrap gap-2 max-h-64 overflow-y-auto">
@foreach($stickers as $sticker)
<img
src="{{ asset('superstar-pic/'.$sticker) }}"
wire:click="select('{{ $sticker }}')"
class="w-16 h-16 object-contain bg-white border-2 rounded cursor-pointer
{{ $selectedSticker === $sticker ? 'border-pink-500' : 'border-transparent' }}"
>
@endforeach
</div>
</x-card>
</x-modal>