sarlink-portal/components/auth/login-form.tsx

"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>
	);
}