feat(heaps): extend heap visualizer and logic to support both min and max heap

src/components/dsa/HeapVisualizer.jsx

@@ -5,7 +5,7 @@ import { Play, Pause, Plus, ArrowDown } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { generateHeapSteps } from '@/lib/dsaAdvancedUtils';
 
-const HeapVisualizer = ({ darkMode }) => {
+const HeapVisualizer = ({ darkMode, heapType }) => {
     const [heap, setHeap] = useState([10, 20, 15, 30, 40]);
     const [inputValue, setInputValue] = useState('');
     const [history, setHistory] = useState([]);
@@ -27,7 +27,7 @@ const HeapVisualizer = ({ darkMode }) => {
     const handleInsert = () => {
         if (!inputValue) return;
         const val = parseInt(inputValue);
-        const steps = generateHeapSteps(heap, 'insert', val);
+        const steps = generateHeapSteps(heap, 'insert', val, heapType);
         setHistory(steps);
         setCurrentStep(-1);
         setIsPlaying(true);
@@ -42,7 +42,7 @@ const HeapVisualizer = ({ darkMode }) => {
     const displayHeap = (currentStep >= 0 && history[currentStep].heap) ? history[currentStep].heap : heap;
     const activeIdx = currentStep >= 0 ? history[currentStep].activeIdx : null;
     const compareIndices = currentStep >= 0 && history[currentStep].type === 'compare' ? history[currentStep].indices : [];
-    const message = currentStep >= 0 ? history[currentStep].message : "Heap Ready (Max Heap)";
+    const message = currentStep >= 0 ? history[currentStep].message : `Heap Ready (${heapType})`;
 
     // Render as tree
     const renderTree = (idx, x, y, offset) => {

src/data/contributors.js

@@ -29,5 +29,11 @@ export const dsaContributors = [
     role: "Backend Architecture",
     github: "https://github.com/jamesw",
     avatar: "https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=150&h=150&fit=crop&crop=faces"
+  },
+  {
+    name: "Muhammed Nihas",
+    role: "AI Engineer",
+    github: "https://github.com/mhdnihas",
+    avatar: "https://avatars.githubusercontent.com/u/144945271?v=4" 
   }
 ];

src/lib/dsaAdvancedUtils.js

@@ -78,10 +78,12 @@ export const generateBSTSteps = (root, operation, value) => {
     return { steps, finalRoot: newRoot };
 };
 
-// Heap Logic (Max Heap)
-export const generateHeapSteps = (heap, operation, value) => {
+// Heap Logic
+export const generateHeapSteps = (heap, operation, value, heapType = 'Max Heap') => {
     const steps = [];
     let newHeap = [...heap];
+    const comparator = heapType === 'Max Heap' ? (a, b) => a > b : (a, b) => a < b;
+    const comparisonText = heapType === 'Max Heap' ? 'larger' : 'smaller';
 
     if (operation === 'insert') {
         newHeap.push(value);
@@ -93,9 +95,9 @@ export const generateHeapSteps = (heap, operation, value) => {
             let parentIdx = Math.floor((idx - 1) / 2);
             steps.push({ type: 'compare', heap: [...newHeap], indices: [idx, parentIdx], message: `Comparing ${newHeap[idx]} with parent ${newHeap[parentIdx]}` });
 
-            if (newHeap[idx] > newHeap[parentIdx]) {
+            if (comparator(newHeap[idx], newHeap[parentIdx])) {
                 [newHeap[idx], newHeap[parentIdx]] = [newHeap[parentIdx], newHeap[idx]];
-                steps.push({ type: 'swap', heap: [...newHeap], indices: [idx, parentIdx], message: 'Child is larger, swapping' });
+                steps.push({ type: 'swap', heap: [...newHeap], indices: [idx, parentIdx], message: `Child is ${comparisonText}, swapping` });
                 idx = parentIdx;
             } else {
                 break;

src/pages/DsaVisualization.jsx

@@ -408,6 +408,7 @@ const DsaVisualization = () => {
     const [darkMode, setDarkMode] = useState(true);
     const [customInput, setCustomInput] = useState('');
     const [searchTarget, setSearchTarget] = useState(42); // Default target
+    const [heapType, setHeapType] = useState('Max Heap');
 
     const [array, setArray] = useState([]);
 
@@ -455,7 +456,7 @@ const DsaVisualization = () => {
         graphs: ['BFS', 'DFS', 'Dijkstra', 'AStar'],
         linkedlist: [],
         trees: [],
-        heaps: [],
+        heaps: ['Max Heap', 'Min Heap'],
         dp: []
     };
 
@@ -586,6 +587,30 @@ const DsaVisualization = () => {
                                     )}
                                 </div>
                             )}
+                             {activeTab === 'heaps' && (
+                                <div className="space-y-4">
+                                    <h3 className="font-semibold text-sm uppercase tracking-wider text-slate-500">Heap Type</h3>
+                                    <Select value={heapType} onValueChange={setHeapType} disabled={isPlaying}>
+                                        <SelectTrigger>
+                                            <SelectValue placeholder="Select Heap Type" />
+                                        </SelectTrigger>
+                                        <SelectContent className={cn(darkMode ? "bg-slate-900 border-slate-800" : "bg-white border-slate-200")}>
+                                            {algoOptions.heaps.map(type => (
+                                                <SelectItem 
+                                                    key={type} 
+                                                    value={type} 
+                                                    className={cn(
+                                                        "cursor-pointer",
+                                                        darkMode ? "text-slate-100 focus:text-white focus:bg-slate-800" : "text-slate-900 focus:text-black focus:bg-slate-100"
+                                                    )}
+                                                >
+                                                    {type}
+                                                </SelectItem>
+                                            ))}
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            )}
 
                             {(activeTab === 'sorting' || activeTab === 'searching') && (
                                 <div className="space-y-6">
@@ -693,9 +718,9 @@ const DsaVisualization = () => {
                              <Card className={cn("overflow-hidden border-0 shadow-2xl", darkMode ? "bg-slate-900" : "bg-white")}>
                                 <CardContent className="p-6">
                                     <div className="flex justify-between items-center mb-4">
-                                        <h3 className="font-bold text-xl text-yellow-400 flex items-center gap-2"><Layers className="h-5 w-5" /> Heap Visualizer (Max)</h3>
+                                    <h3 className="font-bold text-xl text-yellow-400 flex items-center gap-2"><Layers className="h-5 w-5" /> Heap Visualizer ({heapType})</h3>
                                     </div>
-                                    <HeapVisualizer darkMode={darkMode} />
+                                    <HeapVisualizer darkMode={darkMode} heapType={heapType} />
                                 </CardContent>
                             </Card>
                         ) : activeTab === 'dp' ? (