From 1d162d7aafb3cfe2c3351b5fd891bbf6d476e9b2 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 14 Apr 2022 19:25:46 +0200
Subject: chore: add a Settings component

---
 src/components/molecules/modals/modal.tsx | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

(limited to 'src/components/molecules/modals/modal.tsx')

diff --git a/src/components/molecules/modals/modal.tsx b/src/components/molecules/modals/modal.tsx
index ce12e7a..52ada57 100644
--- a/src/components/molecules/modals/modal.tsx
+++ b/src/components/molecules/modals/modal.tsx
@@ -12,6 +12,10 @@ export type ModalProps = {
    * Set additional classnames.
    */
   className?: string;
+  /**
+   * Set additional classnames to the heading.
+   */
+  headingClassName?: string;
   /**
    * A icon to illustrate the modal.
    */
@@ -22,9 +26,12 @@ export type ModalProps = {
   title?: string;
 };
 
-const CogIcon = dynamic<CogProps>(() => import('@components/atoms/icons/cog'));
+const CogIcon = dynamic<CogProps>(() => import('@components/atoms/icons/cog'), {
+  ssr: false,
+});
 const SearchIcon = dynamic<MagnifyingGlassProps>(
-  () => import('@components/atoms/icons/magnifying-glass')
+  () => import('@components/atoms/icons/magnifying-glass'),
+  { ssr: false }
 );
 
 /**
@@ -32,7 +39,13 @@ const SearchIcon = dynamic<MagnifyingGlassProps>(
  *
  * Render a modal component with an optional title and icon.
  */
-const Modal: FC<ModalProps> = ({ children, className = '', icon, title }) => {
+const Modal: FC<ModalProps> = ({
+  children,
+  className = '',
+  headingClassName = '',
+  icon,
+  title,
+}) => {
   const getIcon = (id: Icons) => {
     switch (id) {
       case 'cogs':
@@ -47,7 +60,11 @@ const Modal: FC<ModalProps> = ({ children, className = '', icon, title }) => {
   return (
     <div className={`${styles.wrapper} ${className}`}>
       {title && (
-        <Heading isFake={true} level={3}>
+        <Heading
+          isFake={true}
+          level={3}
+          className={`${styles.title} ${headingClassName}`}
+        >
           {icon && <span className={styles.icon}>{getIcon(icon)}</span>}
           {title}
         </Heading>
-- 
cgit v1.2.3