| 1 | <html> |
| 2 | |
| 3 | <head> |
| 4 | <title>Drag Drop Overlay</title> |
| 5 | |
| 6 | <script type="module"> |
| 7 | import { store } from "/components/chat/attachments/attachmentsStore.js"; |
| 8 | </script> |
| 9 | </head> |
| 10 | |
| 11 | <body> |
| 12 | <!-- Drag and Drop Overlay --> |
| 13 | <div x-data> |
| 14 | <template x-if="$store.chatAttachments"> |
| 15 | <div x-cloak x-show="$store.chatAttachments.dragDropOverlayVisible" id="dragdrop-overlay" |
| 16 | x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" |
| 17 | x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-300" |
| 18 | x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="dragdrop-overlay"> |
| 19 | <img src="public/dragndrop.svg" alt="Drop files" class="dragdrop-icon"> |
| 20 | <div class="dragdrop-text">Drop files or folders to attach them to your message</div> |
| 21 | <div class="dragdrop-subtext"></div> |
| 22 | </div> |
| 23 | </template> |
| 24 | </div> |
| 25 | |
| 26 | </body> |
| 27 | |
| 28 | </html> |