Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lowmess/az-golf-gurus. www.azgolfgurus.com
astro datocms typescript
Something went wrong. Try again.
1.8 kB · 83 lines
JSX
at v1
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384import React from 'react'import PropTypes from 'prop-types'import { rgba } from 'polished'import { Box, Heading } from 'rebass'import Paragraph from './Paragraph'import Container from './Container'import MarkdownContent from './MarkdownContent'
const HeaderTitle = ({ children, ...props }) => ( <Heading as="h1" fontSize={[4, 5]} fontWeight={['medium', 'bold']} {...props}> {children} </Heading>)
HeaderTitle.propTypes = { children: PropTypes.string.isRequired,}
const HeaderDescription = ({ markdown, children, ...props }) => markdown ? ( <MarkdownContent mt={4} fontSize={[1, 2]} center dangerouslySetInnerHTML={{ __html: children, }} {...props} /> ) : ( <Paragraph mt={4} fontSize={[1, 2]} {...props}> {children} </Paragraph> )
HeaderDescription.propTypes = { markdown: PropTypes.bool.isRequired, children: PropTypes.string.isRequired,}
HeaderDescription.defaultProps = { markdown: false,}
const Header = ({ hideRule, children, ...props }) => { return ( <Box sx={{ backgroundImage: theme => `linear-gradient(to bottom, ${theme.colors.greens[0]}, ${rgba( theme.colors.greens[0], 0 )})`, textAlign: 'center', }} {...props} > <Container pt={5}> {children}
<Box variant="separator" sx={{ display: hideRule ? ['none', 'block'] : null }} mt={5} /> </Container> </Box> )}
Header.propTypes = { children: PropTypes.node.isRequired, hideRule: PropTypes.bool.isRequired,}
Header.defaultProps = { hideRule: false,}
Header.Title = HeaderTitleHeader.Description = HeaderDescription
export default Header