From db7c106516e2ff926f2e7ca7b4daecf18b2d4bd6 Mon Sep 17 00:00:00 2001
From: qt-coder <chuchenkhang@gmail.com>
Date: Tue, 29 Jun 2021 12:59:43 +0800
Subject: [PATCH] Added banner

---
 components/Banner/Banner.js     | 26 ++++++++++++++++++++++++++
 components/Banner/BannerLink.js | 19 +++++++++++++++++++
 pages/_app.js                   |  2 ++
 3 files changed, 47 insertions(+)
 create mode 100644 components/Banner/Banner.js
 create mode 100644 components/Banner/BannerLink.js

diff --git a/components/Banner/Banner.js b/components/Banner/Banner.js
new file mode 100644
index 0000000..90b4479
--- /dev/null
+++ b/components/Banner/Banner.js
@@ -0,0 +1,26 @@
+import { Box, HStack, Stack, Text, useColorModeValue } from '@chakra-ui/react'
+import * as React from 'react'
+import { BannerLink } from './BannerLink'
+
+export const Banner = () => (
+    <Box as="section" pt="8" pb="12" height={50}>
+        <Stack
+            direction={{ base: 'column', sm: 'row' }}
+            justifyContent="center"
+            alignItems="center"
+            py="3"
+            px={{ base: '3', md: '6', lg: '8' }}
+            color="white"
+            bg={useColorModeValue('blue.600', 'blue.400')}
+        >
+            <HStack spacing="3">
+                <Text fontWeight="medium" marginEnd="2">
+                    Cath's dashboard is still in testing phase. It is not stated to release soon.
+                </Text>
+            </HStack>
+            <BannerLink w={{ base: 'full', sm: 'auto' }} flexShrink={0}>
+                Learn More
+            </BannerLink>
+        </Stack>
+    </Box>
+)
\ No newline at end of file
diff --git a/components/Banner/BannerLink.js b/components/Banner/BannerLink.js
new file mode 100644
index 0000000..7e6f2e0
--- /dev/null
+++ b/components/Banner/BannerLink.js
@@ -0,0 +1,19 @@
+import { chakra } from '@chakra-ui/react'
+import * as React from 'react'
+
+export const BannerLink = (props) => (
+    <chakra.a
+        {...props}
+        href="https://github.com/night0721/cath.gq"
+        px="4"
+        py="1.5"
+        textAlign="center"
+        borderWidth="1px"
+        borderColor="whiteAlpha.400"
+        fontWeight="medium"
+        rounded="base"
+        _hover={{
+            bg: 'whiteAlpha.200',
+        }}
+    />
+)
diff --git a/pages/_app.js b/pages/_app.js
index 3211eac..46d70c8 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -5,6 +5,7 @@ import { ChakraProvider } from "@chakra-ui/react"
 import Header from '../components/Nav/Header'
 import theme from '../chakra_config/theme'
 import { ColorModeScript } from "@chakra-ui/react"
+import { Banner } from '../components/Banner/Banner'
 
 function MyApp({ Component, pageProps }) {
   return (
@@ -16,6 +17,7 @@ function MyApp({ Component, pageProps }) {
         </Head>
         <ColorModeScript initialColorMode={theme.config.initialColorMode} />
         <Header/>
+        <Banner/>
         <div className='page-container'>
           <Component {...pageProps} />
         </div>