File Upload Card

<!--
  Day 122: File upload card

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- File Upload Card -->
<div
  class="mx-auto w-full max-w-md rounded-3xl bg-white p-6 shadow-sm ring-8 shadow-slate-500/10 ring-slate-900/5"
>
  <!-- Header -->
  <div class="flex items-start justify-between gap-4">
    <div>
      <h3 class="text-base font-semibold text-zinc-900">Upload files</h3>
      <p class="mt-0.5 text-xs text-zinc-500">
        Drag files in or browse to attach.
      </p>
    </div>
    <span
      class="inline-flex items-center gap-1.5 rounded-full bg-zinc-100 px-2.5 py-1 text-[10px] font-semibold whitespace-nowrap text-zinc-700 ring-1 ring-zinc-200/70 ring-inset"
    >
      <span class="size-1.5 rounded-full bg-indigo-500"></span>
      2 of 5
    </span>
  </div>
  <!-- END Header -->

  <!-- Dropzone -->
  <label
    for="file-upload"
    class="mt-5 flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-zinc-200 bg-zinc-50/70 px-6 py-8 text-center hover:border-indigo-300 hover:bg-indigo-50/40"
  >
    <span
      class="flex size-11 items-center justify-center rounded-2xl bg-white text-indigo-500 ring-1 ring-zinc-200/70 ring-inset"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
        class="hi-mini hi-cloud-arrow-up inline-block size-5"
      >
        <path
          d="M5.5 17a4.5 4.5 0 0 1-1.44-8.765 4.5 4.5 0 0 1 8.302-3.046 3.5 3.5 0 0 1 4.504 4.272A4 4 0 0 1 15 17H5.5Zm3.75-2.75a.75.75 0 0 0 1.5 0V9.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0l-3.25 3.5a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z"
        />
      </svg>
    </span>
    <p class="text-sm font-semibold text-zinc-900">
      <span class="text-indigo-600">Click to upload</span> or drag and drop
    </p>
    <p class="text-[11px] text-zinc-500">PNG, JPG, PDF or MP4 up to 25 MB</p>
    <input id="file-upload" name="file-upload" type="file" class="sr-only" />
  </label>
  <!-- END Dropzone -->

  <!-- Files -->
  <ul class="mt-5 flex flex-col gap-2">
    <!-- File: Done -->
    <li
      class="flex items-center gap-3 rounded-2xl border border-zinc-100 bg-white p-3"
    >
      <div
        class="flex size-10 flex-none items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 ring-1 ring-emerald-200/60 ring-inset"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-document-text inline-block size-4"
        >
          <path
            fill-rule="evenodd"
            d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm1 5.75A.75.75 0 0 1 5.75 7h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 5 7.75Zm0 3a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <div class="min-w-0 grow">
        <p class="truncate text-sm font-semibold text-zinc-900">
          brand-guidelines.pdf
        </p>
        <p
          class="mt-0.5 flex flex-wrap items-center gap-1.5 text-xs text-zinc-500"
        >
          <span>2.4 MB</span>
          <span class="size-0.5 rounded-full bg-zinc-300"></span>
          <span class="font-medium text-emerald-600"> Uploaded </span>
        </p>
      </div>
      <button
        type="button"
        aria-label="Remove file"
        class="flex flex-none items-center justify-center rounded-lg p-1.5 text-zinc-400 hover:bg-zinc-50 hover:text-zinc-700"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-trash inline-block size-4"
        >
          <path
            fill-rule="evenodd"
            d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z"
            clip-rule="evenodd"
          />
        </svg>
      </button>
    </li>
    <!-- END File: Done -->

    <!-- File: Uploading -->
    <li
      class="flex flex-col gap-3 rounded-2xl border border-indigo-100 bg-indigo-50/40 p-3"
    >
      <div class="flex items-center gap-3">
        <div
          class="flex size-10 flex-none items-center justify-center rounded-xl bg-white text-indigo-600 ring-1 ring-indigo-200/70 ring-inset"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="hi-micro hi-film inline-block size-4"
          >
            <path
              fill-rule="evenodd"
              d="M1 3.5A1.5 1.5 0 0 1 2.5 2h11A1.5 1.5 0 0 1 15 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 12.5v-9Zm1.5.25a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25v1a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1Zm3.75-.25a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.25-.25h-3.5ZM6 8.75a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.5a.25.25 0 0 1-.25.25h-3.5a.25.25 0 0 1-.25-.25v-3.5Zm5.75-5.25a.25.25 0 0 0-.25.25v1c0 .138.112.25.25.25h1.5a.25.25 0 0 0 .25-.25v-1a.25.25 0 0 0-.25-.25h-1.5ZM2.5 11.25a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25v1a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1Zm9.25-.25a.25.25 0 0 0-.25.25v1c0 .138.112.25.25.25h1.5a.25.25 0 0 0 .25-.25v-1a.25.25 0 0 0-.25-.25h-1.5ZM2.5 8.75a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25v1a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1Zm9.25-.25a.25.25 0 0 0-.25.25v1c0 .138.112.25.25.25h1.5a.25.25 0 0 0 .25-.25v-1a.25.25 0 0 0-.25-.25h-1.5ZM2.5 6.25A.25.25 0 0 1 2.75 6h1.5a.25.25 0 0 1 .25.25v1a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1ZM11.75 6a.25.25 0 0 0-.25.25v1c0 .138.112.25.25.25h1.5a.25.25 0 0 0 .25-.25v-1a.25.25 0 0 0-.25-.25h-1.5Z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <div class="min-w-0 grow">
          <p class="truncate text-sm font-semibold text-zinc-900">
            launch-recap.mp4
          </p>
          <p
            class="mt-0.5 flex flex-wrap items-center gap-1.5 text-xs text-zinc-500"
          >
            <span>18.6 MB</span>
            <span class="size-0.5 rounded-full bg-zinc-300"></span>
            <span class="font-medium text-indigo-600">64%</span>
            <span class="size-0.5 rounded-full bg-zinc-300"></span>
            <span>8 seconds left</span>
          </p>
        </div>
        <button
          type="button"
          aria-label="Cancel upload"
          class="flex flex-none items-center justify-center rounded-lg p-1.5 text-zinc-500 hover:bg-white hover:text-zinc-900"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="hi-micro hi-x-mark inline-block size-4"
          >
            <path
              d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"
            />
          </svg>
        </button>
      </div>
      <div
        role="progressbar"
        aria-valuenow="64"
        aria-valuemin="0"
        aria-valuemax="100"
        class="h-1.5 w-full overflow-hidden rounded-full bg-white ring-1 ring-zinc-200/60 ring-inset"
      >
        <div class="h-full w-[64%] rounded-full bg-indigo-500"></div>
      </div>
    </li>
    <!-- END File: Uploading -->

    <!-- File: Failed -->
    <li
      class="flex items-center gap-3 rounded-2xl border border-rose-100 bg-rose-50/60 p-3"
    >
      <div
        class="flex size-10 flex-none items-center justify-center rounded-xl bg-white text-rose-600 ring-1 ring-rose-200/70 ring-inset"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-exclamation-triangle inline-block size-4"
        >
          <path
            fill-rule="evenodd"
            d="M6.701 2.25c.577-1 2.02-1 2.598 0l5.196 9a1.5 1.5 0 0 1-1.299 2.25H2.804a1.5 1.5 0 0 1-1.3-2.25l5.197-9ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 1 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <div class="min-w-0 grow">
        <p class="truncate text-sm font-semibold text-zinc-900">
          team-photo-large.heic
        </p>
        <p class="mt-0.5 text-xs text-rose-600">
          Upload failed, file is over 25 MB.
        </p>
      </div>
      <button
        type="button"
        class="flex flex-none items-center gap-1.5 rounded-lg bg-white px-2.5 py-1.5 text-xs font-semibold text-zinc-900 ring-1 ring-zinc-200 ring-inset hover:bg-zinc-50 active:bg-white"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-arrow-path inline-block size-3.5 opacity-50"
        >
          <path
            fill-rule="evenodd"
            d="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.932.75.75 0 0 1-1.3-.75 6 6 0 0 1 9.44-1.242l.842.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44 1.241l-.84-.84v1.371a.75.75 0 0 1-1.5 0V9.591a.75.75 0 0 1 .75-.75H5.35a.75.75 0 0 1 0 1.5H3.98l.841.841a4.5 4.5 0 0 0 7.08-.932.75.75 0 0 1 1.025-.273Z"
            clip-rule="evenodd"
          />
        </svg>
        <span>Retry</span>
      </button>
    </li>
    <!-- END File: Failed -->
  </ul>
  <!-- END Files -->

  <!-- Footer -->
  <div
    class="mt-6 flex items-center justify-between gap-3 border-t border-dashed border-zinc-200 pt-5"
  >
    <p
      class="inline-flex items-center gap-1.5 text-[11px] font-medium text-zinc-500"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
        fill="currentColor"
        class="hi-micro hi-lock-closed inline-block size-4"
      >
        <path
          fill-rule="evenodd"
          d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7A1.5 1.5 0 0 0 3 8.5v5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 11.5 7V4.5A3.5 3.5 0 0 0 8 1Zm2 6V4.5a2 2 0 1 0-4 0V7h4Z"
          clip-rule="evenodd"
        />
      </svg>
      Files are encrypted at rest.
    </p>
    <div class="flex flex-none items-center gap-2">
      <button
        type="button"
        class="rounded-xl px-3 py-2 text-xs font-semibold text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 active:bg-zinc-100"
      >
        Cancel
      </button>
      <button
        type="button"
        class="inline-flex items-center gap-1.5 rounded-xl bg-zinc-900 px-3.5 py-2 text-xs font-semibold text-white hover:bg-zinc-700 active:bg-zinc-800"
      >
        <span>Save files</span>
      </button>
    </div>
  </div>
  <!-- END Footer -->
</div>
<!-- END File Upload Card -->