From dec912f2a588894c05288405259e1bbb9a37073e Mon Sep 17 00:00:00 2001
From: r-freeman <hello@ryanfreeman.dev>
Date: Fri, 17 Feb 2023 22:33:59 +0000
Subject: [PATCH] Added back button to article layout

---
 components/layouts/ArticleLayout.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/components/layouts/ArticleLayout.tsx b/components/layouts/ArticleLayout.tsx
index 24725e3..eb39ac1 100644
--- a/components/layouts/ArticleLayout.tsx
+++ b/components/layouts/ArticleLayout.tsx
@@ -1,10 +1,12 @@
-import {ReactNode} from 'react'
+import React, {ReactNode} from 'react'
 import Head from 'next/head'
 import {usePathname} from 'next/navigation'
 import {Container} from '@/components/Container'
-import {formatDate} from '@/lib/formatDate'
 import {Prose} from '@/components/ui/Prose'
 import {Views} from '@/components/ui/Views'
+import {ArrowDownIcon} from '@/components/icons/ArrowDownIcon'
+import {formatDate} from '@/lib/formatDate'
+import Link from 'next/link'
 
 type ArticleLayout = {
     children?: ReactNode
@@ -88,6 +90,16 @@ export function ArticleLayout({
             <Container className="mt-16 lg:mt-32">
                 <div className="xl:relative">
                     <div className="mx-auto max-w-2xl">
+                        <Link href="/writing" replace>
+                            <button
+                                type="button"
+                                aria-label="Go back to articles"
+                                className="group mb-8 flex h-10 w-10 items-center justify-center rounded-full bg-white shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 transition dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0 dark:ring-white/10 dark:hover:border-zinc-700 dark:hover:ring-white/20 lg:absolute lg:-left-5 lg:mb-0 lg:-mt-2 xl:-top-1.5 xl:left-0 xl:mt-0"
+                            >
+                                <ArrowDownIcon
+                                    className="h-4 w-4 stroke-zinc-500 transition group-hover:stroke-zinc-700 dark:stroke-zinc-500 dark:group-hover:stroke-zinc-400 rotate-90"/>
+                            </button>
+                        </Link>
                         <article>
                             <header className="flex flex-col">
                                 <h1 className="mt-6 text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">