Added banner
This commit is contained in:
parent
2d06e93299
commit
db7c106516
3 changed files with 47 additions and 0 deletions
26
components/Banner/Banner.js
Normal file
26
components/Banner/Banner.js
Normal 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>
|
||||
)
|
19
components/Banner/BannerLink.js
Normal file
19
components/Banner/BannerLink.js
Normal 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',
|
||||
}}
|
||||
/>
|
||||
)
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue