Very simple but good looking Dialog Icon component

[pablotanner]

I created a very simple component called DialogIcon, which lets you add an icon to your Dialogs.

Example:
Large Screens:

Small Screens (centered):

Code/"Installation":

const DialogIcon = ({className, children, ...props}: {className?: string, children: React.ReactNode}) => {
    return (
        <div className={cn("p-3 border border-secondary rounded-lg w-fit shadow-sm mb-2", className)}
             {...props}
        >
            {children}
        </div>
    )
}
DialogIcon.displayName = "DialogIcon"

Usage:

        <Dialog>
            <DialogContent >
                <DialogHeader>
                    <DialogIcon>
                        <Coins className="w-6 h-6"/>
                    </DialogIcon>
                    <DialogTitle>
                       Add Payment
                    </DialogTitle>
                    <DialogDescription>
                        Add a new payment to the system.
                    </DialogDescription>
                </DialogHeader>
            ... rest

[EnzoDOROSARIO]

I like it, but wouldn't putting the dialog's icon next to the dialog's title look better on a large screen?

[pablotanner]

Hmm nice idea, I think I'll add it for the AlertDialog component :D