Chun-Lin

import React from "react";
import ReactDOM from "react-dom";

import configureStore from "./store/configureStore";


const store = configureStore();


const rootEl = document.getElementById("root");

Chun-Lin

import React from 'react'
import styled from 'styled-components'

const Content = ({ skyblue, className }) => {
  return (
    <div className={className}>
      <div className="content__img" />
      <div className="content__info">
        <div className="content__title" skyblue>
          Cute Puppy

Chun-Lin

export default ({ skyblue }) => {
  return (
    <ContentWrapper>
      <Img />
      <InfoWrapper>
        <Title skyblue>Cute Puppy</Title>
        <Description>
          Sed ut voluptatem neque cumque. Qui sed ut itaque est doloribus qui.
          Eos perferendis autem qui fugiat.
        </Description>

Chun-Lin

import React from 'react'
import styled from 'styled-components'

const ContentWrapper = styled.div`
  width: 80%;
  height: 300px;
  box-shadow: 0 0 5px 2px #ccc;
`

const Img = styled.div`

Chun-Lin

import React from 'react'
import styled from 'styled-components'

const ContentWrapper = styled.div`
  width: 80%;
  height: 300px;
  box-shadow: 0 0 5px 2px #ccc;
`

const Img = styled.div`

Chun-Lin

import React from 'react'
import styled from 'styled-components'

const ContentWrapper = styled.div`
  width: 80%;
  height: 300px;
  box-shadow: 0 0 5px 2px #ccc;
`

const Img = styled.div`

Chun-Lin

.content{
  width: 80%;
  height: 300px;
  box-shadow: 0 0 5px 2px #ccc;
}

.content__img{
  display: inline-block;
  width: 300px;
  height: 100%;

Chun-Lin

export default () => (
    <div className="content">
      <div className="content__img" />
      <div className="content__info">
        <div className="content__title">Cute Puppy</div>
        <div className="content__description">
          Sed ut voluptatem neque cumque. Qui sed ut itaque est doloribus qui.
          Eos perferendis autem qui fugiat.
        </div>
      </div>

Chun-Lin

import React from 'react'
import './content.css'

export default ({ skyblue }) => {

  /* add new css classes */
  let titleStyles = ['content__title']
  if (skyblue) {
    titleStyles.push('content--skyblue')
  }

Chun-Lin

.content{
  width: 80%;
  height: 300px;
  box-shadow: 0 0 5px 2px #ccc;
}

.content__img{
  display: inline-block;
  width: 300px;
  height: 100%;