feat: add contribution cta to alphabetic route with no words

Author: babblebey

src/pages/browse/[alpha]/[page].astro

@@ -41,7 +41,7 @@ export async function getStaticPaths({ paginate }) {
 
     <!-- Words List -->
     <div>
-      {page.data.map(word => (
+      {page.data.length ? page.data.map(word => (
         <a href={`/browse/${word.slug}`}
           class="flex items-center md:text-lg justify-between no-underline w-full p-4 even:bg-gray-100 hover:bg-gray-100/50"
         >
@@ -50,7 +50,32 @@ export async function getStaticPaths({ paginate }) {
             <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
           </svg>
         </a>
-      ))}
+      )) : (
+        <div class="mt-10 space-y-6">
+          <p>
+            Looks like this alphabet is feeling a bit lonely! 🤔 Why not be the first to add a word and give it some company?
+          </p>  
+          <section class="rounded-lg border shadow-sm">
+            <div class="space-y-1.5 p-3 md:p-6 flex flex-col lg:flex-row lg:items-center justify-between gap-4">
+              <div class="space-y-1">
+                <h3 class="font-semibold tracking-tight text-2xl">Contribute Words</h3>
+                <p class="text-sm">
+                  You can contribute new words to the jargons.dev dictionary.
+                </p>
+              </div>
+              <a
+                class="flex items-center w-fit justify-center no-underline px-4 py-2 rounded-md border border-gray-200 bg-white hover:bg-gray-100 text-sm shadow-sm hover:shadow transition-colors"
+                href="/editor/new"
+              >
+                <span>Start Now</span>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-4 h-4">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
+                </svg> 
+              </a>
+            </div>
+          </section>
+        </div>
+      )}
     </div>
 
     <!-- Pagination -->