Add step-by-step explanations and complexity analysis for sorting algorithms

src/components/dsa/AlgorithmExplanation.jsx

@@ -0,0 +1,40 @@
+import { sortingAlgorithmsMeta } from "@/data/sortingAlgorithmsMeta";
+const AlgorithmExplanation = ({ algorithm, darkMode }) => {
+    const info = sortingAlgorithmsMeta[algorithm];
+    if (!info) return null;
+
+    return (
+        <div
+          className={`mt-4 p-4 rounded-lg border ${
+            darkMode
+              ? "bg-slate-900 border-slate-800"
+              : "bg-white border-slate-200"
+          }`}
+        >
+          <h4 className="font-bold text-lg mb-2">{info.name}</h4>
+          <p className="text-sm text-slate-400 mb-4">{info.description}</p>
+
+          <div className="mb-4">
+            <h5 className="font-semibold mb-2">How it works:</h5>
+            <ol className="list-decimal list-inside text-sm space-y-1 text-slate-400">
+              {info.steps?.map((step, index) => (
+                <li key={index}>{step}</li>
+              ))}
+            </ol>
+          </div>
+
+          <div className="flex flex-wrap gap-6 text-sm">
+            <span>
+              <strong>Time:</strong>{" "}
+              {info.time.average || info.time}
+            </span>
+            <span>
+              <strong>Space:</strong> {info.space}
+            </span>
+          </div>
+        </div>
+      );
+  };
+
+  export default AlgorithmExplanation;
+

src/data/sortingAlgorithmsMeta.js

@@ -0,0 +1,111 @@
+export const sortingAlgorithmsMeta= {
+    BubbleSort: {
+      name: "Bubble Sort",
+      description:
+        "Bubble Sort repeatedly compares adjacent elements and swaps them if they are in the wrong order. Larger elements gradually move to the end of the array.",
+
+      steps: [
+        "Start from the first element of the array.",
+        "Compare the current element with the next element.",
+        "If the current element is greater, swap them.",
+        "Move to the next pair and repeat.",
+        "After each pass, the largest element moves to the end.",
+        "Repeat until no swaps are needed."
+      ],
+
+      time: {
+        best: "O(n)",
+        average: "O(n²)",
+        worst: "O(n²)"
+      },
+      space: "O(1)",
+      stable: true
+    },
+
+    SelectionSort: {
+      name: "Selection Sort",
+      description:
+        "Selection Sort selects the smallest element from the unsorted portion and places it at the beginning.",
+
+      steps: [
+        "Divide the array into sorted and unsorted parts.",
+        "Find the smallest element in the unsorted part.",
+        "Swap it with the first unsorted element.",
+        "Move the boundary of the sorted part forward.",
+        "Repeat until the array is sorted."
+      ],
+
+      time: {
+        best: "O(n²)",
+        average: "O(n²)",
+        worst: "O(n²)"
+      },
+      space: "O(1)",
+      stable: false
+    },
+
+    InsertionSort: {
+      name: "Insertion Sort",
+      description:
+        "Insertion Sort builds the sorted array one element at a time.",
+
+      steps: [
+        "Assume the first element is already sorted.",
+        "Pick the next element and compare it with previous elements.",
+        "Shift larger elements one position to the right.",
+        "Insert the element into its correct position.",
+        "Repeat until the array is sorted."
+      ],
+
+      time: {
+        best: "O(n)",
+        average: "O(n²)",
+        worst: "O(n²)"
+      },
+      space: "O(1)",
+      stable: true
+    },
+
+    MergeSort: {
+      name: "Merge Sort",
+      description:
+        "Merge Sort divides the array into halves, sorts them recursively, and merges the sorted halves.",
+
+      steps: [
+        "Divide the array into two halves.",
+        "Recursively divide each half until single elements remain.",
+        "Merge the smaller sorted arrays into larger sorted arrays.",
+        "Repeat until the full array is merged."
+      ],
+
+      time: {
+        best: "O(n log n)",
+        average: "O(n log n)",
+        worst: "O(n log n)"
+      },
+      space: "O(n)",
+      stable: true
+    },
+
+    QuickSort: {
+      name: "Quick Sort",
+      description:
+        "Quick Sort selects a pivot and partitions the array around it.",
+
+      steps: [
+        "Choose a pivot element.",
+        "Partition the array so smaller elements go left and larger go right.",
+        "Recursively apply the same process to subarrays.",
+        "Continue until the array is sorted."
+      ],
+
+      time: {
+        best: "O(n log n)",
+        average: "O(n log n)",
+        worst: "O(n²)"
+      },
+      space: "O(log n)",
+      stable: false
+    }
+  };
+

src/pages/DsaVisualization.jsx

@@ -32,6 +32,7 @@ import TreeVisualizer from '@/components/dsa/TreeVisualizer';
 import HeapVisualizer from '@/components/dsa/HeapVisualizer';
 import DPVisualizer from '@/components/dsa/DPVisualizer';
 import ContributorsSection from '@/components/dsa/ContributorsSection';
+import AlgorithmExplanation from '@/components/dsa/AlgorithmExplanation';
 
 // --- Existing Sorting/Graph Components ---
 
@@ -628,12 +629,13 @@ const DsaVisualization = () => {
                             )}
 
                             {(activeTab === 'sorting') && (
+
                                 <div className="space-y-2 pt-4 border-t border-slate-200 dark:border-slate-800">
                                     <label className="text-xs uppercase tracking-wider text-slate-500 font-bold">Custom Input</label>
                                     <div className="flex gap-2">
                                         <Input placeholder="10, 5, 8, 20..." value={customInput} onChange={(e) => setCustomInput(e.target.value)} className="h-8 text-xs" />
                                         <Button size="sm" variant="secondary" className="h-8" onClick={handleCustomInput}>Go</Button>
-                                    </div>
+                                    </div
                                 </div>
                             )}
                         </CardContent>
@@ -650,16 +652,24 @@ const DsaVisualization = () => {
                                         </div>
                                         <SortingVisualizer array={array} algorithmName={algorithm} isPlaying={isPlaying} speed={speed} className="primary" searchTarget={searchTarget} />
                                     </CardContent>
-                                공급                                </Card>
+                                    <AlgorithmExplanation algorithm={algorithm} darkMode={darkMode} />
+
+                                                              </Card>
+
                                 {isComparisonMode && (
                                     <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-purple-400">{secondAlgorithm.replace(/([A-Z])/g, ' $1').trim()}</h3>
                                             </div>
                                             <SortingVisualizer array={array} algorithmName={secondAlgorithm} isPlaying={isPlaying} speed={speed} className="secondary" searchTarget={searchTarget} />
+
                                         </CardContent>
+                                        <AlgorithmExplanation algorithm={secondAlgorithm} darkMode={darkMode} />
+
                                     </Card>
+
+
                                 )}
                             </div>
                         ) : activeTab === 'graphs' ? (