Tableau des domaines

importer React à partir de « react »;
imporert { DomainTable } à partir de « @auth0/universal-components-react/spa »;
importer { Auth0Provider } à partir de « @auth0/auth0-react »;
importer { Auth0ComponentProvider } à partir de « @auth0/universal-components-react/spa »;
importer { useNavigate } à partir de « react-router-dom »;

function DomainsManagementPage() {
  const navigate = useNavigate();

  return (
    <div className="max-w-6xl mx-auto p-6">
      <DomainTable
        schema={{
          create: {
            domain: {
              regex: /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$/i,
              errorMessage: « Veuillez saisir un domaine valide (p. ex., example.com) ».,
            },
          },
        }}
        createAction={{
          onBefore: (domain) => {
            if (!domain.domain.includes(".")) {
              alert(« Veuillez saisir un domaine valide avec un TLD »);
              return false;
            }
            return true;
          },
          onAfter: (domain) => console.log("Domain created:", domain),
        }}
        verifyAction={{
          onAfter: (domain) => {
            console.log("Domain verified:", domain.domain);
          },
        }}
        deleteAction={{
          onBefore: (domain) => {
            return confirm(`Delete ${domain.domain}?`);
          },
        }}
        onOpenProvider={(provider) => {
          navigate(`/providers/${provider.id}`);
        }}
        onCreateProvider={() => {
          navigate("/providers/create");
        }}
        customMessages={{
          header: {
            title: « Gestion des domaines »,
            description: « Ajouter et vérifier les domaines pour votre organization »,
            create_button_text: « Ajouter un nouveau domaine »,
          },
        }}
        styling={{
          variables: {
            common: { "--font-size-label": "12px" },
            light: { "--color-primary": "#0066cc" },
          },
          classes: {
            "DomainTable-header": "shadow-lg rounded-xl",
          },
        }}
      />
    </div>
  );
}

export default function App() {
  return (
    <Auth0Provider
      domain="your-domain.auth0.com"
      clientId="your-client-id"
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
    >
      <Auth0ComponentProvider>
        <DomainsManagementPage />
      
    
  );
}