Sorted the cards in alphabetical order. (#57)

PriyansuMaurya · Sep 22, 2023 · 5d2a116 · 5d2a116 · vercel · Sep 22, 2023
1 parent 5f140ae
commit 5d2a116
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 8 deletions.
diff --git a/app/datasets/page.tsx b/app/datasets/page.tsx
@@ -22,14 +22,32 @@ export default function Datasets() {
     }
   }, [theme]);
 
+  // Sort datasets by title in alphabetical order
+  const sortedDatasets = [...datasets].sort((a: Data, b: Data) =>
+    a.title.localeCompare(b.title)
+  );
+
   return (
     <div className="flex">
       <main className="mt-8 flex bg-[--light-bg] dark:bg-[--dark-bg] dark:text-[--light-bg] flex-row justify-center flex-wrap md:m-12">
-        {datasets.map((dataset: Data, index: number) => (
-          <Card id={index} datasets={true} data={dataset} setModalActive={setModalActive} setModalData={setModalData} />
+        {sortedDatasets.map((dataset: Data, index: number) => (
+          <Card
+            key={index}
+            id={index}
+            datasets={true}
+            data={dataset}
+            setModalActive={setModalActive}
+            setModalData={setModalData}
+          />
         ))}
       </main>
-      {modalActive && <Modal data={modalData} datasets={true} setModalActive={setModalActive} />}
+      {modalActive && (
+        <Modal
+          data={modalData}
+          datasets={true}
+          setModalActive={setModalActive}
+        />
+      )}
     </div>
   );
 }
diff --git a/app/prompts/page.tsx b/app/prompts/page.tsx
@@ -22,11 +22,17 @@ export default function Prompts() {
     }
   }, [theme]);
 
+  // Sort prompts by title in alphabetical order
+  const sortedPrompts = [...prompts].sort((a: Data, b: Data) =>
+    a.title.localeCompare(b.title)
+  );
+
   return (
     <div className="flex">
       <main className="mt-8 flex bg-[--light-bg] dark:bg-[--dark-bg] dark:text-[--light-bg] flex-row justify-center flex-wrap md:m-12">
-        {prompts.map((prompt: Data, index: number) => (
+        {sortedPrompts.map((prompt: Data, index: number) => (
           <Card
+            key={index}
             id={index}
             prompts={true}
             data={prompt}
@@ -35,7 +41,13 @@ export default function Prompts() {
           />
         ))}
       </main>
-      {modalActive && <Modal data={modalData} prompts={true} setModalActive={setModalActive} />}
+      {modalActive && (
+        <Modal
+          data={modalData}
+          prompts={true}
+          setModalActive={setModalActive}
+        />
+      )}
     </div>
   );
 }
diff --git a/app/tools/page.tsx b/app/tools/page.tsx
@@ -28,14 +28,28 @@ export default function Tools() {
     }
   }, [theme]);
 
+  // Sort tools by title in alphabetical order
+  const sortedTools = [...tools].sort((a: Data, b: Data) =>
+    a.title.localeCompare(b.title)
+  );
+
   return (
     <div className="flex">
       <main className="mt-8 flex bg-[--light-bg] dark:bg-[--dark-bg] dark:text-[--light-bg] flex-row justify-center flex-wrap md:m-12">
-        {tools.map((tool: Data, index: number) => (
-          <Card id={index} tools={true} data={tool} setModalActive={setModalActive} setModalData={setModalData} />
+        {sortedTools.map((tool: Data, index: number) => (
+          <Card
+            key={index}
+            id={index}
+            tools={true}
+            data={tool}
+            setModalActive={setModalActive}
+            setModalData={setModalData}
+          />
         ))}
       </main>
-      {modalActive && <Modal data={modalData} tools={true} setModalActive={setModalActive} />}
+      {modalActive && (
+        <Modal data={modalData} tools={true} setModalActive={setModalActive} />
+      )}
     </div>
   );
 }