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 []),
                      ),
                  ],
                ),
              ],
            ),
        ],
      );