(auth)-signup-page.tsx

import { SignUpForm } from "@/components/auth/SignUpForm/SignUpForm";

function SignUpPage() {
	return (
		<div className="flex flex-col py-12 px-4 sm:px-6 lg:px-8">
			<div className="w-full max-w-md">
				<div className="text-center mb-8">
					<h2 className="mt-6 text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
						Sign up for a new account
					</h2>
				</div>

				<div className="bg-white dark:bg-slate-950">
					<SignUpForm />
				</div>
			</div>
		</div>
	);
}

export default SignUpPage;

@modal-(...)signup-page.tsx

"use client";

import { Modal } from "@/components/Modal/Modal";
import { SignUpForm } from "@/components/auth/SignUpForm/SignUpForm";
import { useRouter } from "next/navigation";
import { useState } from "react";

export const dynamic = "force-dynamic";

export default function SignUpModal() {
	const router = useRouter();
	const [open, setOpen] = useState(true);

	return (
		<Modal
			title="Sign Up"
			open={open}
			onOpenChange={(open) => {
				setOpen(open);
				if (!open) router.back();
			}}
			contentProps={{ size: "lg" }}
		>
			<SignUpForm
				onSuccess={() => {
					setOpen(false);
				}}
			/>
		</Modal>
	);
}