add main action bar to area page

src/app/area/[...slug]/page.tsx

@@ -1,8 +1,6 @@
-import Link from 'next/link'
 import { notFound, redirect } from 'next/navigation'
-import slugify from 'slugify'
 import { validate } from 'uuid'
-import { MapPinLine, PlusCircle } from '@phosphor-icons/react/dist/ssr'
+import { MapPinLine } from '@phosphor-icons/react/dist/ssr'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import Markdown from 'react-markdown'
 
@@ -11,11 +9,11 @@ import { getArea } from '@/js/graphql/getArea'
 import { StickyHeaderContainer } from '@/app/components/ui/StickyHeaderContainer'
 import { GluttenFreeCrumbs } from '@/components/ui/BreadCrumbs'
 import { ArticleLastUpdate } from '@/components/edit/ArticleLastUpdate'
-import { getMapHref } from '@/js/utils'
+import { getMapHref, getFriendlySlug } from '@/js/utils'
 import AreaMap from '@/components/area/areaMap'
 import { PageContainer } from '@/app/components/ui/PageContainer'
-import { AreaList } from 'app/editArea/[slug]/general/components/AreaList'
-import { AreaEntityBullet } from '@/components/cues/Entities'
+import { AreaPageActions } from '../../components/AreaPageActions'
+import { SubAreasSection } from './SubAreasSection'
 
 /**
  * Cache duration in seconds
@@ -35,7 +33,7 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
     notFound()
   }
 
-  const optionalNamedSlug = slugify(params.slug?.[1] ?? '', { lower: true, strict: true }).substring(0, 50)
+  const userProvidedSlug = getFriendlySlug(params.slug?.[1] ?? '')
 
   const { area } = pageData
 
@@ -44,10 +42,10 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
   const { description } = content
   const { lat, lng } = metadata
 
-  const friendlySlug = slugify(areaName, { lower: true, strict: true }).substring(0, 50)
+  const correctSlug = getFriendlySlug(areaName)
 
-  if (friendlySlug !== optionalNamedSlug) {
-    redirect(`/area/${uuid}/${friendlySlug}`)
+  if (correctSlug !== userProvidedSlug) {
+    redirect(`/area/${uuid}/${correctSlug}`)
   }
 
   return (
@@ -91,33 +89,17 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
             <ArticleLastUpdate {...authorMetadata} />
           </div>
 
+          <AreaPageActions uuid={uuid} areaName={areaName} />
         </div>
+
         <div className='area-climb-page-summary-right'>
           <h3>Description</h3>
           <Markdown>{description}</Markdown>
         </div>
 
       </div>
 
-      <div className='w-full mt-16'>
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-3'>
-            <h3 className='flex items-center gap-4'><AreaEntityBullet />{area.children.length} Areas</h3>
-            {/* <AddAreaTrigger parentName={parentName} parentUuid={parentUuid} onSuccess={onChange}>
-              <AddAreaTriggerButtonSm />
-            </AddAreaTrigger> */}
-          </div>
-          <Link href={`/editArea/${uuid}/general#addArea`}>
-            <button className='btn btn-primary'>
-              <PlusCircle size={24} weight='duotone' /> New Areas
-            </button>
-          </Link>
-        </div>
-
-        <hr className='my-4 border-1 border-base-content' />
-
-        <AreaList parentUuid={uuid} areas={area.children} />
-      </div>
+      <SubAreasSection area={area} />
     </PageContainer>
   )
 }

src/app/components/ShareAreaLinkButton.tsx

@@ -0,0 +1,37 @@
+'use client'
+import { useState, useEffect } from 'react'
+import { LinkSimple, Check } from '@phosphor-icons/react/dist/ssr'
+
+import { getFriendlySlug } from '@/js/utils'
+import { ControlledTooltip } from '@/components/ui/Tooltip'
+
+/**
+ * Copy area link to clipboard button
+ */
+export const ShareAreaLinkButton: React.FC<{ uuid: string, areaName: string }> = ({ uuid, areaName }) => {
+  const slug = getFriendlySlug(areaName)
+  const url = `https://openbeta.io/area/${uuid}/${slug}`
+
+  const [clicked, setClicked] = useState(false)
+
+  useEffect(() => {
+    let timerId: NodeJS.Timeout
+    if (clicked) {
+      timerId = setTimeout(() => setClicked(false), 3000)
+    }
+    return () => clearTimeout(timerId)
+  }, [clicked])
+
+  return (
+    <ControlledTooltip content={<div className='flex items-center'>Copied <Check size={16} /></div>} open={clicked}>
+      <button
+        className='btn btn-sm' onClick={() => {
+          void navigator.clipboard.writeText(url)
+          setClicked(true)
+        }}
+      >
+        <LinkSimple size={20} />Share
+      </button>
+    </ControlledTooltip>
+  )
+}

src/components/area/areaMap.tsx

@@ -67,7 +67,7 @@ export default function AreaMap (props: AreaMapProps): JSX.Element {
     <div className='w-full h-full'>
       <Map
         ref={mapRef}
-        id='areaHeatmap2'
+        id='map'
         initialViewState={{
           bounds: computeVS(props.area),
           fitBoundsOptions: { padding }

src/components/ui/Tooltip.tsx

@@ -18,16 +18,32 @@ export default function Tooltip ({ content, enabled = true, className = '', chil
     <Popover.Root>
       <Popover.Trigger className={className}>{children}</Popover.Trigger>
       {enabled &&
-        <Popover.Content
-          className='z-20 text-sm text-base-300 bg-tooltip rounded-md p-2 drop-shadow-lg border max-w-[300px] focus:outline-none'
-          side='top'
-          align='start'
-          alignOffset={-40}
-          collisionPadding={8}
-        >
+        <Content>
           {content}
-          <Popover.Arrow className='stroke-tooltip fill-tooltip' />
-        </Popover.Content>}
+        </Content>}
     </Popover.Root>
   )
 }
+
+export const ControlledTooltip: React.FC<{ open: boolean, content: React.ReactNode, children: React.ReactNode }> = ({ open, content, children }) => (
+  <Popover.Root open={open}>
+    <Popover.Trigger asChild>{children}</Popover.Trigger>
+    <Content>
+      {content}
+    </Content>
+  </Popover.Root>)
+
+/**
+ * Tooltip body
+ */
+const Content: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <Popover.Content
+    className='z-20 text-sm text-secondary bg-tooltip rounded-btn p-2 drop-shadow-lg border max-w-[300px] focus:outline-none'
+    side='top'
+    align='start'
+    collisionPadding={8}
+  >
+    {children}
+    <Popover.Arrow className='stroke-tooltip fill-tooltip' />
+  </Popover.Content>
+)

src/js/utils.ts

@@ -1,3 +1,5 @@
+import slugify from 'slugify'
+
 import { ClimbTypeToColor } from './constants'
 import { formatDistanceToNowStrict, differenceInYears, format } from 'date-fns'
 
@@ -261,3 +263,9 @@ export const relayMediaConnectionToMediaArray = (mediaConnection: MediaConnectio
   if (mediaConnection == null) return []
   return mediaConnection.edges.map(entry => entry.node)
 }
+
+/**
+ * Convert climb/area name to url-friendly slug
+ * @param name
+ */
+export const getFriendlySlug = (name: string): string => slugify(name, { lower: true, strict: true }).substring(0, 50)