Skip to content

Instantly share code, notes, and snippets.

@mattshardman

mattshardman/Screen.js

Created March 21, 2019 20:36
Download ZIP

Revisions

  1. mattshardman created this gist Mar 21, 2019.
    39 changes: 39 additions & 0 deletions Screen.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    import React from 'react';

    const Mac = ({ isMobile, children }) => {
    return (
    <div className="mac-wrapper">
    <div className="screen-section">
    </div>
    <style jsx>{`
    .mac-wrapped {
    width: ${cw}px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    perspective: 800px;
    }
    .screen-section {
    height: ${screenHeight}px;
    width: ${screenWidth}px;
    background: black;
    border-radius: 15px 15px 5px 5px;
    border-top: 2px #1e1e1e solid;
    border-left: 2px #1e1e1e solid;
    border-right: 2px #1e1e1e solid;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9), 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 0 0 3px #7D7D7D;
    }
    `}
    </style>
    </div>
    );
    };

    export default Mac;