'use strict';

import React, { Component } from 'react';
import Pic from '../lib/index.js';

export default class Playground extends Component {
  render() {
    return (
      <html>
        <head>
          <meta charSet='UTF-8' />
          <title>react-pic</title>
        </head>
        <body>
          <div id="root">
            <Pic
                alt='heart'
                images={[
                  {
                    width: 290,
                    url: 'http://placehold.it/290?text=♥'
                  },
                  {
                    width: 300,
                    url: 'http://placehold.it/300?text=♥'
                  },
                  {
                    width: 353,
                    url: 'http://placehold.it/353?text=♥'
                  },
                  {
                    width: 367,
                    url: 'http://placehold.it/367?text=♥'
                  },
                  {
                    width: 630,
                    url: 'http://placehold.it/630?text=♥'
                  }
                ]} />
          </div>
          <script src='//localhost:8080/build/react-pic.js' />
        </body>
      </html>
    );
  }
}

@@ -437,18 +437,17 @@
  width: 
-29
+4
 0,%0A     
@@ -491,10 +491,9 @@
 .it/
-29
+4
 0?te
@@ -566,17 +566,17 @@
  width: 
-3
+2
 00,%0A    
@@ -617,17 +617,17 @@
 hold.it/
-3
+2
 00?text=
@@ -697,19 +697,19 @@
  width: 
-353
+400
 ,%0A      
@@ -752,11 +752,11 @@
 .it/
-353
+400
 ?tex
@@ -828,19 +828,19 @@
  width: 
-367
+600
 ,%0A      
@@ -883,11 +883,11 @@
 .it/
-367
+600
 ?tex
@@ -959,18 +959,18 @@
  width: 
-63
+80
 0,%0A     
@@ -1014,10 +1014,10 @@
 .it/
-63
+80
 0?te

Update playground sizes to be more representitive of real-world usage