feat: add contributors map component to /about page

src/components/about/ContributorMap.tsx

@@ -0,0 +1,122 @@
+import BaseMap from '../maps/BaseMap'
+import { Marker } from 'react-map-gl'
+import contributorsData from '../../assets/contributors-map.json'
+import useAutoSizing from '../../js/hooks/finder/useMapAutoSizing'
+import { MobileDialog, DialogContent, DialogTrigger } from '../ui/MobileDialog'
+import { MapPinIcon, UsersIcon } from '@heroicons/react/24/outline'
+import { XViewStateType } from '../../js/types'
+import { useEffect } from 'react'
+
+export interface ContributorType{
+  firstName?: string
+  githubId?: string
+  favoriteCrag?: string
+}
+interface ContributorDataType{
+  properties: ContributorType
+  type: string
+  geometry: GeometryType
+}
+
+interface MapProps{contributor: ContributorType}
+
+const ContributorCardTrigger: React.FC<MapProps> = ({ contributor }) => {
+  return (
+    <MobileDialog modal>
+      <DialogTrigger asChild>
+        <div className=''>
+          <MapPinIcon className='h-12 w-12 rounded-lg' />
+        </div>
+      </DialogTrigger>
+      <DialogContent small>
+        <ContributorCard contributor={contributor} />
+      </DialogContent>
+    </MobileDialog>
+  )
+}
+
+const ContributorCard: React.FC<MapProps> = ({ contributor }) => {
+  const { firstName, githubId, favoriteCrag } = contributor
+  return (
+
+    <div className='grid md:grid-cols-6 px-11 pt-11 pb-16 gap-2 md:gap-4 bg-white rounded-lg'>
+
+      <div className='md:col-span-1'>
+        <UsersIcon className='h-12 w-12 rounded-lg border-slate-100 border' />
+      </div>
+      <div className='gap-10 md:col-span-5'>
+
+        <p className='text-base-content/60 font-semibold'>{firstName}</p>
+
+        {githubId != null &&
+          <a
+            className='underline pb-4'
+            target='_blank'
+            rel='noreferrer'
+            href={`github.com/${githubId}`}
+          >GitHub
+          </a>}
+
+        {favoriteCrag != null && <p>Favorite crag: {favoriteCrag}</p>}
+      </div>
+    </div>
+  )
+}
+
+interface GeometryType{
+  type: string
+  coordinates: number[]
+}
+
+export function ContributorMap (): JSX.Element {
+  const mapElementId = 'contributors-map'
+
+  const contributors: ContributorDataType[] = contributorsData.features
+
+  const initialViewState: XViewStateType = {
+    width: 300,
+    height: 1024,
+    padding: { top: 20, bottom: 20, left: 20, right: 20 },
+    bearing: 0,
+    zoom: 1,
+    pitch: 0,
+    latitude: 36.079693291728546,
+    longitude: -115.5,
+    bbox: [0, 0, 0, 0]
+  }
+  const [viewState, height, setViewState] = useAutoSizing({ geojson: null, elementId: mapElementId })
+
+  useEffect(() => {
+    setViewState(initialViewState)
+  }, [])
+
+  return (
+    <>
+      <div
+        id={mapElementId}
+        className='z-10 bg-gray-200'
+        style={{ height }}
+      >
+        <BaseMap
+          height={height}
+          viewstate={viewState}
+          onViewStateChange={setViewState}
+          light
+          interactiveLayerIds={[]}
+        >
+          {contributors.map((feature, index) => {
+            return (
+              <Marker
+                key={index} longitude={feature.geometry.coordinates[0]}
+                latitude={feature.geometry.coordinates[1]}
+              >
+                <ContributorCardTrigger contributor={feature.properties} />
+              </Marker>
+            )
+          })}
+        </BaseMap>
+      </div>
+    </>
+
+  )
+}

src/components/ui/MobileDialog.tsx

@@ -5,6 +5,7 @@ import clx from 'classnames'
 interface Props {
   title?: string | ReactNode
   fullScreen?: boolean
+  small?: boolean
   children: ReactNode | ReactNode[]
   onInteractOutside?: (event: any) => void
 }
@@ -14,12 +15,12 @@ interface Props {
  * @param fullScreen Optional flag to expand the dialog to max screen width & height
  */
 export const DialogContent = React.forwardRef<any, Props>(
-  ({ title, children, fullScreen = false, ...props }, forwardedRef) =>
+  ({ title, children, small = false, fullScreen = false, ...props }, forwardedRef) =>
     (
       <DialogPrimitive.Portal>
         <DialogPrimitive.Overlay className='z-40 fixed inset-0 bg-black/60' />
         <DialogPrimitive.Content
-          className={clx(fullScreen ? 'dialog-wide' : 'dialog-default')} {...props} ref={forwardedRef}
+          className={clx(fullScreen ? 'dialog-wide' : 'dialog-default', small ? 'dialog-small' : '')} {...props} ref={forwardedRef}
         >
           <DialogPrimitive.Title className='dialog-title'>
             {title}

src/pages/about.tsx

@@ -5,6 +5,7 @@ import Cairn from '../assets/icons/stones.png'
 import Seed from '../assets/icons/seed.png'
 import Watering from '../assets/icons/watering-can.png'
 import SeoTags from '../components/SeoTags'
+import { ContributorMap } from '../components/about/ContributorMap'
 
 const About = (): JSX.Element => {
   return (
@@ -52,6 +53,9 @@ const About = (): JSX.Element => {
           <p className='mt-8 italic text-xl text-slate-700 text-base'>OpenBeta is a 501(c)(3) nonprofit collective.  Donations are tax-deductible to the extent allowed by law.</p>
         </div>
       </div>
+
+      <ContributorMap />
+
       <div className='text-center text-black py-24 bg-ob-primary px-4'>
         <h2 className='mb-2 text-black'>Learn more</h2>
         <p>Why is an <b>open license</b> important?</p>

src/styles/defaults.css

@@ -132,6 +132,10 @@ a:active, a:focus {
     @apply  top-0 left-0 h-screen md:dialog-center fixed z-50 w-screen max-w-screen-md bg-base-100 lg:drop-shadow-lg overflow-y-auto h-fit max-h-screen lg:max-h-[95vh];
   }
 
+  .dialog-small {
+    @apply  top-0 left-0 md:dialog-center fixed z-50 w-full  md:h-auto max-w-screen-sm bg-base-100 lg:drop-shadow-lg overflow-y-auto;
+  }
+
   .dialog-wide {
     @apply top-0 left-0 fixed z-50 w-full h-full w-screen h-screen bg-base-100 overflow-y-auto overscroll-contain;
   }