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 types 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[] |