Timeline constructor

Timeline({
  1. List<TimelineItem> items = const [],
  2. String? className,
  3. Map<String, Object?> props = const {},
  4. Map<String, Object?> style = const {},
  5. DartStyle? dartStyle,
})

Creates a timeline from items.

Implementation

Timeline({
  List<TimelineItem> items = const [],
  String? className,
  Map<String, Object?> props = const {},
  Map<String, Object?> style = const {},
  DartStyle? dartStyle,
}) : super(
       'ol',
       props: mergeComponentProps(
         props,
         className: className,
         defaultStyle: const {
           'display': 'grid',
           'gap': '14px',
           'list-style': 'none',
           'margin': 0,
           'padding': 0,
         },
         dartStyle: dartStyle,
         style: style,
       ),
       children: [
         for (final item in items)
           FlintElement(
             'li',
             props: const {
               'style': {
                 'display': 'grid',
                 'grid-template-columns': '12px minmax(0, 1fr)',
                 'gap': '10px',
               },
             },
             children: [
               FlintElement(
                 'span',
                 props: {
                   'style': {
                     'width': '10px',
                     'height': '10px',
                     'border-radius': '999px',
                     'margin-top': '5px',
                     'background': toneSolid(item.tone),
                   },
                 },
               ),
               FlintElement(
                 'div',
                 children: [
                   FlintElement(
                     'strong',
                     children: normalizeChildren(item.title, const []),
                   ),
                   if (item.description != null)
                     FlintElement(
                       'p',
                       props: const {
                         'style': {'margin': 0, 'color': '#667085'},
                       },
                       children: normalizeChildren(
                         item.description,
                         const [],
                       ),
                     ),
                   if (item.time != null)
                     FlintElement(
                       'time',
                       props: const {
                         'style': {'font-size': '12px', 'color': '#98a2b3'},
                       },
                       children: normalizeChildren(item.time, const []),
                     ),
                 ],
               ),
             ],
           ),
       ],
     );