<div x-data="{ avatar: null }">
    <div class="relative w-32 h-32 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
        <img x-show="avatar" :src="avatar" class="w-full h-full object-cover">
        <label class="absolute bottom-0 right-0 bg-blue-600 text-white p-2 rounded-full cursor-pointer">
            <input type="file" class="hidden" accept="image/*" @change="
                const file = $event.target.files[0];
                if (file) { const reader = new FileReader(); reader.onload = (e) => avatar = e.target.result; reader.readAsDataURL(file); }
            ">
        </label>
    </div>
</div>