mirror of
https://github.com/primer/css.git
synced 2024-11-28 04:43:05 +03:00
32 lines
838 B
JavaScript
32 lines
838 B
JavaScript
import React from 'react'
|
|
import styled from 'styled-components'
|
|
import {StyledOcticon, Heading, Box, Text} from '@primer/components'
|
|
import {Link} from '@githubprimer/octicons-react'
|
|
import slugify from 'slugify'
|
|
|
|
const Anchor = ({id}) => (
|
|
<a href={`#${id}`}>
|
|
<StyledOcticon color="black" icon={Link} />
|
|
</a>
|
|
)
|
|
|
|
const StyledHeading = styled(Heading)`
|
|
&:hover .anchorWrapper,
|
|
&:focus .anchorWrapper {
|
|
display: inline-block;
|
|
}
|
|
`
|
|
const MarkdownHeading = ({children, className, ...rest}) => {
|
|
const id = slugify(children.toString())
|
|
return (
|
|
<StyledHeading id={id} className={className} {...rest}>
|
|
<Box as={Text} lineHeight={1} className="anchorWrapper" pr={1} ml={'-20px'} display={'none'}>
|
|
<Anchor id={id} />
|
|
</Box>
|
|
{children}
|
|
</StyledHeading>
|
|
)
|
|
}
|
|
|
|
export default MarkdownHeading
|