Timeline.jsx 6.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. import React from 'react'
  2. import classnames from 'classnames'
  3. import imgProfil from '../img/imgProfil.png'
  4. import imgProfilReverse from '../img/imgProfil-reverse.png'
  5. const Timeline = props => {
  6. return (
  7. <div className='timeline'>
  8. <div className={classnames(`${props.customClass}__header`, 'timeline__header')}>
  9. Timeline
  10. </div>
  11. <ul className={classnames(`${props.customClass}__messagelist`, 'timeline__messagelist')}>
  12. <li className={classnames(`${props.customClass}__messagelist__item`, 'timeline__messagelist__item sended')}>
  13. <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
  14. <img src={imgProfil} alt='avatar' />
  15. </div>
  16. <div
  17. className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
  18. 27/11/17 à 11h45
  19. </div>
  20. <div
  21. className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__messagelist__item__content')}>
  22. Proident esse laboris in sed officia exercitation ut anim ea.
  23. </div>
  24. </li>
  25. <li className={classnames(`${props.customClass}__messagelist__item`, 'timeline__messagelist__item received')}>
  26. <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
  27. <img src={imgProfilReverse} alt='avatar' />
  28. </div>
  29. <div
  30. className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
  31. 27/11/17 à 11h47
  32. </div>
  33. <div
  34. className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__messagelist__item__content')}>
  35. Proident esse laboris in sed officia exercitation ut anim ea.
  36. Proident esse laboris in sed officia exercitation ut anim ea.
  37. Proident esse laboris in sed officia exercitation ut anim ea.
  38. Proident esse laboris in sed officia exercitation ut anim ea.
  39. Proident esse laboris in sed officia exercitation ut anim ea.
  40. </div>
  41. </li>
  42. <li className={classnames(`${props.customClass}__messagelist__version`, 'timeline__messagelist__version')}>
  43. <div className={classnames(`${props.customClass}__messagelist__version__btn`, 'timeline__messagelist__version__btn btn')}>
  44. <i className='fa fa-code-fork' />
  45. version 3
  46. </div>
  47. <div className={classnames(`${props.customClass}__messagelist__version__date`, 'timeline__messagelist__version__date')}>
  48. Créer le 22/11/17
  49. </div>
  50. </li>
  51. <li className={classnames(`${props.customClass}__messagelist__item`, 'timeline__messagelist__item sended')}>
  52. <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
  53. <img src={imgProfil} alt='avatar' />
  54. </div>
  55. <div
  56. className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
  57. 27/11/17 à 11h45
  58. </div>
  59. <div
  60. className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__messagelist__item__content')}>
  61. Proident esse laboris in sed officia exercitation ut anim ea.
  62. </div>
  63. </li>
  64. <li className={classnames(`${props.customClass}__messagelist__item`, 'timeline__messagelist__item received')}>
  65. <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
  66. <img src={imgProfilReverse} alt='avatar' />
  67. </div>
  68. <div
  69. className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
  70. 27/11/17 à 11h47
  71. </div>
  72. <div
  73. className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__messagelist__item__content')}>
  74. Proident esse laboris in sed officia exercitation ut anim ea.
  75. Proident esse laboris in sed officia exercitation ut anim ea.
  76. Proident esse laboris in sed officia exercitation ut anim ea.
  77. Proident esse laboris in sed officia exercitation ut anim ea.
  78. Proident esse laboris in sed officia exercitation ut anim ea.
  79. </div>
  80. </li>
  81. </ul>
  82. <form className={classnames(`${props.customClass}__texteditor`, 'timeline__texteditor')}>
  83. <div
  84. className={classnames(`${props.customClass}__texteditor__simpletext`, 'timeline__texteditor__simpletext input-group')}>
  85. <input
  86. type='text'
  87. className={classnames(`${props.customClass}__texteditor__simpletext__input`, 'timeline__texteditor__simpletext__input form-control')}
  88. placeholder='...'
  89. />
  90. <div
  91. className={classnames(`${props.customClass}__texteditor__simpletext__icon`, 'timeline__texteditor__simpletext__icon input-group-addon')}>
  92. <i className='fa fa-font' />
  93. </div>
  94. </div>
  95. <div className={classnames(`${props.customClass}__texteditor__wysiwyg`, 'timeline__texteditor__wysiwyg d-none d-xl-block')}>
  96. <textarea />
  97. </div>
  98. <div className={classnames(`${props.customClass}__texteditor__submit`, 'timeline__texteditor__submit d-xl-flex justify-content-xl-center')}>
  99. <button
  100. type='submit'
  101. className={classnames(`${props.customClass}__texteditor__submit__btn`, 'timeline__texteditor__submit__btn btn')}
  102. >
  103. Envoyer
  104. <div className={classnames(`${props.customClass}__texteditor__submit__btn__icon`, 'timeline__texteditor__submit__btn__icon')}>
  105. <i className='fa fa-paper-plane-o' />
  106. </div>
  107. </button>
  108. </div>
  109. </form>
  110. </div>
  111. )
  112. }
  113. export default Timeline