feat: added live GitHub activity feed with UI and time tracking

Author: aparna24bce11388

src/components/ActivityFeed.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useState } from "react";
+
+interface EventType {
+  id: string;
+  type: string;
+  created_at: string;
+  repo?: {
+    name: string;
+  };
+}
+
+export default function ActivityFeed({ username }: { username: string }) {
+  const [events, setEvents] = useState<EventType[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  // 🕒 time ago function
+  const getTimeAgo = (dateString: string) => {
+    const diff = Math.floor(
+      (Date.now() - new Date(dateString).getTime()) / 1000
+    );
+
+    if (diff < 60) return `${diff}s ago`;
+    if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+    if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+    return `${Math.floor(diff / 86400)}d ago`;
+  };
+
+  useEffect(() => {
+    const fetchEvents = async () => {
+      try {
+        setLoading(true);
+
+        const res = await fetch(
+          `https://api.github.com/users/${username}/events`
+        );
+        const data = await res.json();
+
+        setEvents(data);
+        setLoading(false);
+      } catch (err) {
+        console.error(err);
+        setLoading(false);
+      }
+    };
+
+    fetchEvents();
+
+    const interval = setInterval(fetchEvents, 30000);
+    return () => clearInterval(interval);
+  }, [username]);
+
+  return (
+    <div className="p-4">
+      <h2 className="text-xl font-bold mb-4 text-center">
+        Activity Feed
+      </h2>
+
+      {loading ? (
+        <p className="text-center">Loading...</p>
+      ) : events.length === 0 ? (
+        <p className="text-center">No activity found</p>
+      ) : (
+        events.slice(0, 10).map((event) => (
+          <div
+            key={event.id}
+            className="border rounded-lg p-3 mb-3 shadow-sm bg-white dark:bg-gray-700"
+          >
+            <p className="text-sm font-semibold">
+              {event.type === "PushEvent" && "🚀 Commit pushed"}
+              {event.type === "PullRequestEvent" && "🔀 Pull Request"}
+              {event.type === "IssuesEvent" && "🐛 Issue"}
+              {event.type === "WatchEvent" && "⭐ Starred repo"}
+              {![
+                "PushEvent",
+                "PullRequestEvent",
+                "IssuesEvent",
+                "WatchEvent",
+              ].includes(event.type) && event.type}
+            </p>
+
+            <p className="text-xs text-gray-500 mt-1">
+              {event.repo?.name} • {getTimeAgo(event.created_at)}
+            </p>
+          </div>
+        ))
+      )}
+    </div>
+  );
+}

src/pages/ctivity.tsx

@@ -0,0 +1,14 @@
+import ActivityFeed from "../components/ActivityFeed";
+export default function Activity() {
+  return (
+    <div className="w-full h-full p-6 bg-gray-50 dark:bg-gray-800">
+      <div className="max-w-2xl mx-auto">
+        <h1 className="text-2xl font-bold mb-4 text-center">
+          Live GitHub Activity
+        </h1>
+
+        <ActivityFeed username="aparna24bce11388" />
+      </div>
+    </div>
+  );
+}