gradient.js

class Gradient extends React.Component {
    render() {
        // var topColor = this.props.topColor
        // var bottomColor = this.props.bottomColor
        console.log(typeof this.props.children)
        var child = this.props.children
        // console.log(child.props.children)
        while(typeof child.props.children == 'object') {
            console.log(typeof child)
            child = child.props.children
        }
        // console.log(child)
        var rows = child.split("\n")
        console.log(rows)

        var colored = rows.map((val, index) => {
            var red = Math.trunc( 67 + (((215 - 67) / rows.length) * index) )
            var green = Math.trunc( 196 - (((196 - 73) / rows.length) * index) )
            var blue = Math.trunc( 252 - (((252 - 246) / rows.length) * index) )
            console.log(val)
            console.log(red, green, blue)
            return <Box key={index}><Color rgb={[red, green, blue]}>{val}</Color></Box>
        })
        
        return colored
    }
}