From c55c6555ae759d355e7dac22a84c3d73878f8137 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 6 Mar 2026 06:48:35 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B9=20Extract=20HeatmapLegend=20compon?=
 =?UTF-8?q?ent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎯 What: Extracted duplicated legend code from ActivityHeatmap and ContributionGraph into a new HeatmapLegend component.
💡 Why: Improves maintainability and reduces code duplication.
✅ Verification: Ran `npm run lint`, `npm run test -- --run`, and `npm run build` to confirm changes are safe.
✨ Result: Cleaner code with a reusable component.

Co-authored-by: is0692vs <135803462+is0692vs@users.noreply.github.com>
---
 src/components/ActivityHeatmap.tsx   | 19 +++----------------
 src/components/ContributionGraph.tsx | 18 ++----------------
 src/components/HeatmapLegend.tsx     | 20 ++++++++++++++++++++
 3 files changed, 25 insertions(+), 32 deletions(-)
 create mode 100644 src/components/HeatmapLegend.tsx

diff --git a/src/components/ActivityHeatmap.tsx b/src/components/ActivityHeatmap.tsx
index 973d0aa..93f93dc 100644
--- a/src/components/ActivityHeatmap.tsx
+++ b/src/components/ActivityHeatmap.tsx
@@ -1,3 +1,5 @@
+import HeatmapLegend from "./HeatmapLegend";
+
 type Props = {
   /** heatmap[dayOfWeek 0-6][hour 0-23] event counts */
   heatmap: number[][];
@@ -91,22 +93,7 @@ export default function ActivityHeatmap({ heatmap, totalEvents }: Props) {
         ))}
       </svg>
 
-      <div className="mt-2 flex items-center justify-end gap-1 text-xs text-muted">
-        <span>Less</span>
-        {[0, 1, 2, 3, 4].map((level) => (
-          <div
-            key={level}
-            className="h-3 w-3 rounded-sm"
-            style={{
-              backgroundColor:
-                level === 0
-                  ? "rgba(var(--card-border-rgb), 0.4)"
-                  : `rgba(var(--accent-rgb), ${0.2 + level * 0.2})`,
-            }}
-          />
-        ))}
-        <span>More</span>
-      </div>
+      <HeatmapLegend />
     </div>
   );
 }
diff --git a/src/components/ContributionGraph.tsx b/src/components/ContributionGraph.tsx
index 4c775de..c42abc8 100644
--- a/src/components/ContributionGraph.tsx
+++ b/src/components/ContributionGraph.tsx
@@ -1,3 +1,4 @@
+import HeatmapLegend from "./HeatmapLegend";
 import type { ContributionData } from "@/lib/types";
 
 type Props = {
@@ -126,22 +127,7 @@ export default function ContributionGraph({ contributions }: Props) {
         )}
       </svg>
 
-      <div className="mt-2 flex items-center justify-end gap-1 text-xs text-muted">
-        <span>Less</span>
-        {[0, 1, 2, 3, 4].map((level) => (
-          <div
-            key={level}
-            className="h-3 w-3 rounded-sm"
-            style={{
-              backgroundColor:
-                level === 0
-                  ? "rgba(var(--card-border-rgb), 0.4)"
-                  : `rgba(var(--accent-rgb), ${0.2 + level * 0.2})`,
-            }}
-          />
-        ))}
-        <span>More</span>
-      </div>
+      <HeatmapLegend />
     </div>
   );
 }
diff --git a/src/components/HeatmapLegend.tsx b/src/components/HeatmapLegend.tsx
new file mode 100644
index 0000000..d6dae51
--- /dev/null
+++ b/src/components/HeatmapLegend.tsx
@@ -0,0 +1,20 @@
+export default function HeatmapLegend() {
+  return (
+    <div className="mt-2 flex items-center justify-end gap-1 text-xs text-muted">
+      <span>Less</span>
+      {[0, 1, 2, 3, 4].map((level) => (
+        <div
+          key={level}
+          className="h-3 w-3 rounded-sm"
+          style={{
+            backgroundColor:
+              level === 0
+                ? "rgba(var(--card-border-rgb), 0.4)"
+                : `rgba(var(--accent-rgb), ${0.2 + level * 0.2})`,
+          }}
+        />
+      ))}
+      <span>More</span>
+    </div>
+  );
+}