Course
The Course component displays timetable course information with colors, status indicators, and teacher/room details.
Import
import { Course } from 'papillon-ui';
Basic Usage
<Course
id="math-101"
name="Mathematics"
teacher="Mr. Smith"
room="Room 204"
color="#4A90E2"
start={Date.now() / 1000}
end={Date.now() / 1000 + 3600}
onPress={() => {}}
/>
Props
Unique identifier for the course
Start timestamp (Unix seconds)
End timestamp (Unix seconds)
Status object with canceled boolean and label string
variant
'primary' | 'separator'
default:"primary"
Display variant. Use separator for breaks between courses.
Show start/end times on the left
Compact mode with reduced padding
Status Indicators
Canceled Course
<Course
name="Mathematics"
start={startTime}
end={endTime}
status={{ canceled: true, label: "Cours annulé" }}
color="#DC1400"
/>
Modified Course
<Course
name="Mathematics"
start={startTime}
end={endTime}
status={{ label: "Salle modifiée" }}
color="#4A90E2"
/>
Separator Variant
Display breaks between courses:
<Course
id="lunch"
name="Lunch Break"
variant="separator"
start={12 * 3600}
end={13 * 3600}
/>
Compact Mode
<Course
name="Mathematics"
teacher="Mr. Smith"
room="204"
start={startTime}
end={endTime}
compact
/>
Full Example
import { Course } from 'papillon-ui';
import { View } from 'react-native';
function TimetableDay({ courses }) {
return (
<View style={{ gap: 6 }}>
{courses.map(course => (
<Course
key={course.id}
id={course.id}
name={course.subject}
teacher={course.teacher}
room={course.room}
color={course.color}
start={course.startTimestamp}
end={course.endTimestamp}
status={course.status}
onPress={() => showCourseDetails(course)}
/>
))}
</View>
);
}
