chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add forward/back navigation to gallery

Browse Source
This commit is contained in:
Chuck Dries
2021-06-19 13:43:28 -07:00
parent f3195c748a
commit 78e8da5e8e
4 changed files with 56 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/index.js
View File

@@ -154,7 +154,7 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
className={classnames(
'hover:underline inline-block p-3 px-5 my-3 text-lg rounded-md border-2 arrow-right-after font-bold font-serif',
isClient && 'text-muted-dark bg-muted-light hover:border-muted border-muted-dark')}
to="/photogallery"
to="/photogallery/"
>
Photography Gallery
</Link>

18
src/pages/photogallery.js
View File

@@ -1,5 +1,5 @@
import * as React from 'react';
import { graphql } from 'gatsby';
import { graphql, Link } from 'gatsby';
import { navigate } from 'gatsby';
import { Helmet } from 'react-helmet';
@@ -19,13 +19,23 @@ const GalleryPage = ({ data }) => {
<title>Photo Gallery | Chuck Dries</title>
<body className="bg-black text-white" />
</Helmet>
<div className="bg-black min-h-screen 2xl:container">
<nav className="mt-0 mb-4">
<button
className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before absolute"
className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before mr-1"
onClick={() => navigate(-1)}
type="button"
>back</button>
<h1 className="text-5xl mt-3 ml-5 font-serif font-black z-10 relative">Photo Gallery</h1>
<Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
to="/"
>home</Link>
<Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
to="/photogallery/"
>gallery</Link>
</nav>
<div className="bg-black min-h-screen 2xl:container">
<h1 className="text-5xl mt-0 ml-5 font-serif font-black z-10 relative">Photo Gallery</h1>
<div className="mx-auto">
<MasonryGallery
images={images}