refactor: restructure component

Author: araujogui

src/generators/web/ui/components/AnnouncementBanner/AnnouncementBanner.jsx

@@ -0,0 +1,31 @@
+import { lazy, Suspense } from 'preact/compat';
+
+import AnnouncementBanner from './index.jsx';
+import { loadBanners } from './loadBanners.mjs';
+
+import { remoteConfig, version } from '#theme/config';
+
+// TODO: Revisit SERVER global usage (https://github.com/nodejs/doc-kit/issues/353)
+const LazyBanners = SERVER
+  ? null
+  : lazy(async () => {
+      const active = await loadBanners(remoteConfig, version.major);
+
+      if (!active.length) {
+        return { default: () => null };
+      }
+
+      return { default: () => <AnnouncementBanner banners={active} /> };
+    });
+
+const RemoteLoadableBanner = SERVER
+  ? () => <div />
+  : () => (
+      <div>
+        <Suspense fallback={null}>
+          <LazyBanners />
+        </Suspense>
+      </div>
+    );
+
+export default RemoteLoadableBanner;

src/generators/web/ui/components/AnnouncementBanner/RemoteLoadableBanner.jsx

@@ -1,31 +1,26 @@
-import { lazy, Suspense } from 'preact/compat';
+import { ArrowUpRightIcon } from '@heroicons/react/24/outline';
+import Banner from '@node-core/ui-components/Common/Banner';
 
-import AnnouncementBanner from './AnnouncementBanner.jsx';
-import { loadBanners } from './loadBanners.mjs';
+import styles from './index.module.css';
 
-import { remoteConfig, version } from '#theme/config';
+/**
+ * @param {import('./types.d.ts').AnnouncementBannerProps} props
+ */
+const AnnouncementBanner = ({ banners }) => (
+  <div role="region" aria-label="Announcements" className={styles.banners}>
+    {banners.map(banner => (
+      <Banner key={banner.text} type={banner.type}>
+        {banner.link ? (
+          <a href={banner.link} target="_blank" rel="noopener noreferrer">
+            {banner.text}
+          </a>
+        ) : (
+          banner.text
+        )}
+        {banner.link && <ArrowUpRightIcon />}
+      </Banner>
+    ))}
+  </div>
+);
 
-// TODO: Revisit SERVER global usage (https://github.com/nodejs/doc-kit/issues/353)
-const LazyBanners = SERVER
-  ? null
-  : lazy(async () => {
-      const active = await loadBanners(remoteConfig, version.major);
-
-      if (!active.length) {
-        return { default: () => null };
-      }
-
-      return { default: () => <AnnouncementBanner banners={active} /> };
-    });
-
-const RemoteLoadableBanner = SERVER
-  ? () => <div />
-  : () => (
-      <div>
-        <Suspense fallback={null}>
-          <LazyBanners />
-        </Suspense>
-      </div>
-    );
-
-export default RemoteLoadableBanner;
+export default AnnouncementBanner;

src/generators/web/ui/components/AnnouncementBanner/index.jsx

@@ -1,7 +1,7 @@
 import TableOfContents from '@node-core/ui-components/Common/TableOfContents';
 import Article from '@node-core/ui-components/Containers/Article';
 
-import RemoteLoadableBanner from '../AnnouncementBanner';
+import RemoteLoadableBanner from '../AnnouncementBanner/RemoteLoadableBanner';
 
 import Footer from '#theme/Footer';
 import MetaBar from '#theme/Metabar';