Function PropTable

docs/src/components/PropTable.tsx:27–103

({
  componentLink,
  prop,
}: {
  componentLink: string;
  prop: string;
})

};

export default function PropTable({
  componentLink,
  prop,
}: {
  componentLink: string;
  prop: string;
}) {
  const doc = useDoc(componentLink);

  if (!doc?.data?.props) {
    return null;
  }

  const props = doc.data.props;

  return (
    <div>
      {Object.keys(props).map((key) => {
        if (key !== prop) {
          return null;
        }
        let descriptionByLines = props[key].description.split('\n');

        // Slice leading badge - it's handled in `generatePageMDX`
        if (descriptionByLines[0].includes('@')) {
          descriptionByLines = descriptionByLines.slice(1);
        }
        descriptionByLines = descriptionByLines.map((line: string) => {
          // Replace annotations with styled badges.
          if (line.includes('@')) {
            const annotIndex = line.indexOf('@');
            // eslint-disable-next-line prettier/prettier
              return `${line.substr(0, annotIndex)} ${renderBadge(line.substr(annotIndex))}`;
          } else {
            return line;
          }
        });

        const description = descriptionByLines.join('\n');
        const tsType = props[key].tsType?.raw ?? props[key].tsType?.name;
        // @ts-ignore
        const tsTypeLink = typeDefinitions[tsType];

        return (
          <div key={key}>
            <p>
              Type:{' '}
              {tsTypeLink ? (
                <a
                  href={tsTypeLink}
                  target={
                    tsTypeLink.startsWith(
                      'https://callstack.github.io/react-native-paper'
                    )
                      ? '_self'
                      : '_blank'
                  }
                  rel="noreferrer"