refactor: move template rendering to own properties and functions

react/scelta-carriera/src/App.jsx

@@ -8,83 +8,19 @@ import SceltaCarrieraComponent from './SceltaCarrieraComponent';
 function App() {
   const [count, setCount] = useState(0)
 
-  /** @type {SceltaCarrieraComponent} */
-  var myElixFormsReact = new SceltaCarrieraComponent({
-    description: "This is a custom form created with ElixFormsReact component.",
-    isDarkTheme: false,
-    environmentMessage: "TESTING!",
-    hasTeamsContext: false,
-    userDisplayName: "John Doe",
-  });
-
-  var elixFormsReactRender = myElixFormsReact.render();
-
-  return <>
-      <div className="container_12" id="pageBody">
-        <div className="grid_12">
-          <div id="userConsole" className="fe-behaviour">
-            <header>
-              <div className="neutral">
-                <div className="grid_12">
-                  <div className="console_header">
-                    <div className="leftDiv">
-                      <h1>elixForms</h1>
-                      <div className="logo"><a href="https://www.unipr.it/" title="Torna alla homepage dell'Università: di Parma"><img src="https://console-unipr.elixforms.it/elixFormsCustom/images/logo.png" alt="Logo Università: di Parma" /></a>
-                      </div>
-                    </div>
-                    <div className="rightDiv">
-                      <div className="rightDivInside info padding_r">
-                        <div className="clear"></div>
-                      </div>
-                    </div>
-                    <div className="clear"></div>
-                  </div>
-                </div>
-                <div className="clear"></div>
-              </div>
-            </header>
-
-            <div className="grid_12 console_main">
-              <div className="inside">
-                <div>
-                  <div className="fe-module-header-container">
-                    <h2>Modulo A/13 - Richiesta di Certificato</h2>
-                  </div>
-                </div>
-                <div className="receipt">
-                  <div className="container">
-                    <h1>Scelta Carriera</h1>
-                    <img src={heroImg} alt="Hero Image" className="hero-image" />
-                    <p>Benvenuto nella piattaforma di scelta carriera! Esplora le tue opzioni e trova la strada giusta per te.</p>
-                    {elixFormsReactRender}
-                    <p>Altre cose</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="clear"></div>
-
-            <footer className="it-footer">
-              <div className="it-footer-main">
-                <div className="container">
-                  <div className="row clearfix">
-                    <div className="col-sm-12">
-                      <div className="footer-content">
-                        <div className="subfooter-top">powered by <span className="highlight">elixForms</span></div>
-                        <div className="subfooter-bottom"><div>versione 1.24.0</div></div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </footer>
-          </div>
-          <div className="clear"></div>
-        </div>
-      </div>
-  </>;
-
+  return (
+    <SceltaCarrieraComponent 
+      description=""
+      isDarkTheme={false}
+      environmentMessage=""
+      hasTeamsContext={false}
+      userDisplayName="John Doe"
+      moduleTitle="Modulo A/13 - Richiesta di Certificato"
+      pageTitle="Scelta Carriera"
+      pageDescription="Benvenuto nella piattaforma di scelta carriera! Esplora le tue opzioni e trova la strada giusta per te."
+      heroImageSrc={heroImg}
+    />
+  );
 }
 
 export default App

react/scelta-carriera/src/SceltaCarrieraComponent.tsx

@@ -42,4 +42,8 @@ export default class SceltaCarrieraComponent extends ElixFormsComponentAbstract
       </>
     );
   }
+
+  protected override renderExtraContent(): JSX.Element {
+    return <p>Altre cose</p>;
+  }
 }