diff --git a/components/sponsor-banner/index.js b/components/sponsor-banner/index.js new file mode 100644 index 000000000..eb15c8def --- /dev/null +++ b/components/sponsor-banner/index.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { BannerWrap, CloseSponsor, EmojiWrap } from './style'; + +export function SponsorBanner({ onCloseBanner = () => null }){ + return ( +
+
+ + Sponsored by DigitalOcean + 😍 + Check them out! + + { + e.preventDefault(); + onCloseBanner(); + }} + className='close'>× + +
+
+ ); +} \ No newline at end of file diff --git a/components/sponsor-banner/style.js b/components/sponsor-banner/style.js new file mode 100644 index 000000000..ff8bbbe06 --- /dev/null +++ b/components/sponsor-banner/style.js @@ -0,0 +1,37 @@ +import styled from 'styled-components'; + +export const BannerWrap = styled.a` + margin-bottom: 0; + background: #101010; + color: white; + border: 0; + border-radius: 0; + padding: 10px 15px; + display: block; + text-align: center; + transition: all 200ms; + + &:hover { + color: white; + text-decoration: none; + } +`; + +export const EmojiWrap = styled.span` + position: relative; + top: 1px; + margin: 0 0 0 6px; +`; + +export const CloseSponsor = styled.span` + color: white; + text-shadow: none; + margin-right: 15px; + position: relative; + top: -2px; + + &:hover { + opacity: 1; + color: white; + } +`; \ No newline at end of file diff --git a/layouts/default/global.scss b/layouts/default/global.scss index da52e35bc..04c7d7370 100644 --- a/layouts/default/global.scss +++ b/layouts/default/global.scss @@ -62,3 +62,15 @@ code:not([class]) { word-wrap: normal; box-shadow: none; } + +.banner-wrap { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1; +} + +.body-wrap.sponsor-banner-visible { + margin-top: 44px; +} \ No newline at end of file diff --git a/layouts/default/index.js b/layouts/default/index.js index a4ae0bd02..0bd4e7b97 100644 --- a/layouts/default/index.js +++ b/layouts/default/index.js @@ -1,8 +1,14 @@ import React from 'react'; +import classNames from 'classnames'; import './global.scss'; import { firePageView } from 'lib/gtag'; +import { SponsorBanner } from '../../components/sponsor-banner'; class DefaultLayout extends React.Component { + state = { + isBannerClosed: false + }; + componentDidMount() { firePageView(window.location.pathname); } @@ -10,7 +16,12 @@ class DefaultLayout extends React.Component { render() { return (
- { this.props.children } +
+ this.setState({ isBannerClosed: true })} /> +
+
+ { this.props.children } +
); }