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

WIP put arrows on either side of gallery image

Browse Source
This commit is contained in:
Chuck Dries 2022-07-11 16:52:16 -07:00
parent 91c3de5544
commit d1d14f1b8f
1 changed files with 143 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/GalleryImage/GalleryImage.js
View File

@ -166,7 +166,7 @@ const GalleryImage = ({
>
gallery <span className="bg-gray-300 text-black">esc</span>
</Link>
{prevImage && (
{/* {prevImage && (
<Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
state={{
@ -179,8 +179,8 @@ const GalleryImage = ({
>
previous <span className="bg-gray-300 text-black">&#11104;</span>
</Link>
)}
{nextImage && (
)} */}
{/* {nextImage && (
<Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
state={{
@ -193,13 +193,28 @@ const GalleryImage = ({
>
next <span className="bg-gray-300 text-black">&#11106;</span>
</Link>
)}
)} */}
</nav>
<div className={classnames("flex", orientationClasses)}>
<div className="flex justify-between flex-auto items-center">
{prevImage && (
<Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1 self-stretch flex items-center bg-opacity-5 hover:bg-black"
state={{
currentIndex: currentIndex - 1,
sortedImageList,
filterKeyword,
sortKey,
}}
to={`/photogallery/${prevImage}/`}
>
previous <span className="bg-gray-300 text-black">&#11104;</span>
</Link>
)}
<div className={classnames("pb-2 flex", orientationClasses)}>
<div
className={classnames(
zoom ? "cursor-zoom-out" : "cursor-zoom-in",
"mb-2"
"mb-2 self-center"
)}
onClick={() => setZoom((_zoom) => !_zoom)}
style={{
@ -313,7 +328,21 @@ const GalleryImage = ({
</div>
</div>
</div>
<div></div>
{nextImage && (
<Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1 self-stretch flex items-center bg-opacity-5 hover:bg-black"
state={{
currentIndex: currentIndex + 1,
sortedImageList,
filterKeyword,
sortKey,
}}
to={`/photogallery/${nextImage}/`}
>
next <span className="bg-gray-300 text-black">&#11106;</span>
</Link>
)}
</div>
</div>
</>
);