fix(showcase list) - now they're sorted (#2282)

* fix(showcase list) - now they're sorted * linter fixes
algolia · Jul 22, 2024 · 580e14f · 580e14f
1 parent 698c1cd
commit 580e14f
Showing 1 changed file with 24 additions and 20 deletions.
diff --git 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>