Extract environment info display to separate component

Co-authored-by: blackboxprogramming <118287761+blackboxprogramming@users.noreply.github.com>

src/components/EnvironmentInfo.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import docsConfig from '../config/docsConfig';
+
+/**
+ * EnvironmentInfo component displays the current environment configuration
+ * including the docs URL and optional service URLs.
+ */
+export default function EnvironmentInfo() {
+  return (
+    <div className="margin-top--lg">
+      <p className="text--center">
+        Docs served from <strong>{docsConfig.publicDocsUrl}</strong>{' '}
+        {docsConfig.coreApiUrl && <>| Core API: {docsConfig.coreApiUrl} </>}
+        {docsConfig.webAppUrl && <>| Web App: {docsConfig.webAppUrl} </>}
+        {docsConfig.consoleUrl && <>| Console: {docsConfig.consoleUrl} </>}
+        {docsConfig.agentsApiUrl && <>| Agents API: {docsConfig.agentsApiUrl}</>}
+      </p>
+    </div>
+  );
+}

src/pages/index.jsx

@@ -1,7 +1,7 @@
 import Link from '@docusaurus/Link';
 import Layout from '@theme/Layout';
 import React from 'react';
-import docsConfig from '../config/docsConfig';
+import EnvironmentInfo from '../components/EnvironmentInfo';
 
 export default function Home() {
   return (
@@ -43,15 +43,7 @@ export default function Home() {
           </div>
         </div>
 
-        <div className="margin-top--lg">
+        <EnvironmentInfo />
-          <p className="text--center">
-            Docs served from <strong>{docsConfig.publicDocsUrl}</strong>{' '}
-            {docsConfig.coreApiUrl && <>| Core API: {docsConfig.coreApiUrl} </>}
-            {docsConfig.webAppUrl && <>| Web App: {docsConfig.webAppUrl} </>}
-            {docsConfig.consoleUrl && <>| Console: {docsConfig.consoleUrl} </>}
-            {docsConfig.agentsApiUrl && <>| Agents API: {docsConfig.agentsApiUrl}</>}
-          </p>
-        </div>
       </main>
     </Layout>
   );