Function Interface

components/graphql/Interface.tsx:14–47

({ item, objects }: Props)

}

export function Interface({ item, objects }: Props) {
  const { locale } = useRouter()
  const { t } = useTranslation('products')
  const heading = t('graphql.reference.implemented_by')
  const heading2 = t('graphql.reference.fields')

  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>{heading2}</h4>
          <Table fields={item.fields} />
        </>
      )}
    </GraphqlItem>
  )
}