activity-feed component

<div class="activity-feed">
  <div class="activity-filters">
    <button class="activity-filter active" onclick="filterActivities('all', this)">
      All Activity
    </button>
    <button class="activity-filter" onclick="filterActivities('comments', this)">Comments</button>
    <button class="activity-filter" onclick="filterActivities('files', this)">Files</button>
    <button class="activity-filter" onclick="filterActivities('tasks', this)">Tasks</button>
    <button class="activity-filter" onclick="filterActivities('team', this)">Team</button>
  </div>

  <div class="activity-item" data-type="default">
    <div class="avatar">
      <div class="avatar-placeholder">JB</div>
    </div>
    <div class="content">
      <div class="header">
        <span class="user">James Brown</span>
        <span class="action">updated</span>
        <span class="target">2024 Strategy Document</span>
      </div>
      <div class="timestamp">2 hours ago</div>
    </div>
    <div class="actions">
      <button class="action-button">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
          ></path>
        </svg>
      </button>
    </div>
  </div>

  <div class="activity-item comment" data-type="comments">
    <div class="avatar">
      <img
        src="https://ui-avatars.com/api/?name=Sarah+Wilson&background=10b981&color=fff"
        alt="Sarah Wilson"
      />
    </div>
    <div class="content">
      <div class="header">
        <span class="user">Sarah Wilson</span>
        <span class="action">commented on</span>
        <span class="target">Q3 Marketing Report</span>
      </div>
      <div class="timestamp">1 hour ago</div>
      <div class="comment-bubble">Great progress on the campaign! Looking forward to Q4.</div>
    </div>
  </div>

  <div class="activity-item task" data-type="tasks">
    <div class="avatar">
      <div class="avatar-placeholder bg-green-500 text-white">ES</div>
    </div>
    <div class="content">
      <div class="header">
        <span class="user">Emma Stone</span>
        <span class="action">completed</span>
        <span class="target">API Integration</span>
        <span class="status-badge success">✓ Completed</span>
      </div>
      <div class="timestamp">30 minutes ago</div>
    </div>
  </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <div class="activity-item file">
    <div class="avatar">
      <div class="file-icon">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
          ></path>
        </svg>
      </div>
    </div>
    <div class="content">
      <div class="header">
        <span class="user">Mike Johnson</span>
        <span class="action">uploaded</span>
        <span class="target">Design_v2.fig</span>
      </div>
      <div class="timestamp">5 hours ago</div>
      <div class="file-preview">
        <div class="file-info">
          <div class="file-name">Design_v2.fig</div>
          <div class="file-size">2.4 MB • Figma File</div>
        </div>
        <button class="text-blue-600 text-sm font-medium hover:text-blue-700">View</button>
      </div>
    </div>
  </div>

  <div class="activity-item comment">
    <div class="avatar">
      <div class="avatar-placeholder bg-purple-500 text-white">RD</div>
    </div>
    <div class="content">
      <div class="header">
        <span class="user">Robert Davis</span>
        <span class="action">commented</span>
      </div>
      <div class="timestamp">2 hours ago</div>
      <div class="comment-bubble">This looks great! Can we schedule a review?</div>
      <div class="comment-actions">
        <span class="comment-action">👍 Like</span>
        <span class="comment-action">💬 Reply</span>
      </div>
    </div>
  </div>

  <div class="activity-item task">
    <div class="avatar">
      <div class="avatar-placeholder bg-orange-500 text-white">TM</div>
    </div>
    <div class="content">
      <div class="header">
        <span class="user">Tom Miller</span>
        <span class="action">flagged</span>
        <span class="target">Bug Report</span>
        <span class="status-badge warning">⚠ Warning</span>
      </div>
      <div class="timestamp">45 minutes ago</div>
    </div>
  </div>

  <div class="activity-item avatar-group">
    <div class="avatar-stack">
      <div class="avatar">
        <img
          class="w-10 h-10"
          src="https://ui-avatars.com/api/?name=A&background=6366f1&color=fff"
          alt="A"
        />
      </div>
      <div class="avatar">
        <img
          class="w-10 h-10"
          src="https://ui-avatars.com/api/?name=B&background=ec4899&color=fff"
          alt="B"
        />
      </div>
      <div class="avatar">
        <img
          class="w-10 h-10"
          src="https://ui-avatars.com/api/?name=C&background=f59e0b&color=fff"
          alt="C"
        />
      </div>
      <span class="member-count">+3</span>
    </div>
    <div class="content">
      <div class="header">
        <span class="user">Design Team</span>
        <span class="action">joined</span>
        <span class="target">Project Alpha</span>
      </div>
      <div class="timestamp">Yesterday</div>
    </div>
  </div>
</div>

<div class="space-y-3">
  <div class="activity-item task">
    <div class="content">
      <div class="header">
        <span class="user">User</span>
        <span class="action">completed task</span>
        <span class="status-badge success">
          <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
            <path
              fill-rule="evenodd"
              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Success
        </span>
      </div>
    </div>
  </div>

  <div class="activity-item task">
    <div class="content">
      <div class="header">
        <span class="user">User</span>
        <span class="action">flagged issue</span>
        <span class="status-badge warning">
          <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
            <path
              fill-rule="evenodd"
              d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Warning
        </span>
      </div>
    </div>
  </div>

  <div class="activity-item task">
    <div class="content">
      <div class="header">
        <span class="user">User</span>
        <span class="action">started working on</span>
        <span class="status-badge pending">
          <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
              clip-rule="evenodd"
            ></path>
          </svg>
          In Progress
        </span>
      </div>
    </div>
  </div>

  <div class="activity-item task">
    <div class="content">
      <div class="header">
        <span class="user">User</span>
        <span class="action">encountered error</span>
        <span class="status-badge error">
          <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Error
        </span>
      </div>
    </div>
  </div>
</div>

<div class="activity-feed">
  <div class="activity-item unread">
    <div class="avatar">
      <div class="avatar-placeholder">NW</div>
    </div>
    <div class="content">
      <div class="header">
        <span class="user">New User</span>
        <span class="action">mentioned you in</span>
        <span class="target">Daily Standup</span>
      </div>
      <div class="timestamp">Just now</div>
    </div>
  </div>

  <div class="activity-item comment unread">
    <div class="avatar">
      <img
        src="https://ui-avatars.com/api/?name=Alice+Cooper&background=6366f1&color=fff"
        alt="Alice"
      />
    </div>
    <div class="content">
      <div class="header">
        <span class="user">Alice Cooper</span>
        <span class="action">replied to your comment</span>
      </div>
      <div class="timestamp">5 minutes ago</div>
      <div class="comment-bubble">
        I agree with your suggestion. Let's implement it in the next sprint.
      </div>
    </div>
  </div>
</div>

<div class="activity-feed">
  <div class="empty-state">
    <svg class="empty-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
      ></path>
    </svg>
    <div class="empty-title">No Activity Yet</div>
    <div class="empty-description">Activity will appear here once actions are taken</div>
  </div>
</div>

<div class="activity-feed loading">
  <div class="activity-item">
    <div class="avatar">
      <div class="w-10 h-10 bg-gray-200 rounded-full"></div>
    </div>
    <div class="content flex-1">
      <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
      <div class="h-3 bg-gray-200 rounded w-1/4"></div>
    </div>
  </div>
  <div class="activity-item">
    <div class="avatar">
      <div class="w-10 h-10 bg-gray-200 rounded-full"></div>
    </div>
    <div class="content flex-1">
      <div class="h-4 bg-gray-200 rounded w-2/3 mb-2"></div>
      <div class="h-3 bg-gray-200 rounded w-1/3"></div>
    </div>
  </div>
</div>

<div class="activity-feed">
  <div class="activity-filters">
    <button class="activity-filter active" onclick="filterActivities('all', this)">
      All Activity
    </button>
    <button class="activity-filter" onclick="filterActivities('comments', this)">Comments</button>
    <button class="activity-filter" onclick="filterActivities('files', this)">Files</button>
    <button class="activity-filter" onclick="filterActivities('tasks', this)">Tasks</button>
    <button class="activity-filter" onclick="filterActivities('team', this)">Team</button>
  </div>

  <div class="activity-item unread" data-type="default">
    <div class="avatar">
      <div class="avatar-placeholder">JD</div>
    </div>
    <div class="content">
      <div class="header">
        <span class="user">John Doe</span>
        <span class="action">created</span>
        <span class="target">New Project Brief</span>
      </div>
      <div class="timestamp">Just now</div>
    </div>
  </div>

  <div class="activity-item file" data-type="files">
    <div class="avatar">
      <div class="file-icon">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
          ></path>
        </svg>
      </div>
    </div>
    <div class="content">
      <div class="header">
        <span class="user">Sarah Wilson</span>
        <span class="action">uploaded</span>
        <span class="target">Mockup_Final.sketch</span>
      </div>
      <div class="timestamp">10 minutes ago</div>
      <div class="file-preview">
        <svg class="w-8 h-8 text-purple-500" fill="currentColor" viewBox="0 0 24 24">
          <path
            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
          />
        </svg>
        <div class="file-info">
          <div class="file-name">Mockup_Final.sketch</div>
          <div class="file-size">8.2 MB • Sketch File</div>
        </div>
        <button class="text-blue-600 text-sm font-medium hover:text-blue-700">Download</button>
      </div>
    </div>
  </div>

  <div class="activity-item comment" data-type="comments">
    <div class="avatar">
      <img
        src="https://ui-avatars.com/api/?name=Mike+Johnson&background=10b981&color=fff"
        alt="Mike"
      />
    </div>
    <div class="content">
      <div class="header">
        <span class="user">Mike Johnson</span>
        <span class="action">commented on</span>
        <span class="target">Q3 Marketing Report</span>
      </div>
      <div class="timestamp">1 hour ago</div>
      <div class="comment-bubble">
        Excellent work on the campaign! The conversion rates exceeded our targets by 15%. Let's
        discuss scaling this approach for Q4.
      </div>
      <div class="comment-actions">
        <span class="comment-action">👍 Like</span>
        <span class="comment-action">💬 Reply</span>
        <span class="comment-action">📌 Pin</span>
      </div>
    </div>
  </div>

  <div class="activity-item task" data-type="tasks">
    <div class="avatar">
      <div class="avatar-placeholder bg-green-500 text-white">ES</div>
    </div>
    <div class="content">
      <div class="header">
        <span class="user">Emma Stone</span>
        <span class="action">completed task</span>
        <span class="status-badge success">
          <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
            <path
              fill-rule="evenodd"
              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Completed
        </span>
      </div>
      <div class="timestamp">2 hours ago</div>
    </div>
  </div>

  <div class="activity-item avatar-group" data-type="team">
    <div class="avatar-stack">
      <div class="avatar">
        <img
          class="w-10 h-10"
          src="https://ui-avatars.com/api/?name=Alice&background=6366f1&color=fff"
          alt="Alice"
        />
      </div>
      <div class="avatar">
        <img
          class="w-10 h-10"
          src="https://ui-avatars.com/api/?name=Bob&background=ec4899&color=fff"
          alt="Bob"
        />
      </div>
      <div class="avatar">
        <img
          class="w-10 h-10"
          src="https://ui-avatars.com/api/?name=Carol&background=f59e0b&color=fff"
          alt="Carol"
        />
      </div>
      <span class="member-count">+5</span>
    </div>
    <div class="content">
      <div class="header">
        <span class="user">Design Team</span>
        <span class="action">started collaborating on</span>
        <span class="target">Website Redesign</span>
      </div>
      <div class="timestamp">Yesterday at 3:45 PM</div>
    </div>
  </div>
</div>