From a16041c753a2dada9ba220ca8c12c24601110b5a Mon Sep 17 00:00:00 2001
From: Daniel O'Connell <github@ahiru.pl>
Date: Sun, 20 Oct 2024 18:35:17 +0200
Subject: [PATCH] Proper base

---
 app/components/HowCanIHelp/Base.tsx      | 10 ++++++++-
 app/routes/how-can-i-help.career.tsx     | 28 ++++++------------------
 app/routes/how-can-i-help.community.tsx  |  6 ++++-
 app/routes/how-can-i-help.donate.tsx     |  6 ++++-
 app/routes/how-can-i-help.grassroots.tsx |  6 ++++-
 app/routes/how-can-i-help.knowledge.tsx  |  6 ++++-
 app/routes/how-can-i-help.volunteer.tsx  |  6 ++++-
 7 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/app/components/HowCanIHelp/Base.tsx b/app/components/HowCanIHelp/Base.tsx
index 8f7c8f23..2fdf389b 100644
--- a/app/components/HowCanIHelp/Base.tsx
+++ b/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>
diff --git a/app/routes/how-can-i-help.career.tsx b/app/routes/how-can-i-help.career.tsx
index d5ac9bec..87f83e45 100644
--- a/app/routes/how-can-i-help.career.tsx
+++ b/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>
   )
 }
diff --git a/app/routes/how-can-i-help.community.tsx b/app/routes/how-can-i-help.community.tsx
index a7d8666e..07d78217 100644
--- a/app/routes/how-can-i-help.community.tsx
+++ b/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>
+  )
 }
diff --git a/app/routes/how-can-i-help.donate.tsx b/app/routes/how-can-i-help.donate.tsx
index 5e56ab7e..6946da0d 100644
--- a/app/routes/how-can-i-help.donate.tsx
+++ b/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>
+  )
 }
diff --git a/app/routes/how-can-i-help.grassroots.tsx b/app/routes/how-can-i-help.grassroots.tsx
index c6bbc87d..75cf52fd 100644
--- a/app/routes/how-can-i-help.grassroots.tsx
+++ b/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>
+  )
 }
diff --git a/app/routes/how-can-i-help.knowledge.tsx b/app/routes/how-can-i-help.knowledge.tsx
index 18d12081..c1734559 100644
--- a/app/routes/how-can-i-help.knowledge.tsx
+++ b/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>
+  )
 }
diff --git a/app/routes/how-can-i-help.volunteer.tsx b/app/routes/how-can-i-help.volunteer.tsx
index 678ffe15..1bc73101 100644
--- a/app/routes/how-can-i-help.volunteer.tsx
+++ b/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>
+  )
 }