feat(blog): add BackButton component to blog header

Author: epifaniofrancisco

app/components/BackButton.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const router = useRouter()
+const canGoBack = useCanGoBack()
+
+withDefaults(
+  defineProps<{
+    class?: string
+  }>(),
+  {
+    class: '',
+  },
+)
+</script>
+
+<template>
+  <button
+    v-if="canGoBack"
+    type="button"
+    :class="[
+      'inline-flex items-center gap-2 p-1.5 -mx-1.5 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0',
+      $props.class,
+    ]"
+    @click="router.back()"
+  >
+    <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
+    <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
+  </button>
+</template>

app/pages/blog/index.vue

@@ -21,9 +21,12 @@ useSeoMeta({
   <main class="container w-full flex-1 py-12 sm:py-16 overflow-x-hidden">
     <article class="max-w-2xl mx-auto">
       <header class="mb-12">
-        <h1 class="font-mono text-3xl sm:text-4xl font-medium">
-          {{ $t('blog.heading') }}
-        </h1>
+        <div class="flex items-baseline justify-between gap-4 mb-4">
+          <h1 class="font-mono text-3xl sm:text-4xl font-medium">
+            {{ $t('blog.heading') }}
+          </h1>
+          <BackButton />
+        </div>
         <p class="text-fg-muted text-lg">
           {{ $t('tagline') }}
         </p>