Authentication

import React from 'react';
import {
  Auth0Button,
  Auth0Divider,
  Auth0Header,
  Auth0Input,
  Auth0Modal,
  Auth0ModalBody,
  Auth0ModalDescription,
  Auth0ModalHeading,
  Auth0ModalLink,
  Auth0ModalText,
  Auth0SubmitButton,
} from '@/registry/components/auth0';

<Auth0Modal>
  <Auth0Header withLogo={true} />

  <Auth0ModalBody>
    <Auth0ModalHeading>Log in</Auth0ModalHeading>
    <Auth0ModalDescription>Enter your email address to log in to Redpanda Cloud</Auth0ModalDescription>

    {/* Form */}
    <form className="space-y-4 mt-6">
      {/* Email Input */}
      <Auth0Input type="email" placeholder="Enter your email address" defaultValue="email@redpanda.com" />

      {/* Continue Button */}
      <Auth0SubmitButton>Continue</Auth0SubmitButton>
    </form>

    {/* Divider */}
    <Auth0Divider text="OR" />

    {/* OAuth Buttons */}
    <div className="space-y-3 mt-6">
      <Auth0Button provider="google">Continue with Google</Auth0Button>

      <Auth0Button provider="github">Continue with GitHub</Auth0Button>
    </div>

    {/* Sign up Link */}
    <Auth0ModalText className="text-center mt-6">
      Don't have an account? <Auth0ModalLink href="#">Sign up</Auth0ModalLink>
    </Auth0ModalText>
  </Auth0ModalBody>
</Auth0Modal>