css 第19集React Scrimba

Posted 2021-05-13

import React from "react";
import ContactCard from "./ContactCard";

function App() {
  return (
    <div className="contacts">
      <ContactCard
        contact={{
          name: "Mr. Whiskerson",
          imgUrl: "http://placekitten.com/300/200",
          phone: "[phone]",
          email: "[e-mail]"
        }}
      />
      <ContactCard
        contact={{
          name: "Fluffykins",
          imgUrl: "http://placekitten.com/400/200",
          phone: "[phone]",
          email: "[e-mail]"
        }}
      />
      <ContactCard
        contact={{
          name: "Destroyer",
          imgUrl: "http://placekitten.com/400/300",
          phone: "[phone]",
          email: "[e-mail]"
        }}
      />
      <ContactCard
        contact={{
          name: "Felix",
          imgUrl: "http://placekitten.com/200/100",
          phone: "[phone]",
          email: "[e-mail]"
        }}
      />
    </div>
  );
}

export default App;

import React from "react";

function ContactCard(props) {
  console.log(props);
  return (
    <div className="contact-card">
      <img src={props.contact.imgUrl} />
      <h3>{props.contact.name}</h3>
      <p>Phone: {props.contact.phone}</p>
      <p>Email: {props.contact.email}</p>
    </div>
  );
}

export default ContactCard;

body {
  margin: 0;
}

.contacts {
  display: flex;
  flex-wrap: wrap;
}

.contact-card {
  flex-basis: 250px;
  margin: 20px;
}

.contact-card > img {
  width: 100%;
  height: auto;
}

.contact-card > h3 {
  text-align: center;
}

.contact-card > p {
  font-size: 12px;
}