text: import React from "react";
  
  const Total = ({ parts }) => {
    const total = parts.reduce((s, p) => {
      return s + p.exercises;
    }, 0);
    return <strong>Number of exercises {total}</strong>;
  };
  
  const Part = ({ part, exercises }) => {
    return (
      <p>
        {part} {exercises}
      </p>
    );
  };
  
  const Content = ({ parts }) => {
    return (
      <>
        {parts.map((part) => (
          <Part key={part.name} part={part.name} exercises={part.exercises} />
        ))}
      </>
    );
  };
  
  const Header = ({ name }) => {
    return <h2>{name}</h2>;
  };
  
  const Course = ({ courses }) => {
    return (
      <>
        <h1>Web development curriculum</h1>
        {courses.map((course, i) => (
          <div key={course.id}>
            <Header name={course.name} />
            <Content parts={course.parts} />
            <Total parts={course.parts} />
          </div>
        ))}
      </>
    );
  };
  
  export default Course;
  