From 580e14f39bf189412b129ededa60e45fb59f33c7 Mon Sep 17 00:00:00 2001
From: James Gray <101061708+randombeeper@users.noreply.github.com>
Date: Mon, 22 Jul 2024 17:48:23 -0500
Subject: [PATCH] fix(showcase list) - now they're sorted (#2282)

* fix(showcase list) - now they're sorted

* linter fixes
---
 packages/website/src/components/Home.js | 44 ++++++++++++++-----------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/packages/website/src/components/Home.js b/packages/website/src/components/Home.js
index 179b2c234..df41fbcf2 100644
--- a/packages/website/src/components/Home.js
+++ b/packages/website/src/components/Home.js
@@ -106,28 +106,32 @@ function Home() {
               </div>
             </div>
             <div className="mt-8 grid grid-cols-4 gap-0.5 md:grid-cols-6 lg:mt-0 lg:grid-cols-8">
-              {showcaseProjects.map(({ name, href, image }) => (
-                <div
-                  key={href}
-                  className="col-span-1 flex justify-center py-2 px-2 text-center"
-                >
-                  <a
-                    href={href}
-                    rel="noreferrer"
-                    target="_blank"
-                    alt={`Discover DocSearch on the ${name} documentation`}
+              {showcaseProjects
+                .sort((a, b) => {
+                  return a.name.localeCompare(b.name);
+                })
+                .map(({ name, href, image }) => (
+                  <div
+                    key={href}
+                    className="col-span-1 flex justify-center py-2 px-2 text-center"
                   >
-                    <img
-                      className="inline-block h-10 w-10"
-                      src={withBaseUrl(image)}
+                    <a
+                      href={href}
+                      rel="noreferrer"
+                      target="_blank"
                       alt={`Discover DocSearch on the ${name} documentation`}
-                    />
-                    <div className="text-description uppercase text-xs py-2 font-semibold">
-                      {name}
-                    </div>
-                  </a>
-                </div>
-              ))}
+                    >
+                      <img
+                        className="inline-block h-10 w-10"
+                        src={withBaseUrl(image)}
+                        alt={`Discover DocSearch on the ${name} documentation`}
+                      />
+                      <div className="text-description uppercase text-xs py-2 font-semibold">
+                        {name}
+                      </div>
+                    </a>
+                  </div>
+                ))}
             </div>
           </div>
         </div>