VibeCoderzVibeCoderz
Telegram
All Prompts
Upload document preview

Upload document

UI компонент для загрузки документов. Позволяет пользователям легко добавлять файлы на сайт или в приложение.

Prompt

<div class="doc-row bg-white border-neutral-200 border rounded-md pt-3 pr-3 pb-3 pl-3" data-type="upload" data-copies="2" data-attached="false">
      <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr,240px] gap-3 items-start">
        <div class="flex items-start gap-3">
          <div class="relative flex-shrink-0 mt-0.5">
            <input id="doc-peb" type="checkbox" class="sr-only peer">
            <div class="w-5 h-5 border-2 border-neutral-300 rounded flex items-center justify-center transition-all peer-checked:bg-[#649DAD] peer-checked:border-[#649DAD] peer-focus:ring-2 peer-focus:ring-[#649DAD]/20">
              <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0L4 12.414a1 1 0 111.414-1.414L8 13.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
            </div>
          </div>
          <label for="doc-peb" class="cursor-pointer text-sm font-medium text-neutral-900">Formulaire PEB</label>
        </div>
        <div class="text-[13px] text-neutral-600">Si applicable. Mentionner la référence du dossier PEB.</div>
        <div class="flex flex-col items-start sm:items-end gap-1">
          <div class="text-[12px] text-neutral-600">2 exemplaires</div>
          <div class="text-[12px] text-neutral-500" data-status=""></div>
          <div class="flex items-center gap-2">
            <input type="file" class="hidden" data-file="">
            <button type="button" data-action="upload" class="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-xs border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><path d="M7 10l5-5 5 5"></path><path d="M12 15V3"></path></svg>
              Uploader
            </button>
            <button type="button" data-action="clear" class="hidden inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50">Supprimer</button>
          </div>
        </div>
      </div>
    </div>
All Prompts