feat: add difficulty labels & other utils

src/components/ChapterButtons.astro

@@ -0,0 +1,53 @@
+---
+interface Props {
+  previous?: {
+        name: string
+        url: string
+        label?: string
+        icon?: string
+    }
+  next?: {
+        name: string
+        url: string
+        label?: string
+        icon?: string
+    }
+}
+const { previous, next } = Astro.props
+import { Icon } from 'astro-icon/components'
+import BlurryDivider from './BlurryDivider.astro'
+---
+<section class="w-full">
+    <BlurryDivider />
+    <div class="w-fit md:w-full flex flex-col md:flex-row mx-auto">
+    {
+        previous ? 
+            <a class={`max-w-96 button has-icon ml-0 mt-3 content-left lg:mt-0 lg:ml-3 rounded-md text-white hover:cursor-pointer appearance-none h-16`} href={previous.url}>
+                <div class="flex">
+                    <Icon name={previous.icon ? previous.icon : 'line-md:arrow-left'} class="mr-2 shrink-0" />
+                    <div class="leading-5">
+                        <p class="text-xs font-thin">{previous.label ? previous.label : "Previous Page"}</p>
+                        <p class="line-clamp-2">{previous.name}</p>
+                    </div>
+                </div>
+            </a>
+            
+        : ''
+    }
+    <div class="flex-grow hidden md:block" />
+    {
+        next ? 
+            <a class={`max-w-96 button has-icon bg-[var(--action-color)] ml-0 mt-3 lg:mt-0 lg:ml-3 rounded-md text-white hover:cursor-pointer appearance-none h-16`} href={next.url}>
+                <div class="flex">
+                    <div class="leading-5">
+                        <p class="text-xs font-thin">{next.label ? next.label : "Next Page"}</p>
+                        <p class="line-clamp-2">{next.name}</p>
+                    </div>
+                    <Icon name={next.icon ? next.icon : 'line-md:arrow-right'} class="shrink-0" />
+                </div>
+            </a>
+            
+        : ''
+    }
+    </div>
+</section>