Generic Component

generic.tsx

import clsx from 'clsx';

type GenericOwnProps<E extends React.ElementType = React.ElementType> = {
    children: string;
    as?: E;
    cls?: string | Record<string, string> | string[];
};

type GenericProps<E extends React.ElementType> = GenericOwnProps<E> &
    Omit<React.ComponentProps<E>, keyof GenericOwnProps>;

const __DEFAULT_ELEMENT__ = 'div';

function Title<E extends React.ElementType = typeof __DEFAULT_ELEMENT__>({
    children,
    as,
    cls,
    ...props
}: GenericProps<E>) {
    const Component = as || __DEFAULT_ELEMENT__;
    return (
        <Component
            className={clsx(cls)}
            {...props}
        >
            {children}
        </Component>
    );
}

export default Title;