Trying to fix lint

app/components/HowCanIHelp/Base.tsx

@@ -5,9 +5,10 @@ import {helpUrl} from '~/routesMapper'
 import {ReactNode} from 'react'
 
 type BaseProps = {
-  title: string
+  title: string | ReactNode
   children: ReactNode
 } & HelpMethodsProps
+
 export default function Base({title, current, children, ...props}: BaseProps) {
   return (
     <Page>

app/components/HowCanIHelp/CatgoryCarousel.tsx

@@ -8,7 +8,12 @@ import './category-carousel.css'
 
 const PER_BOX = 320
 
-const CategoryCarousel = ({title, category}: {title: string; category: PageId}) => {
+interface CategoryCarouselProps {
+  title: React.ReactNode
+  category: PageId
+}
+
+const CategoryCarousel = ({title, category}: CategoryCarouselProps) => {
   const componentRef = useRef<HTMLDivElement>(null)
   const [shown, setShown] = useState(0)
   const [offset, setOffset] = useState(0)

app/components/VideoThumbnail/videothumbnail.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
-import PlayIcon from '~/components/icons-generated/Play';
+import React from 'react'
+import PlayIcon from '~/components/icons-generated/Play'
 
 interface VideoThumbnailProps {
-  imageUrl: string;
-  altText: string;
-  tag?: string;
+  imageUrl: string
+  altText: string
+  tag?: string
 }
 
-const VideoThumbnail: React.FC<VideoThumbnailProps> = ({ imageUrl, altText, tag }) => {
+const VideoThumbnail: React.FC<VideoThumbnailProps> = ({imageUrl, altText, tag}) => {
   return (
     <div className="relative rounded-lg overflow-hidden shadow-md">
       {tag && (
@@ -22,7 +22,7 @@ const VideoThumbnail: React.FC<VideoThumbnailProps> = ({ imageUrl, altText, tag
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default VideoThumbnail;
+export default VideoThumbnail

app/root.css

@@ -843,4 +843,4 @@ button {
   }
 }
 
-/* end mobile */
+/* end mobile */

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

@@ -1,15 +1,10 @@
 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 HelpItem from '~/components/HowCanIHelp/HelpItem'
 import CategoryCarousel from '~/components/HowCanIHelp/CatgoryCarousel'
-import Testimonial from '~/components/Testimonial'
 import Base from '~/components/HowCanIHelp/Base'
 import {useEffect} from 'react'
 import VideoImg from '~/assets/video_thumbnail.png'
-import PlayIcon from '~/components/icons-generated/Play'
-import VideoThumbnail from '~/components/VideoThumbnail/videothumbnail';
+import VideoThumbnail from '~/components/VideoThumbnail/videothumbnail'
 
 export const meta: MetaFunction = () => {
   return [{title: 'How Can I Help? - AISafety.info'}]
@@ -35,53 +30,56 @@ const TopText = () => (
         </div>
       </div>
     </div>
-    </>
+  </>
 )
 const WhatYouCanDo = () => (
   <>
-    <h2 className="teal-500 padding-bottom-64">
-      What you can do, right now
-    </h2>
+    <h2 className="teal-500 padding-bottom-64">What you can do, right now</h2>
     <div>
       <HelpItem
         title="Share a video or article on social media"
         tag="2 min"
         links={[
           {
             tag: 'Top recommendation',
-            title: 'A.I. - Humanity\'s Final Invention?',
+            title: "A.I. - Humanity's Final Invention?",
             action: 'https://youtu.be/fa8k8IQ1_X0?si=b2l0Ex6KQvt6JyQD',
-            image: (
-              <VideoThumbnail
-                imageUrl={VideoImg}
-                altText="video-playlist"
-              />
-            )
+            image: <VideoThumbnail imageUrl={VideoImg} altText="video-playlist" />,
           },
         ]}
         additionalInfo={
           <>
             Or, choose another from our{' '}
-            <a href="https://www.youtube.com/playlist?list=PLWQikawCP4UFM_ziLf9X2rcOLCSbqisRE" className="small-bold teal-500">
+            <a
+              href="https://www.youtube.com/playlist?list=PLWQikawCP4UFM_ziLf9X2rcOLCSbqisRE"
+              className="small-bold teal-500"
+            >
               Intro to AI Safety video playlist
             </a>
           </>
         }
       >
-        <p className="padding-bottom-16">We recommend sharing “A.I. - Humanity’s Final Invention?”, which gives an accessible overview to the topic of AI and existential risk</p>
+        <p className="padding-bottom-16">
+          We recommend sharing “A.I. - Humanity’s Final Invention?”, which gives an accessible
+          overview to the topic of AI and existential risk
+        </p>
       </HelpItem>
 
       <HelpItem
         title="Send an email to a politician"
         tag="8 min"
         links={[
           {
-            title: 'PauseAI\’s email-a-politician email builder',
+            title: 'PauseAI’s email-a-politician email builder',
             action: 'https://pauseai.info/email-builder',
           },
         ]}
       >
-        <p className="padding-bottom-16"> Contacting politicians raises awareness among those who can shape policy and make a real difference</p>
+        <p className="padding-bottom-16">
+          {' '}
+          Contacting politicians raises awareness among those who can shape policy and make a real
+          difference
+        </p>
       </HelpItem>
 
       <HelpItem
@@ -94,7 +92,9 @@ const WhatYouCanDo = () => (
           },
         ]}
       >
-        <p className="padding-bottom-16">Protests happen in major cities globally, and need people like you!</p>
+        <p className="padding-bottom-16">
+          Protests happen in major cities globally, and need people like you!
+        </p>
       </HelpItem>
 
       <HelpItem
@@ -106,7 +106,10 @@ const WhatYouCanDo = () => (
           },
         ]}
       >
-        <p className="padding-bottom-16">Take whatever chance you can to promote this topic to friends, those in your social media or professional network, or whomever</p>
+        <p className="padding-bottom-16">
+          Take whatever chance you can to promote this topic to friends, those in your social media
+          or professional network, or whomever
+        </p>
       </HelpItem>
 
       <HelpItem
@@ -122,18 +125,25 @@ const WhatYouCanDo = () => (
           <>
             You could also look into{' '}
             <a href="https://pauseai.info/action" className="small-bold teal-500">
-            other major petitions
+              other major petitions
             </a>
           </>
         }
       >
-        <p>Add your signature next to Elon Musk, Steve Wozniak, and Stuart Russel in the most well-known AI Safety petition, “Pause Giant AI Experiments: An Open Letter”</p>
+        <p>
+          Add your signature next to Elon Musk, Steve Wozniak, and Stuart Russel in the most
+          well-known AI Safety petition, “Pause Giant AI Experiments: An Open Letter”
+        </p>
       </HelpItem>
     </div>
 
     <div className="padding-bottom-80">
       <CategoryCarousel
-        title={<span>Our articles on spreading the <br/> word & grassroots activism</span>}
+        title={
+          <span>
+            Our articles on spreading the <br /> word & grassroots activism
+          </span>
+        }
         category="NM1A"
       />
     </div>
@@ -148,12 +158,17 @@ export default function Grassroots() {
     }
   }, [])
   return (
-    <Base title={<span>Spread the word & <br/> grassroots activism</span>} current="grassroots">
-
+    <Base
+      title={
+        <span>
+          Spread the word & <br /> grassroots activism
+        </span>
+      }
+      current="grassroots"
+    >
       <TopText />
 
       <WhatYouCanDo />
-
     </Base>
   )
 }