From ebbdff4a5a3e436c1b1e4d17258cc38f62f8b7c2 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 22 Feb 2024 09:29:49 -0600
Subject: [PATCH] Animate PREV/NEXT links

---
 src/photo/PhotoDetailPage.tsx | 37 ++++++++++++++++++++++-------------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/photo/PhotoDetailPage.tsx b/src/photo/PhotoDetailPage.tsx
index 6bde1144..ac4e4c3f 100644
--- a/src/photo/PhotoDetailPage.tsx
+++ b/src/photo/PhotoDetailPage.tsx
@@ -95,20 +95,29 @@ export default function PhotoDetailPage({
           tag={tag}
           animateOnFirstLoadOnly
         />}
-        contentSide={<div className={clsx(
-          'grid grid-cols-2',
-          'gap-0.5 sm:gap-1',
-          'md:flex md:gap-4',
-          'user-select-none',
-        )}>
-          <PhotoLinks {...{
-            photo,
-            photos,
-            tag,
-            camera,
-            simulation,
-          }} />
-        </div>}
+        contentSide={<AnimateItems
+          animateOnFirstLoadOnly
+          type="bottom"
+          items={[
+            <div
+              key="PhotoLinks"
+              className={clsx(
+                'grid grid-cols-2',
+                'gap-0.5 sm:gap-1',
+                'md:flex md:gap-4',
+                'user-select-none',
+              )}
+            >
+              <PhotoLinks {...{
+                photo,
+                photos,
+                tag,
+                camera,
+                simulation,
+              }} />
+            </div>,
+          ]}
+        />}
       />
     </div>
   );