Friends Activity Feed Card

<article
  class="ring-1 ring-stone-200 shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)] bg-white rounded-3xl pt-6 pr-6 pb-6 pl-6">
  <div class="mb-4 flex items-start justify-between">
    <div class="">
      <h2 class="text-lg font-semibold tracking-tight">Friends</h2>
      <p class="text-sm text-stone-500">Recent activity</p>
    </div>
    <button class="rounded-xl p-2 text-stone-500 hover:bg-stone-50">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users h-4 w-4"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg>
              </button>
  </div>

  <div class="space-y-3">
    <div class="flex items-center gap-3">
      <img class="h-8 w-8 rounded-full object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c6c3834b-2622-431b-8e32-b6ab8e8dbfc9_800w.jpg" alt="">
      <div class="flex-1 min-w-0">
        <p class="text-sm font-medium truncate">Sarah Chen</p>
        <p class="text-xs text-stone-500">Completed 10km run</p>
      </div>
      <span class="text-xs text-stone-400">2h</span>
    </div>

    <div class="flex items-center gap-3">
      <img class="h-8 w-8 rounded-full object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/eac34b73-c643-4433-82f0-5ec79e8f5fc9_320w.jpg" alt="" style="">
      <div class="flex-1 min-w-0">
        <p class="text-sm font-medium truncate">Mike Johnson</p>
        <p class="text-xs text-stone-500">New PR in deadlifts</p>
      </div>
      <span class="text-xs text-stone-400">4h</span>
    </div>

    <div class="flex items-center gap-3">
      <img class="h-8 w-8 rounded-full object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e9f01031-12a2-4214-96af-13f1facd3e61_320w.jpg" alt="" style="">
      <div class="flex-1 min-w-0">
        <p class="text-sm font-medium truncate">Emma Davis</p>
        <p class="text-xs text-stone-500">Joined yoga challenge</p>
      </div>
      <span class="text-xs text-stone-400">6h</span>
    </div>
  </div>
</article>