Sign in

"use client";
import { useState, type SyntheticEvent } from "react";
import { LuArrowRight, LuLock, LuMail } from "react-icons/lu";
import { Alert, Button, CheckboxField, Input } from "@nexera-ui/react";

/** Sign in: email and password, remember me, and a link to reset the password. */
export default function SignIn() {
  const [submitted, setSubmitted] = useState(false);
  const [showPassword, setShowPassword] = useState(false);
  const onSubmit = (event: SyntheticEvent<HTMLFormElement>) => {
    event.preventDefault();
    setSubmitted(true); // replace with your sign-in request
  };
  return (
    <div className="@container grid min-h-[560px] place-items-center bg-page px-4 py-10">
      <div className="grid w-full max-w-sm gap-6 rounded-xl border border-default bg-surface p-6 shadow-sm @sm:p-8">
        <header className="grid gap-1">
          <h2 className="text-heading-h3 text-primary">Sign in to Northwind</h2>
          <p className="text-body-default text-secondary">Welcome back. Use your work email.</p>
        </header>
        {submitted ? (
          <Alert
            tone="success"
            title="Signed in"
            description="This is a demo, so nothing was sent."
            politeness="polite"
          />
        ) : null}
        <form className="grid gap-4" onSubmit={onSubmit}>
          <Input
            label="Work email"
            type="email"
            name="email"
            autoComplete="email"
            leadingIcon={<LuMail />}
            placeholder="you@northwind.io"
            isRequired
          />
          <div className="grid gap-2">
            <Input
              label="Password"
              type={showPassword ? "text" : "password"}
              name="password"
              autoComplete="current-password"
              leadingIcon={<LuLock />}
              isRequired
            />
            <CheckboxField
              label="Show password"
              isSelected={showPassword}
              onChange={setShowPassword}
            />
          </div>
          <div className="flex flex-wrap items-center justify-between gap-3">
            <CheckboxField label="Remember me" name="remember" />
            <a
              href="#forgot-password"
              className="text-body-small text-brand-text underline underline-offset-4"
            >
              Forgot password?
            </a>
          </div>
          <Button type="submit" size="lg" trailingIcon={<LuArrowRight />} className="w-full">
            Sign in
          </Button>
        </form>
        <p className="text-center text-body-small text-secondary">
          New to Northwind?{" "}
          <a href="#create-account" className="text-brand-text underline underline-offset-4">
            Create an account
          </a>
        </p>
      </div>
    </div>
  );
}