chore: migrate from preact to react (#4435)

src/components/RoadCard/Editor.tsx

@@ -34,9 +34,8 @@ export function Editor(props: EditorProps) {
           e.target.select();
           copyText(e.target.value);
         }}
-      >
-        {text}
-      </textarea>
+        value={text}
+      />
     </div>
   );
 }

src/components/RoadCard/RoadCardPage.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'preact/hooks';
+import { useState } from 'react';
 
 import { useCopyText } from '../../hooks/use-copy-text';
 import { useAuth } from '../../hooks/use-auth';
@@ -113,7 +113,7 @@ export function RoadCardPage() {
 
       <div className="flex items-start gap-4 mx-0 sm:-mx-10 px-0 sm:px-10 border-b py-4">
         <StepCounter step={4} />
-        <div class="flex-grow">
+        <div className="flex-grow">
           <StepLabel label="Share your #RoadCard with others" />
           <div className={'rounded-md border bg-gray-50 p-2 text-center'}>
             <a

src/components/RoadCard/RoadmapSelect.tsx

@@ -1,5 +1,5 @@
 import { httpGet } from '../../lib/http';
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 import { pageProgressMessage } from '../../stores/page';
 import type { UserProgressResponse } from '../HeroSection/FavoriteRoadmaps';
 import { SelectionButton } from './SelectionButton';
@@ -33,19 +33,24 @@ export function RoadmapSelect(props: RoadmapSelectProps) {
   }, []);
 
   const canSelectMore = selectedRoadmaps.length < 4;
-  const allProgress = progressList?.filter(
-    (progress) => progress.resourceType === 'roadmap'
-  ) || [];
+  const allProgress =
+    progressList?.filter((progress) => progress.resourceType === 'roadmap') ||
+    [];
 
   return (
     <div className="flex flex-wrap gap-1">
-      {allProgress?.length === 0 && <p className={'text-sm text-gray-400 italic'}>No progress tracked so far.</p>}
+      {allProgress?.length === 0 && (
+        <p className={'text-sm italic text-gray-400'}>
+          No progress tracked so far.
+        </p>
+      )}
       {allProgress?.map((progress) => {
         const isSelected = selectedRoadmaps.includes(progress.resourceId);
         const canSelect = isSelected || canSelectMore;
 
         return (
           <SelectionButton
+            key={progress.resourceId}
             text={progress.resourceTitle}
             isDisabled={!canSelect}
             isSelected={isSelected}