fix(auth): wrap dynamic searchParams in Suspense to fix prerendering error

app/auth/sign-up/page.tsx

@@ -1,11 +1,27 @@
 import { SignUpForm } from "@/components/sign-up-form";
+import { Suspense } from "react";
 
-export default function Page() {
+export default function Page({
+  searchParams,
+}: {
+  searchParams: Promise<{ email?: string }>;
+}) {
   return (
     <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
       <div className="w-full max-w-sm">
-        <SignUpForm />
+        <Suspense>
+          <SignUpFormContent searchParams={searchParams} />
+        </Suspense>
       </div>
     </div>
   );
 }
+
+async function SignUpFormContent({
+  searchParams,
+}: {
+  searchParams: Promise<{ email?: string }>;
+}) {
+  const email = (await searchParams).email || "";
+  return <SignUpForm initialEmail={email} />;
+}

components/sign-up-form.tsx

@@ -18,9 +18,10 @@ import { useState } from "react";
 
 export function SignUpForm({
   className,
+  initialEmail = "",
   ...props
-}: React.ComponentPropsWithoutRef<"div">) {
-  const [email, setEmail] = useState("");
+}: React.ComponentPropsWithoutRef<"div"> & { initialEmail?: string }) {
+  const [email, setEmail] = useState(initialEmail);
   const [password, setPassword] = useState("");
   const [repeatPassword, setRepeatPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
@@ -75,6 +76,8 @@ export function SignUpForm({
                   required
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
+                  readOnly={!!initialEmail}
+                  className={initialEmail ? "bg-muted text-muted-foreground" : ""}
                 />
               </div>
               <div className="grid gap-2">