Activity Feed

<!--
  Day 107: Activity Feed

  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
-->

<!-- Activity Feed -->
<div
  class="relative mx-auto w-full max-w-md rounded-3xl border border-zinc-200 bg-white ring-4 ring-zinc-300/25"
>
  <div class="flex flex-col">
    <!-- Header -->
    <div
      class="flex items-center justify-between border-b border-zinc-100 px-5 pt-4 pb-2"
    >
      <h3 class="text-lg font-bold">Activity Feed</h3>
      <div class="flex flex-none items-center gap-1">
        <button
          type="button"
          class="group flex items-center gap-1 rounded-lg px-2 py-1 text-xs font-medium text-zinc-600 hover:bg-zinc-50 active:bg-zinc-100"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="hi-micro hi-check inline-block size-4 opacity-50 group-hover:opacity-100 group-active:text-indigo-500"
          >
            <path
              fill-rule="evenodd"
              d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
              clip-rule="evenodd"
            />
          </svg>
          <span>Mark all as read</span>
        </button>
      </div>
    </div>
    <!-- END Header -->

    <!-- Activity Items -->
    <div class="divide-y divide-dashed divide-zinc-200/60">
      <!-- Activity Item -->
      <div class="flex items-start gap-4 px-5 py-4 hover:bg-zinc-50">
        <div class="relative flex-none">
          <div
            class="inline-flex size-9 items-center justify-center rounded-full bg-zinc-100 text-xs font-medium text-zinc-500"
          >
            SJ
          </div>
          <span
            class="absolute -right-1.5 -bottom-1.5 flex size-5 items-center justify-center rounded-full bg-blue-500 ring-2 ring-white"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="hi-micro hi-chat-bubble-bottom-center-text inline-block size-4 text-white"
            >
              <path
                fill-rule="evenodd"
                d="M1 8.74c0 .983.713 1.825 1.69 1.943.904.108 1.817.19 2.737.243.363.02.688.231.85.556l1.052 2.103a.75.75 0 0 0 1.342 0l1.052-2.103c.162-.325.487-.535.85-.556.92-.053 1.833-.134 2.738-.243.976-.118 1.689-.96 1.689-1.942V4.259c0-.982-.713-1.824-1.69-1.942a44.45 44.45 0 0 0-10.62 0C1.712 2.435 1 3.277 1 4.26v4.482Zm3-3.49a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5A.75.75 0 0 1 4 5.25ZM4.75 7a.75.75 0 0 0 0 1.5h2.5a.75.75 0 0 0 0-1.5h-2.5Z"
                clip-rule="evenodd"
              />
            </svg>
          </span>
        </div>
        <div class="grow">
          <p class="text-sm/relaxed text-zinc-900">
            <span class="font-semibold">Sarah Johnson</span> commented on your
            task
            <span class="font-medium text-zinc-700">"Website Redesign"</span>
          </p>
          <p class="mt-1 text-xs font-medium text-zinc-500">2 minutes ago</p>
        </div>
      </div>
      <!-- END Activity Item -->

      <!-- Activity Item -->
      <div class="flex items-start gap-4 px-5 py-4 hover:bg-zinc-50">
        <div class="relative flex-none">
          <div
            class="inline-flex size-9 items-center justify-center rounded-full bg-zinc-100 text-xs font-medium text-zinc-500"
          >
            AC
          </div>
          <span
            class="absolute -right-1.5 -bottom-1.5 flex size-5 items-center justify-center rounded-full bg-emerald-500 ring-2 ring-white"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="hi-micro hi-check inline-block size-4 text-white"
            >
              <path
                fill-rule="evenodd"
                d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
                clip-rule="evenodd"
              />
            </svg>
          </span>
        </div>
        <div class="grow">
          <p class="text-sm/relaxed text-zinc-900">
            <span class="font-semibold">Alex Chen</span> completed
            <span class="font-medium text-zinc-700">"User Authentication"</span>
          </p>
          <p class="mt-1 text-xs font-medium text-zinc-500">15 minutes ago</p>
        </div>
      </div>
      <!-- END Activity Item -->

      <!-- Activity Item -->
      <div class="flex items-start gap-4 px-5 py-4 hover:bg-zinc-50">
        <div class="relative flex-none">
          <div
            class="inline-flex size-9 items-center justify-center rounded-full bg-zinc-100 text-xs font-medium text-zinc-500"
          >
            MB
          </div>
          <span
            class="absolute -right-1.5 -bottom-1.5 flex size-5 items-center justify-center rounded-full bg-indigo-500 ring-2 ring-white"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="hi-micro hi-plus inline-block size-4 text-white"
            >
              <path
                d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
              />
            </svg>
          </span>
        </div>
        <div class="grow">
          <p class="text-sm/relaxed text-zinc-900">
            <span class="font-semibold">Michael Brown</span> created a new task
            <span class="font-medium text-zinc-700">"API Integration"</span>
          </p>
          <p class="mt-1 text-xs font-medium text-zinc-500">1 hour ago</p>
        </div>
      </div>
      <!-- END Activity Item -->

      <!-- Activity Item -->
      <div class="flex items-start gap-4 px-5 py-4 hover:bg-zinc-50">
        <div class="relative flex-none">
          <div
            class="inline-flex size-9 items-center justify-center rounded-full bg-zinc-100 text-xs font-medium text-zinc-500"
          >
            EW
          </div>
          <span
            class="absolute -right-1.5 -bottom-1.5 flex size-5 items-center justify-center rounded-full bg-amber-500 ring-2 ring-white"
          >
            <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 text-white"
            >
              <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>
          </span>
        </div>
        <div class="grow">
          <p class="text-sm/relaxed text-zinc-900">
            <span class="font-semibold">Emma Wilson</span> uploaded 3 files to
            <span class="font-medium text-zinc-700">"Design Assets"</span>
          </p>
          <p class="mt-1 text-xs font-medium text-zinc-500">3 hours ago</p>
        </div>
      </div>
      <!-- END Activity Item -->

      <!-- Activity Item -->
      <div class="flex items-start gap-4 px-5 py-4 hover:bg-zinc-50">
        <div class="relative flex-none">
          <div
            class="inline-flex size-9 items-center justify-center rounded-full bg-zinc-100 text-xs font-medium text-zinc-500"
          >
            DL
          </div>
          <span
            class="absolute -right-1.5 -bottom-1.5 flex size-5 items-center justify-center rounded-full bg-pink-500 ring-2 ring-white"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="hi-micro hi-heart inline-block size-4 text-white"
            >
              <path
                d="M2 6.342a3.375 3.375 0 0 1 6-2.088 3.375 3.375 0 0 1 5.997 2.26c-.063 2.134-1.618 3.76-2.955 4.784a14.437 14.437 0 0 1-2.676 1.61c-.02.01-.038.017-.05.022l-.014.006-.004.002h-.002a.75.75 0 0 1-.592.001h-.002l-.004-.003-.015-.006a5.528 5.528 0 0 1-.232-.107 14.395 14.395 0 0 1-2.535-1.557C3.564 10.22 1.999 8.558 1.999 6.38L2 6.342Z"
              />
            </svg>
          </span>
        </div>
        <div class="grow">
          <p class="text-sm/relaxed text-zinc-900">
            <span class="font-semibold">David Lee</span> liked your comment on
            <span class="font-medium text-zinc-700">"Q4 Planning"</span>
          </p>
          <p class="mt-1 text-xs font-medium text-zinc-500">5 hours ago</p>
        </div>
      </div>
      <!-- END Activity Item -->

      <!-- Activity Item -->
      <div class="flex items-start gap-4 px-5 py-4 hover:bg-zinc-50">
        <div class="relative flex-none">
          <div
            class="inline-flex size-9 items-center justify-center rounded-full bg-zinc-100 text-xs font-medium text-zinc-500"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="hi-micro hi-users inline-block size-4"
            >
              <path
                d="M8.5 4.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10.9 12.006c.11.542-.348.994-.9.994H2c-.553 0-1.01-.452-.902-.994a5.002 5.002 0 0 1 9.803 0ZM14.002 12h-1.59a2.556 2.556 0 0 0-.04-.29 6.476 6.476 0 0 0-1.167-2.603 3.002 3.002 0 0 1 3.633 1.911c.18.522-.283.982-.836.982ZM12 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
              />
            </svg>
          </div>
          <span
            class="absolute -right-1.5 -bottom-1.5 flex size-5 items-center justify-center rounded-full bg-indigo-500 ring-2 ring-white"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="hi-micro hi-plus inline-block size-4 text-white"
            >
              <path
                d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
              />
            </svg>
          </span>
        </div>
        <div class="grow">
          <p class="text-sm/relaxed text-zinc-900">
            <span class="font-semibold">3 new members</span> joined the
            <span class="font-medium text-zinc-700">"Development Team"</span>
          </p>
          <p class="mt-1 text-xs font-medium text-zinc-500">Yesterday</p>
        </div>
      </div>
      <!-- END Activity Item -->

      <!-- Activity Item -->
      <div class="flex items-start gap-4 px-5 py-4 hover:bg-zinc-50">
        <div class="relative flex-none">
          <div
            class="inline-flex size-9 items-center justify-center rounded-full bg-zinc-100 text-xs font-medium text-zinc-500"
          >
            JM
          </div>
          <span
            class="absolute -right-1.5 -bottom-1.5 flex size-5 items-center justify-center rounded-full bg-rose-500 ring-2 ring-white"
          >
            <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 text-white"
            >
              <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>
          </span>
        </div>
        <div class="grow">
          <p class="text-sm/relaxed text-zinc-900">
            <span class="font-semibold">Jessica Martinez</span> removed
            <span class="font-medium text-zinc-700">"Legacy Code Cleanup"</span>
          </p>
          <p class="mt-1 text-xs font-medium text-zinc-500">2 days ago</p>
        </div>
      </div>
      <!-- END Activity Item -->
    </div>
    <!-- END Activity Items -->

    <!-- Footer -->
    <div class="flex items-center justify-center border-t border-zinc-100 p-4">
      <button
        type="button"
        class="flex w-full items-center justify-center gap-2 rounded-xl border border-zinc-200 bg-white px-4 py-3 text-center text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:ring-2 focus:ring-indigo-500/50 focus:ring-offset-2 focus:outline-none active:bg-zinc-100"
      >
        <span>Load more..</span>
      </button>
    </div>
    <!-- END Footer -->
  </div>
</div>
<!-- END Activity Feed -->