m3 react routing intro starter code

AboutPage.js

import React from 'react'

function AboutPage() {
  return (
    <div>
      <h1>About</h1>
      <img src="https://media.giphy.com/media/dWkyPssovVa6Y/giphy.gif" alt="the-office-gif" width="800px" height="auto"/>
    </div>
  )
}

export default AboutPage;

ErrorPage.js

import React from 'react'

function ErrorPage() {
  return (
    <div>
      <h1>404</h1>
      <img 
        src="https://media.giphy.com/media/8L0Pky6C83SzkzU55a/giphy.gif"
        alt="404-error-gif"
        width="800px"
        height="auto"
      />
    </div>
  )
}

export default ErrorPage;

HomePage.js

import React, { Component } from 'react'

class HomePage extends Component {
  render() {
    return (
      <div>
        <h1>Home</h1>
        <img src="https://media.giphy.com/media/3oKIPEqDGUULpEU0aQ/giphy.gif" alt="dashboard-gif"/>
      </div>
    )
  }
}

export default HomePage;

ProjectsPage.js

import { useState } from "react";

function Projects() {
  const [projects, setProjects] = useState([]);

  return (
    <div>
      <h2>Projects</h2>
    
      {projects.map((project) => {
        return (
          <div key={project.id} className="project">
            <h3>{project.name}</h3>
            <p>{project.technologies}</p>
          </div>
        );
      })}
    </div>
  );
}

export default Projects;