[update] migrate the project formatter from prettier and eslint to biome

components/mdx/Blockquote.tsx

@@ -2,7 +2,7 @@ const Blockquote = (props: JSX.IntrinsicElements["blockquote"]) => {
   return (
     <blockquote
       className={
-        "not-prose scroll-mt-20 my-5 px-5 py-4 bg-gray-100 dark:bg-gray-800 dark:border-gray-700 border-gray-300 border-l-4"
+        "not-prose my-5 scroll-mt-20 border-gray-300 border-l-4 bg-gray-100 px-5 py-4 dark:border-gray-700 dark:bg-gray-800"
       }
     >
       {props.children}

components/mdx/H2.tsx

@@ -1,6 +1,6 @@
 const H2 = (props: JSX.IntrinsicElements["h2"]) => {
   return (
-    <h2 className={`caption-font scroll-mt-20`} id={props.id}>
+    <h2 className={"caption-font scroll-mt-20"} id={props.id}>
       {props.children}
     </h2>
   );

components/mdx/ImageWrapper.tsx

@@ -2,9 +2,9 @@
 // but all the attributes of the img tag.
 const ImageWrapper = (props: JSX.IntrinsicElements["img"]) => {
   return (
-    <div className="flex flex-col my-5">
+    <div className="my-5 flex flex-col">
       <img alt={props.alt} className="mx-auto my-0" src={props.src} />
-      <div className="mx-auto my-1 text-sm text-gray-500 dark:text-gray-300">{props.alt}</div>
+      <div className="mx-auto my-1 text-gray-500 text-sm dark:text-gray-300">{props.alt}</div>
     </div>
   );
 };

components/mdx/PreWrapper.tsx

@@ -23,7 +23,7 @@ const PreWrapper = ({ children }: { children: JSX.Element }) => {
 
   return (
     <div
-      className="relative flat-scrollbar-normal"
+      className="flat-scrollbar-normal relative"
       dir="ltr"
       onMouseLeave={onExit}
       onMouseMove={onEnter}
@@ -32,14 +32,14 @@ const PreWrapper = ({ children }: { children: JSX.Element }) => {
       {hovered && (
         <Button
           aria-label="Copy code"
-          className={`absolute right-2 top-2 h-8 w-8 rounded p-1 ${copied ? "hover:text-green-500 text-green-500" : ""}`}
+          className={`absolute top-2 right-2 h-8 w-8 rounded p-1 ${copied ? "text-green-500 hover:text-green-500" : ""}`}
           onClick={onCopy}
           variant={"outline"}
         >
           {copied ? <FaCheck /> : <IoCopyOutline />}
         </Button>
       )}
-      <pre className="p-2 dark:bg-[#0d1117] bg-[#F6F8FA] rounded-md flat-scrollbar-normal not-prose text-sm dark:selection:bg-gray-700 selection:bg-gray-300 selection:text-inherit">
+      <pre className="flat-scrollbar-normal not-prose rounded-md bg-[#F6F8FA] p-2 text-sm selection:bg-gray-300 selection:text-inherit dark:bg-[#0d1117] dark:selection:bg-gray-700">
         {children}
       </pre>
     </div>

components/mdx/TableWrapper.tsx

@@ -1,6 +1,6 @@
 const TableWrapper = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="w-full overflow-x-auto flat-scrollbar-normal">
+    <div className="flat-scrollbar-normal w-full overflow-x-auto">
       <table>{children}</table>
     </div>
   );