Sign in and onboarding step

"use client";
import * as React from "react";
import { OnboardingStep, SignIn, type SignInProvider, type SignInState } from "@/components/ui/notchset/blocks/sign-in";
import { TextField } from "@/components/ui/notchset/text-field";

/* the product's mark, at the top of the card */
const Logo = () => (
  <svg width="12" height="12" viewBox="28 28 44 44" fill="currentColor" aria-hidden>
    <path d="M30.5 43.5H69.5Q72 43.5 72 46V54Q72 56.5 69.5 56.5H30.5Q28 56.5 28 54V46Q28 43.5 30.5 43.5Z" />
    <path d="M46 28H54Q56.5 28 56.5 30.5V69.5Q56.5 72 54 72H46Q43.5 72 43.5 69.5V30.5Q43.5 28 46 28Z" />
  </svg>
);

const EMAIL = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;

export default function SignInDemo() {
  const [state, setState] = React.useState<SignInState>("form");
  const [email, setEmail] = React.useState("maya@notchset.com");
  const [error, setError] = React.useState<string | null>(null);
  const [provider, setProvider] = React.useState<SignInProvider>();
  const [step, setStep] = React.useState(1);
  return (
    <div className="flex flex-wrap items-start justify-center gap-10">
      <SignIn
        state={state}
        email={email}
        onEmail={(v) => {
          setEmail(v);
          setError(null);
        }}
        error={error}
        logo={<Logo />}
        product="Notchset"
        onLink={() => (EMAIL.test(email) ? setState("sent") : setError("Use your work address, like you@company.com"))}
        onPasskey={() => setState("passkey")}
        provider={provider}
        onProvider={(p) => {
          setProvider(p);
          setState("provider");
        }}
        onResend={() => {}}
        onBack={() => setState("form")}
        onOpenLink={() => setState("form")}
      />
      {/* after the link: one question per screen */}
      <OnboardingStep
        step={step}
        of={2}
        title={step === 1 ? "Name your workspace" : "Invite your team"}
        hint="This is what your team sees."
        onBack={step > 1 ? () => setStep(1) : undefined}
        next={{ label: step === 1 ? "Continue" : "Open my workspace", onClick: () => setStep(step === 1 ? 2 : 1) }}
      >
        <TextField key={step} label={step === 1 ? "Workspace name" : "Emails"} defaultValue={step === 1 ? "Notchset" : ""} placeholder={step === 2 ? "tomas@notchset.com, ines@notchset.com" : undefined} />
      </OnboardingStep>
    </div>
  );
}