import React from 'react' ; import { Text , useColorMode , BoxProps , Heading as ChakraHeading , HeadingProps as ChakraHeadingProps } from '@chakra-ui/react' ; import { RouteLink } from '@47ng/chakra-next' ; import { useLinkColor } from 'src/ui/theme' ; const headingColors = { light : 'gray.900' , dark : 'gray.200' } ; export interface HeadingProps extends ChakraHeadingProps { linkable ? : boolean ; } const Heading = ( { linkable = false , children , ... props } ) => { const { colorMode } = useColorMode ( ) ; return ( < ChakraHeading mt = { 8 } mb = { 6 } color = { headingColors [ colorMode ] } css = { linkable ? { scrollMarginTop : '100px' , scrollSnapMargin : '100px' , '&[id]:hover a' : { opacity : 0.25 } , '&[id]:hover a:hover' : { opacity : 1 } } : { } } textStyle = { props . as as string } { ... props } > { children } { linkable && ( < RouteLink to = { `#${ props . id }` } aria - label = "anchor" fontWeight = "normal" opacity = { 0 } ml = { 2 } _hover = { { opacity : 1 , color : useLinkColor ( ) , textDecoration : 'underline' } } _focus = { { opacity : 1 , color : useLinkColor ( ) , textDecoration : 'underline' } } > # < /RouteLink>)} < /ChakraHeading>); } ; type P = HeadingProps ; export const H1 = p => < Heading as = "h1" size = "2xl" { ... p } />; export const H2 = p => < Heading as = "h2" size = "xl" { ... p } />; export const H3 = p => < Heading as = "h3" size = "lg" { ... p } />; export const H4 = p => < Heading as = "h4" size = "md" { ... p } />; export const H5 = p => < Heading as = "h5" size = "sm" { ... p } />; export const H6 = p => < Heading as = "h6" size = "xs" { ... p } />; export const Paragraph = ( p ) => < Text as = "p" mb = { 8 } { ... p } />;