{"size": 768, "ext": "js", "max_stars_repo_path": "part-2/src/components/Course.js", "max_stars_repo_name": "pradeep7G/FSO-submissions", "max_stars_repo_stars_event_min_datetime": "2021-08-21T10:10:49.000Z", "max_stars_repo_stars_event_max_datetime": "2021-08-21T10:10:49.000Z", "max_issues_repo_path": "part-2/src/components/Course.js", "max_issues_repo_name": "pradeep7G/FSO-submissions", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "part-2/src/components/Course.js", "max_forks_repo_name": "pradeep7G/FSO-submissions", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 16.6956521739, "max_line_length": 63, "alphanum_fraction": 0.4817708333}
import React from 'react'

const Header=(props)=>{
  return (
   <div>
     <h2>{props.course}</h2>
   </div>
  )
}

const Part=({part})=>{
  return (
    <p>
      {part.name} {part.exercises}
    </p>
  )
}
const Content=({parts})=>{
  return (
  <div>
    {parts.map((part)=><Part key={part.id} part={part}/>)}
  </div>
  )
}
const Total=({parts})=>{

  const total=parts.reduce((acc,cur)=> acc + cur.exercises,0);
  return (
    <>
      <p><b>Total of {total} exercises</b></p>
    </>
  )
}

const Course=({course})=>{

      return (
        <div>
        <Header course={course.name} />
        <Content parts={course.parts}  />
        <Total parts={course.parts}/>
        </div>
      )
}

export default Course;