70 lines
1.4 KiB
JavaScript
70 lines
1.4 KiB
JavaScript
import React from 'react';
|
|
import { List, FlexboxGrid, Icon } from 'rsuite';
|
|
|
|
export default function MeetingList({ meetings, status }) {
|
|
return (
|
|
<>
|
|
<h4>{status}</h4>
|
|
|
|
<List hover>
|
|
{meetings.map((meeting) => (
|
|
<a href={`/meetings/${meeting.id}`}>
|
|
<List.Item key={meeting.id} bordered>
|
|
<FlexboxGrid>
|
|
{/* Icon */}
|
|
<FlexboxGrid.Item
|
|
colspan={2}
|
|
style={styleCenter}
|
|
>
|
|
<Icon
|
|
icon={
|
|
meeting.start_time !== null
|
|
? 'calendar-check-o'
|
|
: 'calendar-o'
|
|
}
|
|
style={{
|
|
color: 'darkgrey',
|
|
fontSize: '1.5em',
|
|
}}
|
|
/>
|
|
</FlexboxGrid.Item>
|
|
|
|
{/*Meeting info*/}
|
|
<FlexboxGrid.Item
|
|
colspan={6}
|
|
style={{
|
|
...styleCenter,
|
|
flexDirection: 'column',
|
|
alignItems: 'flex-start',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
<div style={titleStyle}>
|
|
{meeting.title}
|
|
</div>
|
|
{meeting.start_time !== null && (
|
|
<>{meeting.start_time}</>
|
|
)}
|
|
</FlexboxGrid.Item>
|
|
</FlexboxGrid>
|
|
</List.Item>
|
|
</a>
|
|
))}
|
|
</List>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// TODO move to a less file
|
|
const styleCenter = {
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
height: '60px',
|
|
};
|
|
|
|
const titleStyle = {
|
|
paddingBottom: 5,
|
|
whiteSpace: 'nowrap',
|
|
fontWeight: 500,
|
|
}; |