Applications component added to sorting algorithms

Frontend/algoverse/src/components/infoContainer/Applications.css

@@ -0,0 +1,15 @@
+.applicationsContainer {
+  background-color: #2c98f0; /* Light blue background */
+  color: white; /* White text */
+  width: 90%; /* Full width */
+  height: fit-content;
+  padding: 20px; /* Some padding around the text */
+  box-sizing: border-box; /* Ensure padding doesn't increase the size */
+  margin-top: 10px; /* Space above the container */
+  margin-bottom: 20px;
+  white-space: normal; /* Keep nodes in a single line */
+}
+
+.applicationsContainer h3 {
+  margin-top: 0; /* Remove top margin of the heading */
+}

Frontend/algoverse/src/components/infoContainer/Applications.js

@@ -0,0 +1,25 @@
+import React from "react";
+import "./Applications.css";
+import { useSearchParams } from "react-router-dom";
+import algorithmApplicationsTexts from "./applicationsText.json";
+
+function Applications() {
+  const [searchParams] = useSearchParams();
+  const algorithm = searchParams.get("algorithm");
+
+  let applicationsText =
+    algorithmApplicationsTexts[algorithm]?.applications || "Default";
+
+  return (
+    <>
+      <div className="applicationsContainer">
+        <h1> Useful Applications </h1>
+        {applicationsText.map((step, index) => (
+          <p key={index}>{step}</p>
+        ))}
+      </div>
+    </>
+  );
+}
+
+export default Applications;

Frontend/algoverse/src/components/infoContainer/applicationsText.json

@@ -0,0 +1,46 @@
+{
+    "MergeSort": {
+      "description": "Merge sort is a divide-and-conquer algorithm that works by dividing an array into smaller subarrays, sorting each subarray, and then merging the sorted subarrays back together to form the final sorted array",
+        "applications": [
+          "E-commerce Product Recommendation", 
+          "Medical Imaging", 
+          "Stock Market Analysis",
+          "E-commerce Search Results",
+          "Stock Portfolio Management"
+        ]
+    },
+    "SelectionSort": {
+        "description": "Selection sort is a simple sorting algorithm that works by iterating through an array and selecting the smallest element in the unsorted portion of the array and swapping it with the first element of the unsorted portion.",
+        "applications": [
+          "Embedded Systems", 
+          "Data Storage", 
+          "Computer Graphics"
+        ]
+      },
+      "BubbleSort": {
+        "description": "Bubble sort is a simple sorting algorithm that repeatedly steps through the list, compares adjacent elements and swaps them if they are in the wrong order.",
+      "steps": [
+        "Error Detection in Computer Graphics", 
+        "Education", 
+        "Data Analysis"
+      ]
+      },
+      "InsertionSort": {
+        "description": "Insertion sort is a simple sorting algorithm that works by iterating through an array and inserting each element into its proper position in a new sorted array.",
+        "applications": [
+          "Embedded Systems", 
+          "Flash Memory", 
+          "Error Detection in Computer Graphics"
+        ]
+      },
+    "QuickSort": {
+      "description": "Quick sort is a divide-and-conquer algorithm that works by selecting an element as a pivot, partitioning the other elements into two sub-arrays based on whether they are less than or greater than the pivot, and then recursively sorting the sub-arrays.",
+      "steps": [
+        "Commercial Computing", 
+        "Information Searching", 
+        "Event-driven Simulation"
+      ]
+    }
+
+}
+

Frontend/algoverse/src/components/pages/Sort.js

@@ -1,6 +1,7 @@
 import "../../App.css";
 import "./Sort.css";
 import React from "react";
+import Applications from "../infoContainer/Applications";
 
 import SortingVisualizer from "../SortingVisualizer/SortingVisualizer";
 
@@ -11,6 +12,9 @@ function Sort() {
         <div className="buttonHeader"></div>
         <div className="cutBody">
           <SortingVisualizer></SortingVisualizer>
+          <div className="infoContainer">
+            <Applications></Applications>
+          </div>
         </div>
       </div>
     </div>