export default function StatusPage()

in src/pages/status.js [54:128]
73 lines of code
5 McCabe index (conditional complexity)

export default function StatusPage() {
  const [components, setComponents] = React.useState(null)

  React.useEffect(() => {
    getComponents()
      .then((components) => setComponents(components))
      .catch((error) => console.error(error))
  }, [])

  return (
    <Layout
      pageContext={{
        frontmatter: {title: 'Component status', description: 'Status of components in the Primer Design System'},
      }}
    >
      <Box className="container-xl" px={5} pb={8}>
        <Box pt={8} pb={6}>
          <Heading fontSize={[48, 56]} color="blue.4" lineHeight={1} mb={3}>
            Component status
          </Heading>
          <Text as="p" fontSize={3} color="blue.2">
            Status of components in the Primer Design System.
            <br />
            Check out the <LinkLight href="https://primer.style/contribute/component-lifecycle">component lifecycle</LinkLight> for more information about each status.
          </Text>
        </Box>
        {components ? (
          <Table>
            <colgroup>
              <col style={{width: '15%'}} />
              <col style={{width: '15%'}} />
              <col style={{width: '15%'}} />
              <col style={{width: '55%'}} />
            </colgroup>
            <thead>
              <tr>
                <th align="left">Component</th>
                {/* TODO: How would we add a Figma column? Where would that data come from ? */}
                <th>ViewComponent</th>
                <th>React</th>
                <th align="left">Description</th>
              </tr>
            </thead>
            <tbody>
              {components.map((component) => (
                <tr key={component.id}>
                  <td style={{whiteSpace: 'nowrap'}}>{component.displayName}</td>
                  <td align="center" style={{whiteSpace: 'nowrap'}}>
                    {component.implementations.viewComponent ? (
                      <a href={component.implementations.viewComponent.url}>
                        <StatusLabel status={component.implementations.viewComponent.status} />
                      </a>
                    ) : (
                      <Text color="gray.5">Not available</Text>
                    )}
                  </td>
                  <td align="center" style={{whiteSpace: 'nowrap'}}>
                    {component.implementations.react ? (
                      <a href={component.implementations.react.url}>
                        <StatusLabel status={component.implementations.react.status} />
                      </a>
                    ) : (
                      <Text color="gray.5">Not available</Text>
                    )}
                  </td>
                  <td style={{minWidth: 400}}>{component.description}</td>
                </tr>
              ))}
            </tbody>
          </Table>
        ) : null}
      </Box>
    </Layout>
  )
}