38d429e5d5
add tooltip to sidebar buttons remove profile for admin fix mobile menu not opening in home page fix deal image input modal size in mobile view make image scrollable in input modal fix explore page filters are not clickable when recent search is maxed out change UI for the recent searches add seeder for categories improve deal card ui in broker dashboard
52 lines
2.1 KiB
PHP
52 lines
2.1 KiB
PHP
@props(['name' => '', 'label' => '', 'allowed' => '', 'size' => '1', 'required' => false, 'value' => ''])
|
|
|
|
<div class="flex flex-col space-y-2">
|
|
@if($label !== '')
|
|
<label class="text-sm font-bold" for="{{$name}}">
|
|
{{$label}} @if($required && !$value)
|
|
*
|
|
@endif
|
|
</label>
|
|
@endif
|
|
|
|
<div class="relative group">
|
|
<div
|
|
class="p-8 border-2 border-dashed border-accent-600/70 rounded-lg flex flex-col space-y-2 justify-center items-center overflow-hidden min-h-40 bg-gray-50 relative">
|
|
|
|
<img src="{{ $value }}" id="preview-image" alt="" onerror="this.style.display='none'"
|
|
class="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:opacity-10 transition-opacity">
|
|
|
|
<x-heroicon-o-arrow-up-tray class="w-8 text-accent-600/70 z-10"/>
|
|
<p class="text-sm text-accent-600/90 font-bold z-10">
|
|
{{ $value ? 'Click to replace current image' : 'Click to upload or drag and drop' }}
|
|
</p>
|
|
<p class="text-xs text-accent-600/70 z-10">{{strtoupper($allowed)}} up to {{$size}}MB</p>
|
|
</div>
|
|
|
|
<input
|
|
name="{{$name}}"
|
|
id="image-input"
|
|
class="opacity-0 absolute w-full h-full top-0 left-0 cursor-pointer z-20"
|
|
type="file"
|
|
accept="{{ $allowed ? '.' . str_replace(',', ',.', $allowed) : 'image/*' }}"
|
|
onchange="upload(10)"
|
|
{{ $required && !$value ? 'required' : '' }}
|
|
/>
|
|
</div>
|
|
|
|
<x-ui.inline-error :name="$name"/>
|
|
</div>
|
|
|
|
<dialog id="image-modal"
|
|
class="fixed w-max max-h-[90vh] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-4 shadow-lg">
|
|
<div class="overflow-scroll max-h-[75vh]">
|
|
<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')
|