From a79ce2fa22047339a76e4af751adcd8320e0d360 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Wed, 6 Jan 2021 01:10:21 +0200
Subject: [PATCH] implement banner

---
 components/layout/Banner.tsx | 27 +++++++++++++++++++++++++++
 components/layout/index.tsx  |  2 ++
 2 files changed, 29 insertions(+)
 create mode 100644 components/layout/Banner.tsx

diff --git a/components/layout/Banner.tsx b/components/layout/Banner.tsx
new file mode 100644
index 000000000..2ba26dec2
--- /dev/null
+++ b/components/layout/Banner.tsx
@@ -0,0 +1,27 @@
+import { Box, Image } from "@chakra-ui/react";
+import MyContainer from "components/common/MyContainer";
+
+const event = {
+  bg: "#121621",
+  logoUrl: "https://abload.de/img/rsz_hxznxtrwdpjke.png",
+  staleAfter: "2021-01-10",
+  content:
+    "Who will be crowned the TASL Season 2 champion - FTWin, FreeZe, Rift or Starburst? Catch the playoffs this Saturday at 12PM ET/6PM CET on EndGameTV!",
+} as const;
+
+const Banner = () => {
+  if (new Date().getTime() > new Date(event.staleAfter).getTime()) return null;
+
+  return (
+    <a href="https://www.twitch.tv/endgametv1">
+      <Box bg={event.bg} p={2} fontWeight="bold" textAlign="center">
+        <MyContainer>
+          <Image w={10} h={10} mb={2} mx="auto" src={event.logoUrl} />
+          {event.content}
+        </MyContainer>
+      </Box>
+    </a>
+  );
+};
+
+export default Banner;
diff --git a/components/layout/index.tsx b/components/layout/index.tsx
index 9f2cdee42..72face22d 100644
--- a/components/layout/index.tsx
+++ b/components/layout/index.tsx
@@ -4,6 +4,7 @@ import MyContainer from "components/common/MyContainer";
 import { AppProps } from "next/app";
 import { useState } from "react";
 import { SWRConfig } from "swr";
+import Banner from "./Banner";
 import Footer from "./Footer";
 import IconNavBar from "./IconNavBar";
 import TopNav from "./TopNav";
@@ -44,6 +45,7 @@ const Layout = ({ Component, pageProps }: AppProps) => {
     >
       <TopNav />
       <IconNavBar />
+      <Banner />
       <Flex flexDirection="column" minH="100vh" pt="1rem">
         <MyContainer wide>
           <Component {...pageProps} />