loop prev next nav arrows, add index between arrows

Author: davidlyons

src/pages/work/[...slug].astro

@@ -29,30 +29,37 @@ const projects = (await getCollection('work'))
   .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
 
 const currentIndex = projects.findIndex((item) => item.id === entry.id);
-const prevEntry = projects[currentIndex - 1];
-const nextEntry = projects[currentIndex + 1];
+const prevEntry = projects[(currentIndex - 1 + projects.length) % projects.length];
+const nextEntry = projects[(currentIndex + 1) % projects.length];
 ---
 
 <BaseLayout {...entry.data}>
   <div class="grid-cols-12 lg:grid">
     <div class="col-span-3">
       <div class="sticky top-12">
         <!-- Previous / Next arrows -->
-        <div class="mb-6 flex gap-4">
+        <div class="mb-7 flex items-center gap-2">
           {
             prevEntry && (
               <a
                 href={`/work/${prevEntry.id}`}
                 aria-label="Previous"
-                class="px-3 py-2 dark:text-white"
+                class="py-1 pr-3 pl-1 opacity-60 transition-opacity hover:opacity-100 dark:text-white"
               >
                 <Icon name="arrow-left" size={20} />
               </a>
             )
           }
+          <span class="w-12 text-center opacity-60">
+            {`${currentIndex + 1} / ${projects.length}`}
+          </span>
           {
             nextEntry && (
-              <a href={`/work/${nextEntry.id}`} aria-label="Next" class="px-3 py-2 dark:text-white">
+              <a
+                href={`/work/${nextEntry.id}`}
+                aria-label="Next"
+                class="px-3 py-1 opacity-60 transition-opacity hover:opacity-100 dark:text-white"
+              >
                 <Icon name="arrow-right" size={20} />
               </a>
             )