Alert Component

import live-web.dom
import live-web-view.content
import live-web-view.button

static any[] use = [Alert, IconButton]

Alert{ type: 'info'
    Figure{
        T`i`
    }
    AlertContent{
        Heading{
            H4`Info`
        }
        P`Information you should know about.`
    }
    Figure{ classes: ['close-figure']
        IconButton{ extraClasses: ['close']
            Svg{ props: ({width: '15', height: '15', viewBox: '0 0 15 15', xmlns: 'http://www.w3.org/2000/svg'})
                Line{ props: ({x1: '0', y1: '0', x2: '15', y2: '15', stroke: 'currentColor'})}
                Line{ props: ({x1: '15', y1: '0', x2: '0', y2: '15', stroke: 'currentColor'})}
            }
        }
    }
}

import live-web.dom
import live-web-view.content
import live-web-view.button

static any[] use = [Alert, IconButton]

Alert{ type: 'error'
    Figure{
        T`!`
    }
    AlertContent{
        Heading{
            H4`Error`
        }
        P`Alert with error message.`
    }
    Figure{ classes: ['close-figure']
        IconButton{ extraClasses: ['close']
            Svg{ props: ({width: '15', height: '15', viewBox: '0 0 15 15', xmlns: 'http://www.w3.org/2000/svg'})
                Line{ props: ({x1: '0', y1: '0', x2: '15', y2: '15', stroke: 'currentColor'})}
                Line{ props: ({x1: '15', y1: '0', x2: '0', y2: '15', stroke: 'currentColor'})}
            }
        }
    }
}