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> gallery <span className="bg-gray-300 text-black">esc</span>
</Link> </Link>
{prevImage && ( {/* {prevImage && (
<Link <Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1" className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
state={{ state={{
@ -179,8 +179,8 @@ const GalleryImage = ({
> >
previous <span className="bg-gray-300 text-black">&#11104;</span> previous <span className="bg-gray-300 text-black">&#11104;</span>
</Link> </Link>
)} )} */}
{nextImage && ( {/* {nextImage && (
<Link <Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1" className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
state={{ state={{
@ -193,13 +193,28 @@ const GalleryImage = ({
> >
next <span className="bg-gray-300 text-black">&#11106;</span> next <span className="bg-gray-300 text-black">&#11106;</span>
</Link> </Link>
)} )} */}
</nav> </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 <div
className={classnames( className={classnames(
zoom ? "cursor-zoom-out" : "cursor-zoom-in", zoom ? "cursor-zoom-out" : "cursor-zoom-in",
"mb-2" "mb-2 self-center"
)} )}
onClick={() => setZoom((_zoom) => !_zoom)} onClick={() => setZoom((_zoom) => !_zoom)}
style={{ style={{
@ -313,7 +328,21 @@ const GalleryImage = ({
</div> </div>
</div> </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> </div>
</> </>
); );