UI/modal: move common styling into meta header

pkgs/clan-app/ui/src/components/Modal/Modal.tsx

@@ -1,9 +1,10 @@
-import { createSignal, JSX, Show } from "solid-js";
+import { Component, createSignal, JSX, Show } from "solid-js";
 import { Dialog as KDialog } from "@kobalte/core/dialog";
 import styles from "./Modal.module.css";
 import { Typography } from "../Typography/Typography";
 import Icon from "../Icon/Icon";
 import cx from "classnames";
+import { Dynamic } from "solid-js/web";
 
 export interface ModalContext {
   close(): void;
@@ -16,7 +17,7 @@ export interface ModalProps {
   children: (ctx: ModalContext) => JSX.Element;
   mount?: Node;
   class?: string;
-  metaHeader?: () => JSX.Element;
+  metaHeader?: Component;
   disablePadding?: boolean;
 }
 
@@ -45,10 +46,12 @@ export const Modal = (props: ModalProps) => {
               <Icon icon="Close" size="0.75rem" />
             </KDialog.CloseButton>
           </div>
-          <Show when={props.metaHeader?.()}>
+          <Show when={props.metaHeader}>
             {(metaHeader) => (
               <>
-                {metaHeader()}
+                <div class="flex h-9 items-center px-6 py-2">
+                  <Dynamic component={metaHeader()} />
+                </div>
                 <div class={styles.header_divider} />
               </>
             )}