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 }
+
);
}