first commit

components/auth/login-form.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+
+import { Button } from "@/components/ui/button";
+
+import { signin } from "@/actions/auth-actions";
+import { Loader } from "lucide-react";
+import Link from "next/link";
+import { useActionState } from "react";
+import { PhoneInput } from "../ui/phone-input";
+
+export default function LoginForm() {
+	const [state, formAction, isPending] = useActionState(signin, {
+		message: "",
+		status: "",
+	});
+
+	return (
+		<form className="bg-white overflow-clip dark:bg-transparent dark:border-2 w-full max-w-xs mx-auto rounded-lg shadow mt-4" action={formAction}>
+			<h4 className="text-center rounded m-2 text-xl font-bold dark:text-white text-gray-600 dark:bg-gray-900 bg-gray-200 py-4">Login</h4>
+			<div className="py-2 px-10">
+				<div className="grid gap-4">
+					<PhoneInput
+						id="phone-number"
+						name="phoneNumber"
+						maxLength={8}
+						placeholder="Enter phone number"
+						defaultCountry="MV"
+					/>
+
+					{state.status === "error" && (
+						<p className="text-red-500 text-sm">{state.message}</p>
+					)}
+					<Button className="dark:bg-gray-800 w-full dark:text-white" disabled={isPending} type="submit">
+						{isPending ? <Loader className="animate-spin" /> : "Request OTP"}
+					</Button>
+				</div>
+				<div className="my-4 text-center text-sm">
+					Don&apos;t have an account?{" "}
+					<Link href="signup" className="underline">
+						Sign up
+					</Link>
+				</div>
+			</div>
+		</form>
+	);
+}