@vertisanpro/flowbite-react/lib/src/components/Modal/ModalHeader.js

Non-Official React components built for Flowbite and Tailwind CSS

'use client';
import { HiOutlineX } from '@vertisanpro/react-icons/hi';
import { twMerge } from '@vertisanpro/tailwind-merge';
import { nanoid } from 'nanoid';
import React, { useLayoutEffect, useMemo } from 'react';
import { mergeDeep } from '../../helpers/merge-deep';
import { useModalContext } from './ModalContext';
export const ModalHeader = ({ as: Component = 'h3', children, className, theme: customTheme = {}, id, ...props }) => {
    const innerHeaderId = useMemo(() => nanoid(), []);
    const headerId = id || innerHeaderId;
    const { theme: rootTheme, popup, onClose, setHeaderId } = useModalContext();
    const theme = mergeDeep(rootTheme.header, customTheme);
    useLayoutEffect(() => {
        setHeaderId(headerId);
        return () => setHeaderId(undefined);
    }, [headerId, setHeaderId]);
    return (React.createElement("div", { className: twMerge(theme.base, popup && theme.popup, className), ...props },
        React.createElement(Component, { id: headerId, className: theme.title }, children),
        React.createElement("button", { "aria-label": "Close", className: theme.close.base, type: "button", onClick: onClose },
            React.createElement(HiOutlineX, { "aria-hidden": true, className: theme.close.icon }))));
};