From 5d2a1167131df0a722ee476d202c47181f3dd29a Mon Sep 17 00:00:00 2001
From: the-shivam-gupta <109647722+the-shivam-gupta@users.noreply.github.com>
Date: Fri, 22 Sep 2023 09:16:17 +0530
Subject: [PATCH] Sorted the cards in alphabetical order. (#57)

---
 app/datasets/page.tsx | 24 +++++++++++++++++++++---
 app/prompts/page.tsx  | 16 ++++++++++++++--
 app/tools/page.tsx    | 20 +++++++++++++++++---
 3 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/app/datasets/page.tsx b/app/datasets/page.tsx
index 3747337..af93413 100644
--- 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
index 8cae15b..56ab4ea 100644
--- 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
index 5bef999..2b49f53 100644
--- 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>
   );
 }