28 lines
1.1 KiB
PHP
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>
|