Added banner

This commit is contained in:
qt-coder 2021-06-29 12:59:43 +08:00
parent 2d06e93299
commit db7c106516
3 changed files with 47 additions and 0 deletions

View file

@ -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>
)

View file

@ -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',
}}
/>
)

View file

@ -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>