import React from 'react' import { FaMapMarkerAlt } from 'react-icons/fa' interface CourseProps { slot: string courseCode: string courseType: string courseName: string location: string startTime: any endTime: any } const Course: React.FC<any> = ({ slots }) => { return ( <div className='course-wrapper'> { slots.map((course: CourseProps) => { const startTime = new Date(0) startTime.setUTCSeconds(course.startTime.seconds) const endTime = new Date(0) endTime.setUTCSeconds(course.endTime.seconds) const sTime: string = startTime.toLocaleTimeString() .slice(0, startTime.toLocaleTimeString().lastIndexOf(':')) + startTime.toLocaleTimeString() .slice(startTime.toLocaleTimeString().length - 3) const eTime: string = endTime.toLocaleTimeString() .slice(0, endTime.toLocaleTimeString().lastIndexOf(':')) + endTime.toLocaleTimeString() .slice(endTime.toLocaleTimeString().length - 3) return ( <div key={course.slot} className='course'> <div className='course-deets'> <div className='course-name'>{course.courseName}</div> <div className='course-time'>{course.courseCode}</div> <div className='course-time'> {sTime} - {eTime} </div> <div className='course-slot-loc'> <div className='course-slot'>{course.slot}</div> <div className='course-loc'>{course.location} <FaMapMarkerAlt /></div> </div> </div> </div> ) }) } </div> ) } export default Course