Component files from SockShop

CardGrid.jsx

import React from "react";
import { SockCard } from "./SockCard";
import { Row, Col } from "antd";

export const CardGrid = () => (
  <Row type={"flex"} justify={"center"}>
    <Col xs={24} sm={24} lg={12} xl={8}>
      <SockCard title={"Bitcoin Socks"} coin={"bitcoin"} price={10}/>
    </Col>
    <Col xs={24} sm={24} lg={12} xl={8}>
      <SockCard title={"Digibyte Socks"} coin={"digibyte"} price={5}/>
    </Col>
    <Col xs={24} sm={24} lg={24} xl={8}>
      <SockCard title={"Monero Socks"} coin={"monero"} price={25}/>
    </Col>
  </Row>
);

PaymentBox.jsx

import React from "react";
import { Input, Checkbox, Button, message } from "antd";

export class PaymentBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      confirm: false
    };
  }

  handleInput = e => {
    this.setState({ email: e.target.value });
  };

  handleCheckbox = e => {
    this.setState({ confirm: e.target.checked });
  };

  render() {
    const disabled =
      this.state.email !== "" &&
      this.state.confirm &&
      this.state.email.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i)
        ? false
        : true;

    return (
      <div style={{ padding: "15px" }}>
          <Input
            placeholder="Please input your email"
            style={{ marginBottom: "10px" }}
            onChange={this.handleInput}
            onBlur={() =>
              !this.state.email.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i)
                ? message.warning("Email is not valid")
                : null
            }
          />
          <Checkbox
            style={{ marginBottom: "10px" }}
            onChange={this.handleCheckbox}
          >
            I Accept the Terms and Conditions
          </Checkbox>
          <Button
            disabled={disabled}
            style={{ width: "150px" }}
            value={this.props.coin}
          >
            {`To Payment ($${this.props.price})`}
          </Button>
      </div>
    );
  }
}

SockCard.jsx

import React from "react";
import { PaymentBox } from "./PaymentBox";

const sockImageUrl = {
  bitcoin: "https://i.imgsafe.org/ba/ba67f81418.png",
  digibyte: "https://i.imgsafe.org/ba/ba680067f8.png",
  monero: "https://i.imgsafe.org/ba/ba68393c34.png"
};

const sockDesc = {
  bitcoin: "Show how awesome you are with these Bitcoin socks!",
  digibyte: "Show your love for Shitcoins with these Digibyte socks!",
  monero: "Show your passion for privacy with these Monero socks!"
};

export const SockCard = ({ title, coin, price }) => (
  <div
    style={{
      width: "400px",
      margin: "0 auto",
      background: "#fff",
      padding: "10px",
      textAlign: "center",
      borderRadius: "5px",
      marginBottom: "10px"
    }}
  >
    <h1>{title}</h1>
    <img src={sockImageUrl[coin]} alt={"sockImage"} width={'350px'} />
    <h3>{sockDesc[coin]}</h3>
    <PaymentBox price={price} coin={coin}/>
  </div>
);