f43f92f365
- add deal category migration - add deals migration and model - add form to create deal - add image preview modal when uploading the image - refactor UI components to support `required` attribute - refactor input component to support description - fix some UI components does not support old values - fix some UI components does not show error messages
45 lines
1.5 KiB
PHP
45 lines
1.5 KiB
PHP
@props(['name' => '', 'label' => '', 'allowed' => '', 'size' => '1', 'required' => false])
|
|
|
|
<div class="flex flex-col space-y-2">
|
|
@if($label !== '')
|
|
<label class="text-sm font-bold" for="{{$name}}">
|
|
{{$label}}
|
|
@if($required)
|
|
*
|
|
@endif
|
|
</label>
|
|
@endif
|
|
<div class="relative">
|
|
<div
|
|
class="p-8 border-2 border-dashed border-accent-600/70 rounded-lg flex flex-col space-y-2 justify-center items-center">
|
|
<x-heroicon-o-arrow-up-tray class="w-8 text-accent-600/70"/>
|
|
<p class="text-sm text-accent-600/90 font-bold">Click to upload or drag and drop</p>
|
|
<p class="text-xs text-accent-600/70">{{strtoupper($allowed)}} upto {{$size}}MB</p>
|
|
</div>
|
|
<input
|
|
name="{{$name}}"
|
|
id="image-input"
|
|
class="opacity-0 absolute w-full h-full top-0 left-0"
|
|
type="file"
|
|
onchange="upload(10)"
|
|
accept="image/{{$allowed}}"
|
|
/>
|
|
<x-ui.inline-error :name="$name"/>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<dialog id="image-modal"
|
|
class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-4 shadow-lg">
|
|
<div>
|
|
<img src="" alt="" id="image-placeholder">
|
|
</div>
|
|
<div class="flex space-x-4 mt-6 justify-end">
|
|
<button type="button" autofocus id="cancel-modal" class="ui-btn">Close</button>
|
|
<button type="button" class="ui-btn ui-btn-neutral" id="close-modal">Submit</button>
|
|
</div>
|
|
</dialog>
|
|
|
|
|
|
@vite('resources/js/image-input.js')
|