chore: migrate from preact to react (#4435)

src/components/TopicDetail/TopicDetail.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'preact/hooks';
+import { useMemo, useRef, useState } from 'react';
 import CloseIcon from '../../icons/close.svg';
 import SpinnerIcon from '../../icons/spinner.svg';
 
@@ -147,7 +147,7 @@ export function TopicDetail() {
         {isLoading && (
           <div className="flex w-full justify-center">
             <img
-              src={SpinnerIcon}
+              src={SpinnerIcon as any}
               alt="Loading"
               className="h-6 w-6 animate-spin fill-blue-600 text-gray-200 sm:h-12 sm:w-12"
             />
@@ -192,7 +192,7 @@ export function TopicDetail() {
                   setIsContributing(false);
                 }}
               >
-                <img alt="Close" class="h-5 w-5" src={CloseIcon} />
+                <img alt="Close" className="h-5 w-5" src={CloseIcon as any} />
               </button>
             </div>
 
@@ -205,7 +205,7 @@ export function TopicDetail() {
 
             {/* Contribution */}
             <div className="mt-8 flex-1 border-t">
-              <p class="mb-2 mt-2 text-sm leading-relaxed text-gray-400">
+              <p className="mb-2 mt-2 text-sm leading-relaxed text-gray-400">
                 Help others learn by submitting links to learn more about this topic{' '}
               </p>
               <button
@@ -229,7 +229,7 @@ export function TopicDetail() {
           </>
         )}
       </div>
-      <div class="fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80"></div>
+      <div className="fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80"></div>
     </div>
   );
 }