add neighboring route nav

src/app/(default)/climb/[[...slug]]/page.tsx

@@ -4,14 +4,16 @@ import { AreaCrumbs } from '@/components/breadcrumbs/AreaCrumbs'
 import { AreaPageContainer } from '../../components/ui/AreaPageContainer'
 import PhotoMontage, { UploadPhotoCTA } from '@/components/media/PhotoMontage'
 import { StickyHeaderContainer } from '../../components/ui/StickyHeaderContainer'
-import { parseUuidAsFirstParam } from '@/js/utils'
+import { parseUuidAsFirstParam, climbLeftRightIndexComparator } from '@/js/utils'
 import { PageWithCatchAllUuidProps } from '@/js/types/pages'
 import { getClimbById } from '@/js/graphql/api'
 import { ClimbData } from './components/ClimbData'
 import { ContentBlock } from './components/ContentBlock'
 import { Summary } from '../../components/ui/Summary'
 import { SiblingClimbs } from './components/SiblingClimbs'
 import { LazyAreaMap } from '@/components/maps/AreaMap'
+import { ClimbType } from '@/js/types'
+import { NeighboringRoutesNav } from '@/components/crag/NeighboringRoute'
 
 export default async function Page ({ params }: PageWithCatchAllUuidProps): Promise<any> {
   const climbId = parseUuidAsFirstParam({ params })
@@ -23,8 +25,21 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
   const photoList = climb.media
 
   const {
-    id, ancestors, pathTokens
+    id, ancestors, pathTokens, parent
   } = climb
+
+  let leftClimb: ClimbType | null = null
+  let rightClimb: ClimbType | null = null
+
+  const sortedClimbs = [...parent.climbs].sort(climbLeftRightIndexComparator)
+
+  for (const [index, climb] of sortedClimbs.entries()) {
+    if (climb.id === id) {
+      leftClimb = (sortedClimbs[index - 1] != null) ? sortedClimbs[index - 1] : null
+      rightClimb = sortedClimbs[index + 1] != null ? sortedClimbs[index + 1] : null
+    }
+  }
+
   return (
     <AreaPageContainer
       photoGallery={
@@ -38,6 +53,7 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
           <AreaCrumbs pathTokens={pathTokens} ancestors={ancestors} />
         </StickyHeaderContainer>
         }
+      leftRightNav={<NeighboringRoutesNav climbs={[leftClimb, rightClimb]} parentArea={parent} />}
       summary={{
         left: <ClimbData {...climb} />,
         right: <ContentBlock content={climb.content} />

src/app/(default)/components/ui/AreaPageContainer.tsx

@@ -11,11 +11,12 @@ export const AreaPageContainer: React.FC<{
   photoGallery?: React.ReactNode
   pageActions?: React.ReactNode
   breadcrumbs?: React.ReactNode
+  leftRightNav?: React.ReactNode
   map?: React.ReactNode
   summary?: { left: React.ReactNode, right: React.ReactNode }
   mapContainerClass?: string
   children?: React.ReactNode
-}> = ({ photoGallery, pageActions, breadcrumbs, map, summary, children, mapContainerClass = 'w-full mt-16 relative h-[90vh] border-t' }) => {
+}> = ({ photoGallery, pageActions, breadcrumbs, leftRightNav, map, summary, children, mapContainerClass = 'w-full mt-16 relative h-[90vh] border-t' }) => {
   return (
     <article>
       <div className='default-page-margins my-2'>
@@ -27,6 +28,7 @@ export const AreaPageContainer: React.FC<{
           {pageActions == null ? <AreaPageActionsSkeleton /> : pageActions}
         </div>
         {breadcrumbs == null ? <BreadCrumbsSkeleton /> : breadcrumbs}
+        {leftRightNav != null && leftRightNav}
         {summary != null && <Summary columns={summary} />}
         {children == null ? <ContentSkeleton /> : children}
       </div>

src/components/crag/NeighboringRoute.tsx

@@ -1,17 +1,19 @@
+import Link from 'next/link'
+import { CaretCircleLeft, CaretCircleRight } from '@phosphor-icons/react/dist/ssr'
+import clx from 'classnames'
+
 import Grade from '@/js/grades/Grade'
 import { AreaType, Climb } from '@/js/types'
 import { removeTypenameFromDisciplines } from '@/js/utils'
 
-import clx from 'classnames'
-
 interface NeighboringRoutesNavProps {
   climbs: Array<Climb | null>
   parentArea: AreaType
 }
 
 export const NeighboringRoutesNav = ({ climbs, parentArea }: NeighboringRoutesNavProps): JSX.Element => {
   return (
-    <div className={clx('flex flex-row', (climbs[0] == null) ? 'justify-end' : 'justify-between')}>
+    <div className={clx('my-4 flex flex-row', (climbs[0] == null) ? 'justify-end' : 'justify-between')}>
       {climbs.map((climb, index) => {
         if (climb == null) { return ('') }
         const sanitizedDisciplines = removeTypenameFromDisciplines(climb.type)
@@ -30,22 +32,15 @@ export const NeighboringRoutesNav = ({ climbs, parentArea }: NeighboringRoutesNa
 }
 
 const NeighboringRoute: React.FC<{ climb: Climb, gradeStr: String | undefined, isLeftRoute: boolean }> = ({ climb, gradeStr, isLeftRoute }) => {
-  const url = `/climbs/${climb.id}`
-  const strictlySport = (climb.type?.sport ?? false) &&
-    !((climb.type?.trad ?? false) || (climb.type?.aid ?? false))
+  const url = `/climb/${climb.id}`
+
   return (
-    <a className={clx('flex items-center', isLeftRoute ? 'flex-row' : ' flex-row-reverse')} href={url}>
-      <div className={
-                clx('rounded-full h-6 w-6 grid place-content-center text-sm text-neutral-content flex-shrink-0',
-                  strictlySport ? 'bg-sport-climb-cue' : 'bg-neutral')
-            }
-      >
-        {isLeftRoute ? '<' : '>'}
-      </div>
-      <div className='flex flex-col content-start ml-4 mr-4'>
-        <div>{climb.name}</div>
+    <Link className={clx('btn btn-lg no-animation flex items-center', isLeftRoute ? 'flex-row' : ' flex-row-reverse')} href={url}>
+      {isLeftRoute ? <CaretCircleLeft size={28} /> : <CaretCircleRight size={28} />}
+      <div className='hidden lg:flex flex-col gap-y-1 content-start mx-4 text-secondary'>
+        <div className='text-sm'>{climb.name}</div>
         <div className='text-xs '>{gradeStr}</div>
       </div>
-    </a>
+    </Link>
   )
 }