1 files changed, 56 insertions, 0 deletions
diff --git a/src/components/templates/PrevNextNav.astro b/src/components/templates/PrevNextNav.astro
new file mode 100644
index 0000000..fe8bd8d
--- /dev/null
+++ b/src/components/templates/PrevNextNav.astro
@@ -0,0 +1,56 @@
+---
+interface Props {
+  previous?: string | URL;
+  next?: string | URL;
+  label?: string;
+}
+
+const { next, previous, label } = Astro.props;
+---
+
+{
+  (next || previous) && (
+    <nav>
+      {
+        previous && (
+          <p>
+            &lt; <a rel="prev" href={`/blog/${Astro.props.previous}`}
+            >Anterior</a>
+          </p>
+        )
+      }
+      {label && <span class="small" set:html={label} />}
+      {
+        next && (
+          <p>
+            <a rel="next" href={`/blog/${Astro.props.next}`}>Próximo</a> &gt;
+          </p>
+        )
+      }
+    </nav>
+  )
+}
+
+<style>
+  nav {
+    display: flex;
+    align-items: center;
+    padding-block: calc(var(--size-2) * 1em);
+    gap: calc(var(--size-2) * 1em);
+    justify-content: center;
+    & > p {
+      border-radius: calc(var(--size-0) * 1em);
+      border-width: 1px;
+      box-shadow: 0 1px 2px var(--color-light);
+      font-size: calc(var(--size-3) * 1rem);
+      font-weight: 500;
+      padding-inline: calc(var(--size-3) * 1em);
+      padding-block: calc(var(--size-2) * 1em);
+      display: inline-flex;
+      gap: calc(var(--size-2) * 1em);
+      align-items: center;
+      justify-content: center;
+      height: 2ch;
+    }
+  }
+</style>