cleaned up fronten

Author: GaelGil

src/components/AlgorithmForm.tsx

@@ -8,7 +8,10 @@ const AlgorithmForm: React.FC<FormProps> = ({
   onReset,
   disabled,
 }) => (
-  <form onSubmit={onSubmit} className="">
+  <form
+    onSubmit={onSubmit}
+    className="mt-4 flex flex-wrap gap-2 justify-center "
+  >
     <div className="mb-4 flex items-center">
       <label className="font-bold" htmlFor="algorithm">
         Algorithms

src/components/AlgorithmInfo.tsx

@@ -4,25 +4,33 @@ import type { Info } from "../types/info";
 // takes in props "info" which is a type defined in types.
 // since we have sorting and traversal algorithms we can use this
 // to load in on each page without having to rewrite this
-const AlgorithmInfo: React.FC<{ info: Info[] }> = ({ info }) => (
-  <div className="">
-    {info.map((info, index) => (
-      <div key={index} className="w-1/3 p-4">
-        <h2 className=" text-lg font-bold mb-2">{info.name}</h2>
-        <p>{info.description}</p>
-        {info.link && (
-          <a
-            href={info.link}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-blue-500 hover:text-blue-700"
-          >
-            Learn more
-          </a>
-        )}
-      </div>
-    ))}
-  </div>
+const AlgorithmInfo: React.FC<{ info: Info[]; name: string }> = ({
+  info,
+  name,
+}) => (
+  <>
+    <div className="mt-5  w-1/2 mx-auto">
+      <h2 className="text-center font-bold text-2xl">
+        About {name} Algorithms
+      </h2>
+      {info.map((info, index) => (
+        <div key={index} className="p-2 m-2 ">
+          <h2 className=" text-lg font-bold mb-2">{info.name}</h2>
+          <p>{info.description}</p>
+          {info.link && (
+            <a
+              href={info.link}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-500 hover:text-blue-700"
+            >
+              Learn more
+            </a>
+          )}
+        </div>
+      ))}
+    </div>
+  </>
 );
 
 export default AlgorithmInfo;

src/components/Navigation.tsx

@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 // simple navbar component to be usedon all pages
 const Navigation = () => {
   return (
-    <div className=" p-3 border-b border-gray-300">
+    <div className="border-b border-gray-300">
       <div className="flex p-2 mx-auto space-x-4">
         <Link
           to="/"

src/components/SortingVisualizer.tsx

@@ -58,8 +58,8 @@ const SortingVisualizer: React.FC<ArrayProps> = ({ arraysInfo }) => {
 
   // the sorting visualizer component
   return (
-    <div className="min-h-screen flex flex-col justify-center items-center">
-      <div className="array-container mb-4">
+    <div className="">
+      <div className="array-container">
         {array.map((value, idx) => (
           <div
             key={idx}
@@ -79,13 +79,8 @@ const SortingVisualizer: React.FC<ArrayProps> = ({ arraysInfo }) => {
         disabled={isSorting}
       />
 
-      <div className="mt-5">
-        <h2 className="text-center font-bold text-2xl">
-          About Sorting Algorithms
-        </h2>
-        {/* importing algorithm form component with sorting specific values */}
-        <AlgorithmInfo info={arraysInfo} />
-      </div>
+      {/* importing algorithm form component with sorting specific values */}
+      <AlgorithmInfo info={arraysInfo} name="Sorting" />
     </div>
   );
 };

src/components/TraversalVisualizer.tsx

@@ -122,8 +122,8 @@ const TraversalVisualizer: React.FC<GraphProps> = ({ graphsInfo }) => {
 
   // the traversal visualizer component
   return (
-    <div className="min-h-screen ">
-      <div className=" d-flex flex-column mb-4">
+    <div className=" ">
+      <div className="">
         {matrix.map((row, rowIndex) => (
           <div key={rowIndex} className={"matrix-row matrix-row-" + rowIndex}>
             {row.map((cell, colIndex) => (
@@ -179,13 +179,8 @@ const TraversalVisualizer: React.FC<GraphProps> = ({ graphsInfo }) => {
         onReset={resetMatrix}
         disabled={isSorting}
       />
-      <div className="mt-5">
-        <h2 className="text-center font-bold text-2xl">
-          About Traversal Algorithms
-        </h2>
-        {/* importing algorithm info component with traversal specific values */}
-        <AlgorithmInfo info={graphsInfo} />
-      </div>
+      {/* importing algorithm info component with traversal specific values */}
+      <AlgorithmInfo info={graphsInfo} name="Traversal" />
     </div>
   );
 };

src/pages/Visualiser.tsx

@@ -8,9 +8,9 @@ const VisualizersPage: React.FC = () => {
   const [selected, setSelected] = useState<"sorting" | "graph">("sorting"); // declare the default state as string
 
   return (
-    <>
+    <div className="max-w-6xl mx-auto p-8 px-2">
       {/* the selection options for sorting options */}
-      <div className="flex justify-center m-5 text-white">
+      <div className="flex mb-6 text-white">
         <button
           className={`rounded px-4 py-2 ${
             selected === "sorting" ? "bg-blue-500" : "bg-gray-500"
@@ -28,7 +28,6 @@ const VisualizersPage: React.FC = () => {
           Graph Visualizer
         </button>
       </div>
-
       {/* if the current state of our variable selected=sorting then we load the 
         sorting component with its info, otherwise we will load the traversal
         visualiser component
@@ -38,7 +37,7 @@ const VisualizersPage: React.FC = () => {
       ) : (
         <TraversalVisualizer graphsInfo={graphsInfo} />
       )}
-    </>
+    </div>
   );
 };