Storage Usage Card

<!--
  Day 115: Storage usage 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
-->

<!-- Storage Usage 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 class="flex items-center gap-3">
      <div
        class="flex size-11 flex-none items-center justify-center rounded-xl bg-indigo-50 text-indigo-600"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="hi-solid hi-circle-stack inline-block size-6"
        >
          <path
            d="M21 6.375c0 2.692-4.03 4.875-9 4.875S3 9.067 3 6.375 7.03 1.5 12 1.5s9 2.183 9 4.875Z"
          />
          <path
            d="M12 12.75c2.685 0 5.19-.636 7.078-1.732a8.025 8.025 0 0 0 1.897-1.46c.018.162.025.327.025.492v2.25c0 2.692-4.03 4.875-9 4.875S3 14.992 3 12.3v-2.25c0-.164.007-.33.025-.492a8.025 8.025 0 0 0 1.897 1.46C6.81 12.114 9.315 12.75 12 12.75Z"
          />
          <path
            d="M12 18.75c2.685 0 5.19-.636 7.078-1.732a8.025 8.025 0 0 0 1.897-1.46c.018.162.025.327.025.492v2.25c0 2.692-4.03 4.875-9 4.875S3 20.992 3 18.3v-2.25c0-.164.007-.33.025-.492a8.025 8.025 0 0 0 1.897 1.46C6.81 18.114 9.315 18.75 12 18.75Z"
          />
        </svg>
      </div>
      <div>
        <h3 class="text-sm font-semibold text-zinc-900">Storage</h3>
        <p class="text-xs text-zinc-500">Team Workspace</p>
      </div>
    </div>
    <button
      type="button"
      class="rounded-lg px-3 py-1.5 text-xs font-semibold text-indigo-600 hover:bg-indigo-50 active:bg-indigo-100"
    >
      Upgrade
    </button>
  </div>
  <!-- END Header -->

  <!-- Usage -->
  <div class="mt-6 border-t border-dashed border-zinc-200 pt-6">
    <div class="flex items-end justify-between">
      <div>
        <p class="text-3xl font-bold tracking-tight text-zinc-900">
          78.4 <span class="text-lg font-semibold text-zinc-500">GB</span>
        </p>
        <p class="mt-1 text-xs text-zinc-500">of 120 GB used</p>
      </div>
      <span
        class="rounded-full bg-amber-50 px-2.5 py-1 text-xs font-semibold text-amber-700 ring-1 ring-amber-200/70 ring-inset"
        >65%</span
      >
    </div>
  </div>
  <!-- END Usage -->

  <!-- Progress -->
  <div class="mt-4">
    <div
      class="flex h-2.5 w-full overflow-hidden rounded-full bg-zinc-100"
      role="progressbar"
      aria-valuenow="65"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-label="Storage used"
    >
      <span class="block h-full bg-indigo-400" style="width: 28%"></span>
      <span class="block h-full bg-emerald-400" style="width: 18%"></span>
      <span class="block h-full bg-rose-400" style="width: 12%"></span>
      <span class="block h-full bg-amber-400" style="width: 7%"></span>
    </div>
  </div>
  <!-- END Progress -->

  <!-- Breakdown -->
  <div
    class="mt-6 rounded-2xl bg-zinc-50 p-5 ring-1 ring-zinc-200/70 ring-inset"
  >
    <ul class="flex flex-col gap-3">
      <li class="flex items-center gap-3">
        <span class="size-2.5 flex-none rounded-full bg-indigo-400"></span>
        <span class="grow text-sm text-zinc-600">Documents</span>
        <span class="w-20 text-right text-sm font-semibold text-zinc-900"
          >33.6 GB</span
        >
      </li>
      <li class="flex items-center gap-3">
        <span class="size-2.5 flex-none rounded-full bg-emerald-400"></span>
        <span class="grow text-sm text-zinc-600">Photos</span>
        <span class="w-20 text-right text-sm font-semibold text-zinc-900"
          >21.2 GB</span
        >
      </li>
      <li class="flex items-center gap-3">
        <span class="size-2.5 flex-none rounded-full bg-rose-400"></span>
        <span class="grow text-sm text-zinc-600">Videos</span>
        <span class="w-20 text-right text-sm font-semibold text-zinc-900"
          >14.8 GB</span
        >
      </li>
      <li class="flex items-center gap-3">
        <span class="size-2.5 flex-none rounded-full bg-amber-400"></span>
        <span class="grow text-sm text-zinc-600">Other</span>
        <span class="w-20 text-right text-sm font-semibold text-zinc-900"
          >8.8 GB</span
        >
      </li>
    </ul>
  </div>
  <!-- END Breakdown -->

  <!-- Footer -->
  <div
    class="mt-6 flex items-center justify-between border-t border-dashed border-zinc-200 pt-5"
  >
    <div class="flex items-center gap-2 text-xs text-zinc-500">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
        fill="currentColor"
        class="hi-micro hi-clock inline-block size-4 text-zinc-400"
      >
        <path
          fill-rule="evenodd"
          d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-6-3.25a.75.75 0 0 0-1.5 0v3.5c0 .414.336.75.75.75h3a.75.75 0 0 0 0-1.5H9V4.75Z"
          clip-rule="evenodd"
        />
      </svg>
      <span>Synced 2 minutes ago</span>
    </div>
    <a
      href="javascript:void(0)"
      class="inline-flex items-center gap-1 text-xs font-semibold text-zinc-700 hover:text-indigo-600"
    >
      <span>Manage</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
        fill="currentColor"
        class="hi-micro hi-arrow-right inline-block size-3.5"
      >
        <path
          fill-rule="evenodd"
          d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
          clip-rule="evenodd"
        />
      </svg>
    </a>
  </div>
  <!-- END Footer -->
</div>
<!-- END Storage Usage Card -->