mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-11 18:45:41 +00:00
Added back button to article layout
This commit is contained in:
parent
6b4d2b21fd
commit
dec912f2a5
@ -1,10 +1,12 @@
|
|||||||
import {ReactNode} from 'react'
|
import React, {ReactNode} from 'react'
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import {usePathname} from 'next/navigation'
|
import {usePathname} from 'next/navigation'
|
||||||
import {Container} from '@/components/Container'
|
import {Container} from '@/components/Container'
|
||||||
import {formatDate} from '@/lib/formatDate'
|
|
||||||
import {Prose} from '@/components/ui/Prose'
|
import {Prose} from '@/components/ui/Prose'
|
||||||
import {Views} from '@/components/ui/Views'
|
import {Views} from '@/components/ui/Views'
|
||||||
|
import {ArrowDownIcon} from '@/components/icons/ArrowDownIcon'
|
||||||
|
import {formatDate} from '@/lib/formatDate'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
type ArticleLayout = {
|
type ArticleLayout = {
|
||||||
children?: ReactNode
|
children?: ReactNode
|
||||||
@ -88,6 +90,16 @@ export function ArticleLayout({
|
|||||||
<Container className="mt-16 lg:mt-32">
|
<Container className="mt-16 lg:mt-32">
|
||||||
<div className="xl:relative">
|
<div className="xl:relative">
|
||||||
<div className="mx-auto max-w-2xl">
|
<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>
|
<article>
|
||||||
<header className="flex flex-col">
|
<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">
|
<h1 className="mt-6 text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
|
||||||
|
Loading…
Reference in New Issue
Block a user