kimolalekan / react-device-frame

import React, { Component } from "react";
import Device from "lib/react-device-frame";

class ShowWebpage extends Component {
  render() {
    // NOTE: You'll have a rough time displaying a website in Chrome that's sending back a 'X-Frame-Options=sameorigin' header. You'll get an error in the console like: 
    // Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
    // Try one of these instead: http://mentalfloss.com/article/53792/17-ancient-abandoned-websites-still-work ... Maybe learn Klingon? https://www.kli.org/
    return <Device use="iphone-8" color="gold" show="https://www.kli.org/" />;
  }
}

class ShowComponents extends Component {
  render() {
    const content = (
      <div>
      	<p>this is content</p>
      	<p>wahtever you want to have in here is fine</p>
      	<Button>I'm a custom component</Button>
      </div>
    );
    return <Device use="iphone-5c" show={content} color="red" />;
  }
}

class ShowComponentsAsChildren extends Component {
  render() {
    return (
      <Device use="macbook-pro">
      	<div>
      		<p>this is content</p>
      		<p>wahtever you want to have in here is fine</p>
      		<Button>I'm a custom component</Button>
      	</div>
    	</Device>
    );
  }
}

class SpiffyMobileDevicesDock extends Component {
  
  updatePreview(data){
    console.log({
      'got update from <Dock>':data
    });
  }
  
  render() {
    
    const content = (
      <div>
      	<p>this is content</p>
      	<p>wahtever you want to have in here is fine</p>
      	<Button>I'm a custom component</Button>
      </div>
    );
    
    return (
    	<Dock
        device="iphone-x" 
        tooltip="Show a mobile Preview" 
        open="Mobile Preview" 
        close="Hide Preview"
        zoom={{
          full: "Huge",
          large: "Large",
          med: "Medium",
          small: "Small",
        }}
        view="large"
        onData={(update)=>{
          this.updatePreview(update);
        }}
        hide={['ipad','macbook-pro']}
        padTop={55}
        orientation="protrait"
       >
				<Device 
        	use="iphone-x"
          color="black" 
          orientation="protrait"
         >{content}</Device>
       </Dock>
    );
  }
  
}