"use client";

import { useState } from "react";
import { Button, Card, Checkbox, Input, toast } from "@sisyphos-ui/react";

export function SignInCard() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [remember, setRemember] = useState(true);
  const [busy, setBusy] = useState(false);

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setBusy(true);
    // Replace with your auth call.
    await new Promise((r) => setTimeout(r, 700));
    setBusy(false);
    toast.success("Signed in");
  };

  return (
    <Card className="w-full max-w-sm">
      <Card.Body>
        <form onSubmit={onSubmit} className="flex flex-col gap-4">
          <div className="text-center">
            <h2 className="text-[22px] font-bold tracking-tight">
              Welcome back
            </h2>
            <p className="mt-1 text-sm text-zinc-500">
              Sign in to your account
            </p>
          </div>

          <Input
            label="Email"
            type="email"
            placeholder="you@company.com"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
            autoComplete="email"
          />
          <Input
            label="Password"
            type="password"
            placeholder="••••••••"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
            autoComplete="current-password"
          />

          <div className="flex items-center justify-between text-xs">
            <Checkbox
              checked={remember}
              onChange={setRemember}
              color="primary"
              size="sm"
              label="Remember me"
            />
            <a href="/forgot" className="font-medium text-orange-600">
              Forgot?
            </a>
          </div>

          <Button type="submit" fullWidth loading={busy}>
            Sign in
          </Button>

          <p className="text-center text-xs text-zinc-500">
            No account? <a href="/signup" className="font-medium text-orange-600">Create one</a>
          </p>
        </form>
      </Card.Body>
    </Card>
  );
}
Components used

Used in templates
