refactor: split component files

Author: araujogui

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

@@ -0,0 +1,28 @@
+import { ArrowUpRightIcon } from '@heroicons/react/24/outline';
+import Banner from '@node-core/ui-components/Common/Banner';
+
+import styles from './index.module.css';
+
+/** @import { BannerEntry } from './types.d.ts' */
+
+/**
+ * @param {{ banners: BannerEntry[] }} 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>
+);
+
+export default AnnouncementBanner;

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

@@ -1,39 +1,13 @@
-import { ArrowUpRightIcon } from '@heroicons/react/24/outline';
-import Banner from '@node-core/ui-components/Common/Banner';
 import { lazy, Suspense } from 'preact/compat';
 import { useMemo } from 'preact/hooks';
 
-import styles from './index.module.css';
+import AnnouncementBanner from './AnnouncementBanner.jsx';
 import { loadBanners } from './loadBanners.mjs';
 
-/** @import { BannerEntry } from './types.d.ts' */
-
-/**
- * @param {{ banners: BannerEntry[] }} 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>
-);
-
-export default AnnouncementBanner;
-
 /**
  * @param {{ remoteConfig: string, versionMajor: number | null }} props
  */
-export const RemoteLoadableBanner = ({ remoteConfig, versionMajor }) => {
+const RemoteLoadableBanner = ({ remoteConfig, versionMajor }) => {
   const LazyBanners = useMemo(
     () =>
       lazy(async () => {
@@ -54,3 +28,5 @@ export const RemoteLoadableBanner = ({ remoteConfig, versionMajor }) => {
     </Suspense>
   );
 };
+
+export default RemoteLoadableBanner;

src/generators/web/ui/components/Layout/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';
 
 import Footer from '#theme/Footer';
 import MetaBar from '#theme/Metabar';