Merge pull request #542 from Tech4Aditya/feat/empty-state-ui

feat: improve activity feed UX with reusable empty state component

Author: mehul-m-prajapati

src/components/ActivityFeed.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-
+import EmptyState from "./EmptyState";
 interface EventType {
   id: string;
   type: string;
@@ -56,9 +56,14 @@ export default function ActivityFeed({ username }: { username: string }) {
       </h2>
 
       {loading ? (
-        <p className="text-center">Loading...</p>
+      <div className="text-center py-6 text-gray-500">
+        Fetching recent activity...
+        </div>
       ) : events.length === 0 ? (
-        <p className="text-center">No activity found</p>
+      <EmptyState
+        title="No activity found"
+        description="This user has no recent public GitHub activity."
+/>
       ) : (
         events.slice(0, 10).map((event) => (
           <div

src/components/EmptyState.tsx

@@ -0,0 +1,25 @@
+interface EmptyStateProps {
+  title: string;
+  description?: string;
+}
+
+export default function EmptyState({
+  title,
+  description,
+}: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-10 text-center">
+      <div className="text-5xl mb-3">📭</div>
+
+      <h2 className="text-lg font-semibold text-gray-700 dark:text-gray-200">
+        {title}
+      </h2>
+
+      {description && (
+        <p className="mt-2 text-sm text-gray-500 dark:text-gray-400 max-w-md">
+          {description}
+        </p>
+      )}
+    </div>
+  );
+}