refactor(dashboard): extract heatmap intensity utility

Author: deepsikha-dash

components/dashboard/Heatmap.test.ts

@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest';
+import { getIntensityColor } from './heatmapUtils';
+
+describe('getIntensityColor', () => {
+  it('returns correct color for intensity 0', () => {
+    expect(getIntensityColor(0)).toBe('bg-gray-200 dark:bg-[#161616]');
+  });
+
+  it('returns correct color for intensity 1', () => {
+    expect(getIntensityColor(1)).toBe('bg-gray-400 dark:bg-zinc-700');
+  });
+
+  it('returns correct color for intensity 2', () => {
+    expect(getIntensityColor(2)).toBe('bg-gray-500 dark:bg-zinc-500');
+  });
+
+  it('returns correct color for intensity 3', () => {
+    expect(getIntensityColor(3)).toBe('bg-gray-700 dark:bg-zinc-300');
+  });
+
+  it('returns correct color for intensity 4', () => {
+    expect(getIntensityColor(4)).toBe('bg-black dark:bg-white');
+  });
+
+  it('returns default color for out-of-range intensity', () => {
+    expect(getIntensityColor(999)).toBe('bg-gray-200 dark:bg-[#161616]');
+  });
+});

components/dashboard/Heatmap.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { ActivityData } from '@/types/dashboard';
+import { getIntensityColor } from './heatmapUtils';
 
 const CELL = 14;
 const GAP = 3;
@@ -37,23 +38,6 @@ export default function Heatmap({ data }: { data: ActivityData[] }) {
     return () => observer.disconnect();
   }, [naturalWidth]);
 
-  const getIntensityColor = (intensity: number) => {
-    switch (intensity) {
-      case 0:
-        return 'bg-gray-200 dark:bg-[#161616]';
-      case 1:
-        return 'bg-gray-400 dark:bg-zinc-700';
-      case 2:
-        return 'bg-gray-500 dark:bg-zinc-500';
-      case 3:
-        return 'bg-gray-700 dark:bg-zinc-300';
-      case 4:
-        return 'bg-black dark:bg-white';
-      default:
-        return 'bg-gray-200 dark:bg-[#161616]';
-    }
-  };
-
   const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>, day: ActivityData) => {
     const rect = e.currentTarget.getBoundingClientRect();
     setTooltip({

components/dashboard/heatmapUtils.ts

@@ -0,0 +1,16 @@
+export const getIntensityColor = (intensity: number): string => {
+  switch (intensity) {
+    case 0:
+      return 'bg-gray-200 dark:bg-[#161616]';
+    case 1:
+      return 'bg-gray-400 dark:bg-zinc-700';
+    case 2:
+      return 'bg-gray-500 dark:bg-zinc-500';
+    case 3:
+      return 'bg-gray-700 dark:bg-zinc-300';
+    case 4:
+      return 'bg-black dark:bg-white';
+    default:
+      return 'bg-gray-200 dark:bg-[#161616]';
+  }
+};