49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { LinkIcon } from '@primer/octicons-react'
|
|
|
|
import type { GraphqlT } from './types'
|
|
import { Notice } from './Notice'
|
|
|
|
type Props = {
|
|
item: GraphqlT
|
|
heading?: string
|
|
headingLevel?: number
|
|
children?: React.ReactNode
|
|
}
|
|
|
|
export function GraphqlItem({ item, heading, children, headingLevel = 2 }: Props) {
|
|
const lowerCaseName = item.name.toLowerCase()
|
|
return (
|
|
<>
|
|
{headingLevel === 2 && (
|
|
<h2 id={lowerCaseName}>
|
|
<a className="doctocat-link" href={`#${lowerCaseName}`}>
|
|
<LinkIcon className="octicon-link" size="small" />
|
|
</a>
|
|
{item.name}
|
|
</h2>
|
|
)}
|
|
{headingLevel === 3 && (
|
|
<h3 id={lowerCaseName}>
|
|
<a className="doctocat-link" href={`#${lowerCaseName}`}>
|
|
<LinkIcon className="octicon-link" size="small" />
|
|
</a>
|
|
{item.name}
|
|
</h3>
|
|
)}
|
|
<p
|
|
dangerouslySetInnerHTML={{
|
|
__html: item.description,
|
|
}}
|
|
/>
|
|
<div>
|
|
{item.preview && <Notice item={item} variant="preview" />}
|
|
{item.isDeprecated && <Notice item={item} variant="deprecation" />}
|
|
</div>
|
|
<div>
|
|
{heading && <h4>{heading}</h4>}
|
|
{children}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|