Update download button and community section

Author: Jacobdeanr

app/skyboxes/[slug]/skybox-client.tsx

@@ -189,11 +189,9 @@ export default function SkyboxClient({ slug, skyboxData, previewCount }: SkyboxC
       {/* Featured Maps */}
       {skyboxData.steamMaps && skyboxData.steamMaps.length > 0 && (
         <div className="mt-16">
-          <div className="flex items-center justify-between mb-6">
-            <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
-              Featured in these maps
-            </h2>
-          </div>
+          <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent mb-6">
+            Featured in these maps
+          </h2>
           <MapList maps={skyboxData.steamMaps} />
         </div>
       )}

app/ui/downloadbutton.tsx

@@ -51,9 +51,9 @@ export default function DownloadButton({
           {label}
           {(format || size) && (
             <span className="font-normal opacity-90 ml-1.5">
-              ({format ?? ''}
+              {format ?? ''}
               {format && size ? ' - ' : ''}
-              {size ?? ''})
+              ({size ?? ''})
             </span>
           )}
         </span>

app/ui/maplist.tsx

@@ -1,39 +1,35 @@
 type MapLink = { name: string; url: string };
 import { withBase } from '@/app/lib/basepath';
 
-export default function MapList({ maps }: { maps?: MapLink[] }) {
-  if (!maps?.length)
-    return (
-      <p className="italic text-neutral-500">No maps featuring this skybox yet.</p>
-    );
-
+export default function MapList({ maps = [] }: { maps?: MapLink[] }) {
   return (
     <section>
-      <h4 className="mb-2 text-sm font-bold uppercase tracking-wider">
+      <h4 className="mb-2 text-sm font-bold uppercase tracking-wider flex items-center">
         Community Maps
+        <span className="ml-2 rounded-full bg-neutral-800 px-2 py-0.5 text-xs font-medium text-blue-400">
+          {maps.length}
+        </span>
       </h4>
 
-      <ul className="grid gap-3 sm:grid-cols-2">
-        {maps.map((m) => (
-          <li key={m.url}>
-            <a
-              href={m.url}
-              target="_blank"
-              className="
-                group flex items-center justify-between
-                rounded-md px-3 py-2
-                bg-neutral-800 hover:bg-neutral-700
-                transition
-              "
-            >
-              <span className="text-sm text-neutral-100">{m.name}</span>
-
-              {/* external-link arrow */}
-              <img src={`${withBase(`/icons/maximize.svg`)}`} alt="" className="invert w-4 h-4" />
-            </a>
-          </li>
-        ))}
-      </ul>
+      {maps.length === 0 ? (
+        <p className="italic text-neutral-500">No maps featuring this skybox yet.</p>
+      ) : (
+        <ul className="grid gap-3 sm:grid-cols-2">
+          {maps.map((m) => (
+            <li key={m.url}>
+              <a
+                href={m.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group flex items-center justify-between rounded-md px-3 py-2 bg-neutral-800 hover:bg-neutral-700 transition"
+              >
+                <span className="text-sm text-neutral-100">{m.name}</span>
+                <img src={withBase('/icons/maximize.svg')} alt="" className="invert w-4 h-4" />
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
     </section>
   );
-}
+}