Projects index page listing all project .mdx info

index.js

function Projects() {
  const [projects, setProjects] = useState([])
  const [error, setError] = useState()
  useEffect(() => {
    async function fetchProjects() {
      try {
        const result = await fetch(`/api/get-projects`)
        const json = await result.json()
        setProjects(json.projects)
      } catch (err) {
        setError('Error! Please refresh the page?')
      }
    }
    fetchProjects()
  }, [])

  if (error) return <p>{error}</p>

  return (
    <>
      {projects.length > 0 ? (
        projects.map(p => <ProjectCard key={p.name} {...p} />)
      ) : (
        <p>Loading...</p>
      )}
    </>
  )
}