Added empty state component for zero activiities

src/components/dashboard/Dashboard.tsx

@@ -13,6 +13,7 @@ import ShareButton from "@/components/ui/ShareButton";
 import { getUserFootprints } from "@/lib/firebase/firestore";
 import { exportToCSV, ActivityHistoryEntry } from "@/utils/exportCSV";
 import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
+import EmptyState from "@/components/ui/EmptyState"; // Import EmptyState
 
 type SortOption = "newest" | "oldest" | "highest_impact" | "lowest_impact";
 
@@ -238,21 +239,16 @@ export default function Dashboard({
     );
   }
 
-  if (!dashboardData) {
+  if (!dashboardData || activityHistory.length === 0) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <span className="text-6xl mb-4 block">🌱</span>
-          <h2 className="text-2xl font-bold text-gray-900 mb-2">
-            Welcome to Carbon Tracker!
-          </h2>
-          <p className="text-gray-600 mb-6">
-            Start tracking your digital activities to see your carbon footprint.
-          </p>
-          <button className="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
-            Add Your First Activity
-          </button>
-        </div>
+      <div className="min-h-screen flex items-center justify-center p-4">
+        <EmptyState
+          icon="🌱 🌍 🌿"
+          title="Start Your Green Journey!"
+          description="No activities tracked yet. Begin logging your digital activities to see your carbon footprint and get personalized eco-friendly tips!"
+          actionLabel="➕ Log Your First Activity"
+          onAction={() => onNavigate("activities")}
+        />
       </div>
     );
   }
@@ -463,4 +459,4 @@ export default function Dashboard({
       )}
     </div>
   );
-}
+}

src/components/ui/EmptyState.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+interface EmptyStateProps {
+  title: string;
+  description: string;
+  actionLabel: string;
+  onAction: () => void;
+  icon?: string; // Can be an emoji or a path to an SVG
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({
+  title,
+  description,
+  actionLabel,
+  onAction,
+  icon,
+}) => {
+  return (
+    <div className="flex flex-col items-center justify-center p-8 text-center bg-white rounded-lg shadow-md">
+      {icon && (
+        <div className="mb-4 text-6xl">
+          {icon.startsWith('<svg') ? (
+            <div dangerouslySetInnerHTML={{ __html: icon }} />
+          ) : (
+            <span role="img" aria-label="icon">{icon}</span>
+          )}
+        </div>
+      )}
+      <h2 className="mb-2 text-2xl font-semibold text-green-700">{title}</h2>
+      <p className="mb-4 text-gray-600">{description}</p>
+      <button
+        onClick={onAction}
+        className="px-6 py-3 text-white bg-green-600 rounded-full hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 transition duration-300 ease-in-out"
+      >
+        {actionLabel}
+      </button>
+    </div>
+  );
+};
+
+export default EmptyState;