forked from github/docs
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathInterface.tsx
More file actions
51 lines (46 loc) · 1.41 KB
/
Interface.tsx
File metadata and controls
51 lines (46 loc) · 1.41 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import { useRouter } from 'next/router'
import { Link } from 'components/Link'
import { GraphqlItem } from './GraphqlItem'
import { Table } from './Table'
import { useTranslation } from 'components/hooks/useTranslation'
import type { ObjectT, InterfaceT } from './types'
type Props = {
item: InterfaceT
objects: ObjectT[]
}
export function Interface({ item, objects }: Props) {
const { locale } = useRouter()
const { t } = useTranslation('products')
const heading = t('graphql.reference.implemented_by').replace('{{ GraphQLItemTitle }}', item.name)
const heading2 = t('graphql.reference.fields').replace('{{ GraphQLItemTitle }}', item.name)
const implementedBy = objects.filter(
(object) =>
object.implements &&
object.implements.some((implementsItem) => implementsItem.name === item.name)
)
return (
<GraphqlItem item={item} heading={heading}>
<ul>
{implementedBy.map((object) => (
<li key={`${item.id}-${item.name}-${object.href}-${object.name}`}>
<code>
<Link href={object.href} locale={locale}>
{object.name}
</Link>
</code>
</li>
))}
</ul>
{item.fields && (
<>
<h4
dangerouslySetInnerHTML={{
__html: heading2,
}}
/>
<Table fields={item.fields} />
</>
)}
</GraphqlItem>
)
}