import React, { Component } from "react";

import "./App.css";

/* ======================= */

/* ===== sample data ===== */

/* ======================= */

const people = [

  { name: "Anna", sex: "female", age: 28 },

  { name: "John", sex: "male", age: 31 },

  { name: "Tim", sex: "male", age: 7 },

  { name: "Bella", sex: "female", age: 4 }

];

/* ============================== */

/* ===== the main component ===== */

/* ============================== */

const App = () =>

  <div>

    {people.map((person, i) => {

      return (

        <Person name={person.name} age={person.age} sex={person.sex} key={i} />

      );

    })}

  </div>;

/* =========================== */

/* ===== the Person card ===== */

/* =========================== */

const Person = props =>

  <div className={`person person--${props.sex}`}>

    <h2 className="person__name">{props.name}</h2>

    <p className="person__description">

      This <strong>{props.sex}</strong> is currently{" "}

      <strong>{props.age} years old</strong>.

    </p>

  </div>;

export default App;

.person {

  padding: 1.75rem;

  margin: .5rem;

  border-radius: 4px;

  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);

  color: white;

}

.person--male {

  background: #44bccc;

}

.person--female {

  background: #f973bc;

}

.person__name {

  margin-top:;

  font-weight:;

  margin-bottom: .75rem;

}

.person__description {

  margin:;

  line-height: 1.5;

}

.person__description strong {

  font-weight:;

}

body {

  margin:;

  font-family: -apple-system,

    BlinkMacSystemFont,

    "Segoe UI",

    Roboto,

    Helvetica,

    Arial,

    sans-serif,

    "Apple Color Emoji",

    "Segoe UI Emoji",

    "Segoe UI Symbol";

}

import React, { Component } from "react";

import styled from "styled-components";

import "./App.css";

/* ======================= */

/* ===== sample data ===== */

/* ======================= */

const people = [

  { name: "Anna", sex: "female", age: 28 },

  { name: "John", sex: "male", age: 31 },

  { name: "Tim", sex: "male", age: 7 },

  { name: "Bella", sex: "female", age: 4 }

];

/* ============================== */

/* ===== the main component ===== */

/* ============================== */

const App = () =>

  <div>

    {people.map((person, i) => {

      return (

        <Person name={person.name} age={person.age} sex={person.sex} key={i} />

      );

    })}

  </div>;

const Name = styled.h2`

  margin-top: 0;

  font-weight: 900;

  margin-bottom: .75rem;

`;

const Bio = styled.p`

  margin: 0;

  line-height: 1.5;

  strong {

    font-weight: 900;

  }

`;

const Card = styled.div`

  padding: 1.75rem;

  margin: .5rem;

  border-radius: 4px;

  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);

  color: white;

  background: ${props => (props.sex === "male" ? "#44bccc" : "#f973bc")}

`;

/* =========================== */

/* ===== the Person card ===== */

/* =========================== */

const Person = props =>

  <Card sex={props.sex}>

    <Name>{props.name}</Name>

    <Bio>

      This <strong>{props.sex}</strong> is currently{" "}

      <strong>{props.age} years old</strong>.

    </Bio>

  </Card>;

export default App;

body {

  margin:;

  font-family: -apple-system,

    BlinkMacSystemFont,

    "Segoe UI",

    Roboto,

    Helvetica,

    Arial,

    sans-serif,

    "Apple Color Emoji",

    "Segoe UI Emoji",

    "Segoe UI Symbol";

}