import React from
"react"
;
import PropTypes from
"prop-types"
;
const Courses = ({ geekCourses }) => {
let displayCourses = geekCourses.map((course, idx) => {
return
(
<div
key={idx}
style={{
border:
"2px solid rgb(91, 222, 115)"
,
margin:
"5px"
,
width:
"30vw"
,
borderRadius:
"10px"
,
boxShadow:
"5px 3px 11px -1px rgba(0,0,0,0.46)"
,
padding:
"5px"
,
}}
>
<h3> {course.title} </h3>
<div
style={{
display:
"flex"
,
justifyContent:
"space-between"
,
}}
>
<span style={{ margin:
"5px"
}}>
<strong>Duration:</strong>{
" "
}
{course.duration} days
</span>
<span style={{ margin:
"5px"
}}>
<strong>Price:</strong>{
" "
}
{course.price} Rs
</span>
</div>
<div
style={{
display:
"flex"
,
justifyContent:
"space-between"
,
}}
>
<span style={{ margin:
"5px"
}}>
<strong>Mentor:</strong>{
" "
}
{course.mentor}
</span>
<span style={{ margin:
"5px"
}}>
<strong>TA:</strong> {course.TA}
</span>
</div>
</div>
);
});
return
(
<div>
Geeks Courses
<div
style={{
display:
"flex"
,
flexWrap:
"wrap"
,
padding:
"5px"
,
justifyContent:
"center"
,
}}
>
{displayCourses}
</div>
</div>
);
};
Courses.propTypes = {
geekCourses: PropTypes.arrayOf(
PropTypes.shape({
title: PropTypes.string.isRequired,
price: PropTypes.number.isRequired,
duration: PropTypes.number.isRequired,
mentor: PropTypes.string.isRequired,
TA: PropTypes.string.isRequired,
classesPerWeek: PropTypes.number.isRequired,
})
).isRequired,
};
export
default
Courses;