Custom

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
import { Fragment } from 'react'
import { ExportedTypes } from 'mdxts/components'

export function Custom() {
  return (
    <ExportedTypes source="./MDXContent.tsx">
      {(declarations) =>
        declarations.map((declaration) => (
          <div
            key={declaration.name}
            style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
          >
            <h2>{declaration.name}</h2>
            <p>{declaration.description}</p>
            <ul>
              {declaration.types.map((type) => (
                <Fragment key={type.text}>
                  {type.properties?.length
                    ? type.properties.map((property) => (
                        <li key={property.name}>
                          {property.name}: {property.text}
                        </li>
                      ))
                    : null}
                </Fragment>
              ))}
            </ul>
          </div>
        ))
      }
    </ExportedTypes>
  )
}