DialogComponent.tsx

interface Props {
    children: React.ReactNode;
    content: React.ReactNode;
    footer?: string;
    isOpen: boolean;
    onClose?: () => void;
    title?: string;
}

// ❌ Wide multi purpose Component
function Dialog(props): Props {
    return (
        <... />
    )
}

type AvengerProps = {
    description: string;
    name: string;
}

// Example of usage. We have a big contract to fill
function ShowAvenger({name, description}: AvengerProps) {
    return (
        <Dialog
            title={name}
            content={<AvengerDetails description={description} />}
            ....
        />
    );
}