1 import React from 'react'; |
1 import React from 'react'; |
2 import _ from 'lodash'; |
2 import _ from 'lodash'; |
|
3 import Color from 'color'; |
3 import '../App.css'; |
4 import '../App.css'; |
4 import './SessionSummary.css' |
5 import './SessionSummary.css' |
5 import {formatTimestamp} from '../utils'; |
6 import {formatTimestamp} from '../utils'; |
6 |
7 |
7 const SessionSummary = ({notes}) => ( |
8 const SessionSummary = ({notes}) => ( |
8 <ul className="list-group sticky-left"> |
9 <div className="session-summary-list"> |
9 {notes.map((note) => |
10 <ul className="list-group sticky-left"> |
10 <li className="list-group-item border-0" key={note._id}> |
11 {notes.map((note) => { |
11 <a href={'#note-' + note._id}> |
12 const bgColor = note.categories.length > 0 ? Color(note.categories[0].color).lighten(0.5).hex() : "transparent"; |
12 <small className="note-time text-irinotes-time bg-irinotes-headers border-0 text-center">{formatTimestamp(note.startedAt)}</small> |
13 return ( |
13 <small className="note-length font-weight-bold px-2 text-muted text-center">{_.words(note.plain).length} mots</small> |
14 <li className="list-group-item border-0 py-1" key={note._id}> |
14 <small className="note-time text-irinotes-time bg-irinotes-headers border-0 text-center">{formatTimestamp(note.finishedAt)}</small> |
15 <a href={'#note-' + note._id}> |
15 </a> |
16 <small className="note-time text-irinotes-time px-1 bg-irinotes-headers border-0 text-center">{formatTimestamp(note.startedAt)}</small> |
16 </li> |
17 <small className="note-length font-weight-bold text-muted text-center badge" style={{ backgroundColor: bgColor }}>{_.words(note.plain).length} mots</small> |
17 )} |
18 <small className="note-time text-irinotes-time px-1 bg-irinotes-headers border-0 text-center">{formatTimestamp(note.finishedAt)}</small> |
18 </ul> |
19 </a> |
|
20 </li> |
|
21 ) |
|
22 })} |
|
23 </ul> |
|
24 </div> |
19 ) |
25 ) |
20 |
26 |
21 export default SessionSummary; |
27 export default SessionSummary; |