<ParagraphTitle as={ReversedTitle} >I am a paragraph title</ParagraphTitle>
</Section>
import React from 'react'
import ReactDOM from 'react-dom'
import styled from 'styled-components'
import Button from './Button'
import Icon from './Icon'
const Title = styled.h1`
color: #aaecf0;
`
const Section = styled.div`
background-color: #aac9f0;
display: flex;
justify-content: center;
flex-direction: column;
border-radius: 15px;
`
const SubTitle = styled(Title)`
font-size: 12px;
align-self: center;
`;
const ParagraphTitle = styled(SubTitle)`
color: grey;
`;
const ReversedTitle = props =>
<ParagraphTitle {...props} children={props.children.split('').reverse()} />
const Content = () => {
return (
<Section>
<Title>💅🏻 Section</Title>
<SubTitle>I am a subtitle</SubTitle>
<Button text='me first' primary/>
<Button text='me second'/>
<Icon border='solid 3px' primary />
<Icon/>
)
}
export default Content
//Mini Challenge
//based on the if else statement for the status, can you add your own if else statement
//that will render the green button like a traffic light, based on a prop we pass
//through? Please get rid of the 'primary' prop that controls the background-color to
//do this.