Grouped Timeline
<script lang="ts">
import {
Group,
GroupItem
} from '$lib/index';
let timelines = [
{
title:
'<span class="font-medium text-gray-900 dark:text-white">Jese Leos</span> likes <span class="font-medium text-gray-900 dark:text-white">Bonnie Green's</span> post in <span class="font-medium text-gray-900 dark:text-white"> How to start with Flowbite library</span>',
src: '/images/profile-picture-1.webp',
alt: 'alt here',
href: '/',
isPrivate: true,
comment: '"I wanted to share a webinar zeroheight."'
},
{
title:
'<span class="font-medium text-gray-900 dark:text-white">Bonnie Green</span> react to <span class="font-medium text-gray-900 dark:text-white">Thomas Lean's</span> comment',
src: '/images/profile-picture-2.webp',
alt: 'alt here',
href: '/',
isPrivate: true,
comment: '"I wanted to share a webinar zeroheight."'
}
];
</script>
<Group date="January 13th, 2022">
<GroupItem {timelines} />
</Group>Props
The component has the following props, type, and default values. See type-list page for type information.
Group
| Name | Type | Default |
|---|---|---|
| divClass | string | 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700' |
| timeClass | string | 'text-lg font-semibold text-gray-900 dark:text-white' |
| date | Date | string | - |
GroupItem
| Name | Type | Default |
|---|---|---|
| timelines | GroupTimelineType[] | - |