Helou, alguien que maneje Auth.js beta

[fresh nacelle]

 <GridLayout
  lineVariant="none"
  crosshairs={{
    topLeft: true,
    topRight: true,
    bottomLeft: true,
    bottomRight: true,
  }}
  className="bg-muted p-4"
>
  <div className="space-y-6">
    <h3 className="text-xl font-semibold">Authentication</h3>
    <p className="text-sm text-muted-foreground">
      Link your account to third-party authentication providers.
    </p>

    <div className="space-y-4">
      {['google', 'github'].map(async (provider) => {
        const isLinked = accounts?.some(
          (acc) => acc.provider === provider
        );
        const ProviderIcon = providerIcons[provider];

        return (
          <div
            key={provider}
            className="flex items-center justify-between gap-4 rounded-md border p-2"
          >
            <div className="flex items-center gap-3">
              {ProviderIcon && <ProviderIcon className="size-5" />}
              <span className="capitalize">{provider}</span>
            </div>

            {isLinked ? (
              <form
                action={async () => {
                  'use server';
                  await unlinkAccount(provider);
                }}
              >
                <Button
                  variant="destructive"
                  disabled={hasOnlyOneAccount}
                >
                  Desconectar
                </Button>
              </form>
            ) : (
              <form
                action={async () => {
                  'use server';
                  await linkAccount(provider);
                }}
              >
                <Button disabled={hasOnlyOneAccount}>Conectar</Button>
              </form>
            )}
          </div>
        );
      })}
    </div>
  </div>
</GridLayout>