refactor: use named export for everything except pages

Next expect a default export for pages so only those components should
use default exports. Everything else should use named exports to
reduce the number of import statements.

1 files changed, 17 insertions, 10 deletions

diff --git a/src/components/molecules/modals/modal.tsx b/src/components/molecules/modals/modal.tsx
index 76dab55..344d5b9 100644
--- a/src/components/molecules/modals/modal.tsx
+++ b/src/components/molecules/modals/modal.tsx
@@ -1,8 +1,11 @@
 import dynamic from 'next/dynamic';
 import { FC, ReactNode } from 'react';
-import Heading, { type HeadingProps } from '../../atoms/headings/heading';
-import { type CogProps } from '../../atoms/icons/cog';
-import { type MagnifyingGlassProps } from '../../atoms/icons/magnifying-glass';
+import {
+  type CogProps,
+  Heading,
+  type HeadingProps,
+  type MagnifyingGlassProps,
+} from '../../atoms';
 import styles from './modal.module.scss';
 
 export type Icons = 'cogs' | 'search';
@@ -30,11 +33,17 @@ export type ModalProps = {
   title?: string;
 };
 
-const CogIcon = dynamic<CogProps>(() => import('../../atoms/icons/cog'), {
-  ssr: false,
-});
+const CogIcon = dynamic<CogProps>(
+  () => import('../../atoms/icons/cog').then((mod) => mod.Cog),
+  {
+    ssr: false,
+  }
+);
 const SearchIcon = dynamic<MagnifyingGlassProps>(
-  () => import('../../atoms/icons/magnifying-glass'),
+  () =>
+    import('../../atoms/icons/magnifying-glass').then(
+      (mod) => mod.MagnifyingGlass
+    ),
   { ssr: false }
 );
 
@@ -43,7 +52,7 @@ const SearchIcon = dynamic<MagnifyingGlassProps>(
  *
  * Render a modal component with an optional title and icon.
  */
-const Modal: FC<ModalProps> = ({
+export const Modal: FC<ModalProps> = ({
   children,
   className = '',
   headingClassName = '',
@@ -77,5 +86,3 @@ const Modal: FC<ModalProps> = ({
     </div>
   );
 };
-
-export default Modal;