[MicroFrontend Workshop 1] Container App Part1

global-styles.js

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  .banner {
    background: #f5f5da;
    padding: 30px;
    text-align: center;
    border-radius: 20px;
  }

  .banner-title {
    color: #2d3d29;
  }

  .home {
    margin-top: 30px;
    width: 100%;
    text-align: center;
  }

  .content {
    margin: auto;
    width: 70%;
    padding: 10px 0px;
    background:  #f5f5da;
    display: inline-block;
    border-radius: 10px;
  }
  .cat {
    display: inline-block;
    width: 45%;
  }

  .dog {
    display: inline-block;
    width: 45%;
  }
`;

export default GlobalStyle;

index.js

//Header
function Header() {
  return (
    <div className="banner">
      <h1 className="banner-title">&#128571; Cats and Dogs &#128021;</h1>
      <h4>Random pics of cats and dogs</h4>
    </div>
  );
}

// HOME

function Home({ history }) {
  const [input, setInput] = useState("");

  const handleOnClick = () => {
    history.push(`/cat/${input}`);
  };

  return (
    <div>
      <Header />
      <div className="home">
        <input
          placeholder="Insert a greeting"
          value={input}
          onBlur={(e) => setInput(e.target.value)}
        />
        <button onClick={handleOnClick}>Greet Me</button>
      </div>

      <div className="home">
        <div className="content">
          <div className="cat">
            <img width="400px" src="https://cataas.com/cat/says/hello" />
          </div>
          <div className="dog">
            <img
              width="400px"
              src="https://random.dog/91474781-c254-4397-b658-d19b7f0a4f5b.jpeg"
            />
          </div>
        </div>
      </div>
    </div>
  );
}

// APP

function App({ history }) {
  return (
    <ConnectedRouter history={history}>
      <React.Fragment>
        <GlobalStyle />
        <Switch>
          <Route exact path="/" component={Home} />
        </Switch>
      </React.Fragment>
    </ConnectedRouter>
  );
}

export default App;