composing.tsx

// ✅ Creating multiple composable Components
function Dialog(props: DialogProps) {
  ...
}

function DialogTitle(props: DialogTitleProps) {
  ...
}

function DialogContent(props: DialogTitleProps) {
  ...
}

function DialogActions(props: DialogActionsProps) {
  ...
}

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

// ✅ Combining declarative components to a complex layout
function ShowAvenger({description, name}: AvengerProps) {
    return (
        <Dialog>
            <DialogTitle>
                ...
            </DialogTitle>
            <DialogContent>
                ...
            </DialogContent>
            <DialogActions>
                ...
            </DialogActions>
        </Dialog>
    );
}