95 lines
1.8 KiB
JavaScript
95 lines
1.8 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) => (
|
|
<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>
|
|
|
|
{/*base 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.Item
|
|
colspan={4}
|
|
style={{
|
|
...alignRight,
|
|
}}
|
|
>
|
|
<a href='#'>View</a>
|
|
<span style={{ padding: 5 }}>|</span>
|
|
<a href='#'>Edit</a>
|
|
</FlexboxGrid.Item>
|
|
</FlexboxGrid>
|
|
</List.Item>
|
|
))}
|
|
</List>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// TODO move to a less file
|
|
const styleCenter = {
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
height: '60px',
|
|
};
|
|
|
|
const alignRight = {
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
height: '60px',
|
|
alignSelf: 'right'
|
|
};
|
|
|
|
const slimText = {
|
|
fontSize: '0.666em',
|
|
color: '#97969B',
|
|
fontWeight: 'lighter',
|
|
paddingBottom: 5,
|
|
};
|
|
|
|
const titleStyle = {
|
|
paddingBottom: 5,
|
|
whiteSpace: 'nowrap',
|
|
fontWeight: 500,
|
|
};
|
|
|
|
const dataStyle = {
|
|
fontSize: '1.2em',
|
|
fontWeight: 500,
|
|
};
|