show grade

disable buttnon animation

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

@@ -1,23 +1,33 @@
 import { ArrowsVertical } from '@phosphor-icons/react/dist/ssr'
 
-// import RouteGradeChip from '@/components/ui/RouteGradeChip'
+import RouteGradeChip from '@/components/ui/RouteGradeChip'
 import RouteTypeChips from '@/components/ui/RouteTypeChips'
 import { ArticleLastUpdate } from '@/components/edit/ArticleLastUpdate'
-import { Climb } from '@/js/types'
+import { ClimbType, AreaType } from '@/js/types'
+import Grade from '@/js/grades/Grade'
+import { removeTypenameFromDisciplines } from '@/js/utils'
 
-export const ClimbData: React.FC<Climb> = (props) => {
-  const { name, type, safety, length, grades, fa: legacyFA, authorMetadata } = props
-  console.log(safety, grades)
+export const ClimbData: React.FC<ClimbType & Pick<AreaType, 'gradeContext'> & { isBoulder: boolean }> = (props) => {
+  const { name, type, safety, length, grades, fa: legacyFA, authorMetadata, gradeContext, isBoulder } = props
+
+  const sanitizedDisciplines = removeTypenameFromDisciplines(type)
+
+  const gradeStr = new Grade(
+    gradeContext,
+    grades,
+    sanitizedDisciplines,
+    isBoulder
+  ).toString()
   return (
     <>
       <h1 className='text-4xl md:text-5xl mr-10'>
         {name}
       </h1>
       <div className='mt-6'>
         <div className='flex items-center space-x-2 w-full'>
-          {/* {gradeStr != null && (
+          {gradeStr != null && (
             <RouteGradeChip gradeStr={gradeStr} safety={safety} />
-          )} */}
+          )}
           <RouteTypeChips type={type} />
         </div>
 

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

@@ -36,7 +36,7 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
   const photoList = climb.media
 
   const {
-    id, name, ancestors, pathTokens, parent
+    id, name, type, ancestors, pathTokens, parent
   } = climb
 
   const correctSlug = getFriendlySlug(name)
@@ -72,7 +72,7 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
         }
       leftRightNav={<NeighboringRoutesNav climbs={[leftClimb, rightClimb]} parentArea={parent} />}
       summary={{
-        left: <ClimbData {...climb} />,
+        left: <ClimbData {...climb} isBoulder={type.bouldering} gradeContext={parent.gradeContext} />,
         right: <ContentBlock content={climb.content} />
       }}
       map={(

src/app/(default)/components/AreaAndClimbPageActions.tsx

@@ -27,13 +27,13 @@ export const AreaAndClimbPageActions: React.FC<{ uuid: string, name: string, tar
   }
   return (
     <ul className='flex items-center justify-between gap-2'>
-      <Link href={url} target='_new' className={clz('btn shadow-md', enableEdit ? 'btn-solid btn-accent' : 'btn-disabled')}>
+      <Link href={url} target='_new' className={clz('btn no-animation shadow-md', enableEdit ? 'btn-solid btn-accent' : 'btn-disabled')}>
         <PencilSimple size={20} weight='duotone' /> {editLabel}
       </Link>
 
       <UploadPhotoButton />
 
-      <Link href='#map' className='btn'>
+      <Link href='#map' className='btn no-animation'>
         <MapTrifold size={20} className='hidden md:inline' /> Map
       </Link>
       <SharePageURLButton path={sharePath} name={name} />

src/app/(default)/components/SharePageURLButton.tsx

@@ -25,7 +25,7 @@ export const SharePageURLButton: React.FC<{ path: string, name: string }> = ({ p
   return (
     <ControlledTooltip content={<div className='flex items-center'>Copied <Check size={16} /></div>} open={clicked}>
       <button
-        className='btn' onClick={() => {
+        className='btn no-animation' onClick={() => {
           void navigator.clipboard.writeText(url)
           setClicked(true)
         }}

src/components/media/PhotoUploadButtons.tsx

@@ -2,13 +2,13 @@ import { Camera } from '@phosphor-icons/react/dist/ssr'
 import { BaseUploaderWithNext13Context } from './BaseUploader'
 
 export const UploadPhotoButton: React.FC = () => (
-  <BaseUploaderWithNext13Context className='btn'>
+  <BaseUploaderWithNext13Context className='btn no-animation'>
     <Camera size={20} /> <span className='hidden md:inline'>Photo</span>
   </BaseUploaderWithNext13Context>
 )
 
 export const UploadPhotoTextOnlyButton: React.FC = () => (
-  <BaseUploaderWithNext13Context className='btn btn-outline btn-primary'>
+  <BaseUploaderWithNext13Context className='btn btn-outline btn-primary no-animation'>
     <span>Add photo</span>
   </BaseUploaderWithNext13Context>
 )