49 lines
2.6 KiB
PHP
49 lines
2.6 KiB
PHP
@props(['name', 'label' => 'Foto Profil', 'default' => null, 'placeholder' => null])
|
|
|
|
<div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4">
|
|
<h3 class="text-lg font-bold text-slate-800 border-b border-slate-100 pb-3">{{ $label }}</h3>
|
|
|
|
<div x-data="{ photoPreview: null }" class="space-y-4">
|
|
<div class="flex flex-col items-center">
|
|
|
|
<template x-if="!photoPreview">
|
|
@if($default)
|
|
<img src="{{ $default }}" class="w-32 h-32 rounded-2xl object-cover border-2 border-primary ring-4 ring-primary/10 shadow-lg">
|
|
@else
|
|
<div class="w-32 h-32 rounded-2xl bg-slate-100 border-2 border-dashed border-slate-300 flex items-center justify-center text-slate-400">
|
|
|
|
<svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
</div>
|
|
@endif
|
|
</template>
|
|
|
|
<template x-if="photoPreview">
|
|
<img :src="photoPreview" class="w-32 h-32 rounded-2xl object-cover border-2 border-primary ring-4 ring-primary/10 shadow-lg">
|
|
</template>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<input type="file" name="{{ $name }}" accept="image/*" class="hidden" id="{{ $name }}-input"
|
|
@change="const file = $event.target.files[0];
|
|
if (file) {
|
|
if (file.size > 5242880) {
|
|
Swal.fire('Error', 'Ukuran file maksimal 5MB', 'error');
|
|
$event.target.value = '';
|
|
return;
|
|
}
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => { photoPreview = e.target.result; };
|
|
reader.readAsDataURL(file);
|
|
}">
|
|
<label for="{{ $name }}-input" class="block w-full text-center px-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm font-semibold text-slate-600 hover:bg-slate-100 cursor-pointer transition-all">
|
|
Pilih Foto
|
|
</label>
|
|
</div>
|
|
|
|
@error($name)
|
|
<p class="text-red-500 text-xs mt-1 text-center">{{ $message }}</p>
|
|
@enderror
|
|
<p class="text-[10px] text-slate-400 text-center uppercase tracking-wider font-bold">Format: JPG, PNG (Maks. 5MB)</p>
|
|
</div>
|
|
</div>
|