scrimba
Styled Components
Separating Components and passing props - Project work
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Separating Components and passing props - Project work
AboutCommentsNotes
Separating Components and passing props - Project work
Expand for more info
index.js
run
preview
console
import React from 'react'
import ReactDOM from 'react-dom'
import styled from 'styled-components'

const Title = styled.h1`
color: #b19cd9;
`

const Section = styled.div`
background-color: #ffffff;
border: solid 3px grey;
margin: 4px;
width: 300px;
height: 50px;
border-radius: 10px;
display: flex;
justify-content: left;
font-size: 40px;
color: #ff6961;
`

const WeekdayTitle = styled.div`
display: flex;
justify-content: center;
width: 50px;
border-right: solid 3px lightgrey;
`

class Main extends React.Component {
render() {
return (
<>
<Title>Progress Tracker</Title>
<div>
<Section>
<WeekdayTitle>M</WeekdayTitle>
</Section>
<Section>
<WeekdayTitle>T</WeekdayTitle>
</Section>
<Section>
<WeekdayTitle>W</WeekdayTitle>
</Section>
<Section>
<WeekdayTitle>T</WeekdayTitle>
</Section>
<Section>
<WeekdayTitle>F</WeekdayTitle>
</Section>
<Section>
<WeekdayTitle>S</WeekdayTitle>
</Section>
<Section>
<WeekdayTitle>S</WeekdayTitle>
</Section>
</div>
</>
);
}
}

ReactDOM.render(<Main />, document.getElementById('root'))


//TO DO:
// move Section to its own file
// make sure the WeekdayTitle is moved with it
// export Section so we can use it in our index.js file
// pass through text as a prop
Console
/index.html
-8:06