optimize elements by reducing the bundle size required

app/src/ui/elements/auth/AuthScreen.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import { useAuthStrategies } from "../hooks/use-auth";
+import { AuthForm } from "./AuthForm";
+
+export type AuthScreenProps = {
+   method?: "POST" | "GET";
+   action?: "login" | "register";
+   logo?: ReactNode;
+   intro?: ReactNode;
+};
+
+export function AuthScreen({ method = "POST", action = "login", logo, intro }: AuthScreenProps) {
+   const { strategies, basepath, loading } = useAuthStrategies();
+
+   return (
+      <div className="flex flex-1 flex-col select-none h-dvh w-dvw justify-center items-center bknd-admin">
+         {!loading && (
+            <div className="flex flex-col gap-4 items-center w-96 px-6 py-7">
+               {logo ? logo : null}
+               {typeof intro !== "undefined" ? (
+                  intro
+               ) : (
+                  <div className="flex flex-col items-center">
+                     <h1 className="text-xl font-bold">Sign in to your admin panel</h1>
+                     <p className="text-primary/50">Enter your credentials below to get access.</p>
+                  </div>
+               )}
+               <AuthForm auth={{ basepath, strategies }} method={method} action={action} />
+            </div>
+         )}
+      </div>
+   );
+}