Proper base

app/components/HowCanIHelp/Base.tsx

@@ -2,8 +2,14 @@ import {Link} from '@remix-run/react'
 import Page from '~/components/Page'
 import HelpMethods from '~/components/HowCanIHelp/HelpMethods'
 import {HelpPage, helpUrl} from '~/routesMapper'
+import {ReactNode} from 'react'
 
-export default function Base({title, subpage}: {title: string; subpage: HelpPage}) {
+type BaseProps = {
+  title: string
+  subpage: HelpPage
+  children: ReactNode
+}
+export default function Base({title, subpage, children}: BaseProps) {
   return (
     <Page>
       <div className="page-body">
@@ -14,6 +20,8 @@ export default function Base({title, subpage}: {title: string; subpage: HelpPage
         <div>
           <h1 className="teal-500 padding-bottom-40">{title}</h1>
 
+          {children}
+
           <HelpMethods current={subpage} />
         </div>
       </div>

app/routes/how-can-i-help.career.tsx

@@ -1,13 +1,10 @@
-import {Link} from '@remix-run/react'
-import Page from '~/components/Page'
 import {MetaFunction} from '@remix-run/node'
 import CardSmall from '~/components/CardSmall'
 import DropDown from '~/components/DropDown'
 import {Microscope, GovermentBuilding, PuzzlePieces} from '~/components/icons-generated'
-import HelpMethods from '~/components/HowCanIHelp/HelpMethods'
 import HelpItem from '~/components/HowCanIHelp/HelpItem'
-import {helpUrl} from '~/routesMapper'
 import CategoryCarousel from '~/components/HowCanIHelp/CatgoryCarousel'
+import Base from '~/components/HowCanIHelp/Base'
 /* import './howcanihelp.css' */
 
 export const meta: MetaFunction = () => {
@@ -437,25 +434,14 @@ const CareerPaths = () => (
 
 export default function HowCanIHelp() {
   return (
-    <Page>
-      <div className="page-body">
-        <div className="padding-bottom-16">
-          <Link to={helpUrl()}>How can I help with AI Safety?</Link>
-        </div>
-
-        <div>
-          <h1 className="teal-500 padding-bottom-40">Start a career</h1>
-          <CareerPaths />
+    <Base title="Start a career" subpage="career">
+      <CareerPaths />
 
-          <ResearchPath />
+      <ResearchPath />
 
-          <GovernancePath />
+      <GovernancePath />
 
-          <FieldBuildingPath />
-
-          <HelpMethods current="career" />
-        </div>
-      </div>
-    </Page>
+      <FieldBuildingPath />
+    </Base>
   )
 }

app/routes/how-can-i-help.community.tsx

@@ -6,5 +6,9 @@ export const meta: MetaFunction = () => {
 }
 
 export default function Community() {
-  return <Base title="Join the community" subpage="community" />
+  return (
+    <Base title="Join the community" subpage="community">
+      <div>fill me out, please</div>
+    </Base>
+  )
 }

app/routes/how-can-i-help.donate.tsx

@@ -6,5 +6,9 @@ export const meta: MetaFunction = () => {
 }
 
 export default function Donate() {
-  return <Base title="Donate to AISafety.info" subpage="donate" />
+  return (
+    <Base title="Donate to AISafety.info" subpage="donate">
+      <div>fill me out, please</div>
+    </Base>
+  )
 }

app/routes/how-can-i-help.grassroots.tsx

@@ -6,5 +6,9 @@ export const meta: MetaFunction = () => {
 }
 
 export default function Grassroots() {
-  return <Base title="Help with grassroots AI Safety" subpage="grassroots" />
+  return (
+    <Base title="Help with grassroots AI Safety" subpage="grassroots">
+      <div>fill me out, please</div>
+    </Base>
+  )
 }

app/routes/how-can-i-help.knowledge.tsx

@@ -6,5 +6,9 @@ export const meta: MetaFunction = () => {
 }
 
 export default function Knowledge() {
-  return <Base title="Share knowledge about AI Safety" subpage="knowledge" />
+  return (
+    <Base title="Share knowledge about AI Safety" subpage="knowledge">
+      <div>fill me out, please</div>
+    </Base>
+  )
 }

app/routes/how-can-i-help.volunteer.tsx

@@ -6,5 +6,9 @@ export const meta: MetaFunction = () => {
 }
 
 export default function Volunteer() {
-  return <Base title="Volunteer for AISafety.info" subpage="volunteer" />
+  return (
+    <Base title="Volunteer for AISafety.info" subpage="volunteer">
+      <div>fill me out, please</div>
+    </Base>
+  )
 }