| /** Fullscreen overlay shown (via the `body.drag` class) while a file is dragged. */ | |
| export function DropOverlay() { | |
| return ( | |
| <div | |
| className="drop-overlay pointer-events-none fixed inset-0 z-[200] flex items-center justify-center bg-[rgba(11,12,16,0.78)] opacity-0 backdrop-blur-sm transition-opacity duration-150 ease-fluid" | |
| aria-hidden="true" | |
| > | |
| <div className="flex flex-col items-center gap-3.5 rounded-card border-2 border-dashed border-accent bg-surface px-16 py-11 text-center shadow-[0_24px_60px_-24px_rgba(0,0,0,0.9)]"> | |
| <svg | |
| className="h-8 w-32 fill-none stroke-accent stroke-2 [stroke-linecap:round] [stroke-linejoin:round]" | |
| viewBox="0 0 120 32" | |
| aria-hidden="true" | |
| preserveAspectRatio="none" | |
| > | |
| <path d="M0 16 L8 16 L12 6 L18 26 L24 10 L30 22 L36 4 L42 28 L48 14 L54 18 L60 8 L66 24 L72 12 L78 20 L84 6 L90 26 L96 16 L104 16 L120 16" /> | |
| </svg> | |
| <p className="m-0 text-base text-muted"> | |
| Drop an <strong className="font-semibold text-content">audio file</strong> to | |
| transcribe | |
| </p> | |
| </div> | |
| </div> | |
| ); | |
| } | |