<SYSTEM>This is the llms.txt documentation for the "timelines" directory of the Origin UI - Svelte project.</SYSTEM>

# "timelines" directory

> A collection of production-ready, accessible UI components built with Svelte 5 and Tailwind CSS. These components are designed to be drop-in solutions for rapidly building modern web applications.

This documentation covers 12 components, each following best practices for accessibility, performance, and type safety.

## Components


## timeline-01

> A type-safe, accessible timeline-01 component for building modern UIs. This component is part of the timelines collection.

### Core Information

- **Component ID**: `timeline-01`
- **Location**: `/src/lib/components/timelines/timeline-01.svelte`
- **Type**: UI Component

### Usage

```svelte
Full component implementation:

```svelte
<script lang="ts">
	import {
		Timeline,
		TimelineHeader,
		TimelineIndicator,
		TimelineItem,
		TimelineSeparator,
		TimelineTitle
	} from '$lib/components/ui/timeline';
	const items = [
		{
			date: 'Mar 15, 2024',
			description:
				'Initial team meeting and project scope definition. Established key milestones and resource allocation.',
			id: 1,
			title: 'Project Kickoff'
		},
		{
			date: 'Mar 22, 2024',
			description:
				'Completed wireframes and user interface mockups. Stakeholder review and feedback incorporated.',
			id: 2,
			title: 'Design Phase'
		},
		{
			date: 'Apr 5, 2024',
			description: 'Backend API implementation and frontend component development in progress.',
			id: 3,
			title: 'Development Sprint'
		},
		{
			date: 'Apr 19, 2024',
			description:
				'Quality assurance testing, performance optimization, and production deployment preparation.',
			id: 4,
			title: 'Testing & Deployment'
		}
	];
</script>

<Timeline defaultValue={3}>
	{#each items as item (item.id)}
		<TimelineItem step={item.id}>
			<TimelineHeader>
				<TimelineSeparator />
				<TimelineTitle class="-mt-0.5">{item.title}</TimelineTitle>
				<TimelineIndicator />
			</TimelineHeader>
		</TimelineItem>
	{/each}
</Timeline>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-01.svelte)


## timeline-02

> A type-safe, accessible timeline-02 component for building modern UIs. This component is part of the timelines collection.

### Core Information

- **Component ID**: `timeline-02`
- **Location**: `/src/lib/components/timelines/timeline-02.svelte`
- **Type**: UI Component

### Usage

```svelte
Full component implementation:

```svelte
<script lang="ts">
	import {
		Timeline,
		TimelineContent,
		TimelineDate,
		TimelineHeader,
		TimelineIndicator,
		TimelineItem,
		TimelineSeparator,
		TimelineTitle
	} from '$lib/components/ui/timeline';
	const items = [
		{
			date: 'Mar 15, 2024',
			description:
				'Initial team meeting and project scope definition. Established key milestones and resource allocation.',
			id: 1,
			title: 'Project Kickoff'
		},
		{
			date: 'Mar 22, 2024',
			description:
				'Completed wireframes and user interface mockups. Stakeholder review and feedback incorporated.',
			id: 2,
			title: 'Design Phase'
		},
		{
			date: 'Apr 5, 2024',
			description: 'Backend API implementation and frontend component development in progress.',
			id: 3,
			title: 'Development Sprint'
		},
		{
			date: 'Apr 19, 2024',
			description:
				'Quality assurance testing, performance optimization, and production deployment preparation.',
			id: 4,
			title: 'Testing & Deployment'
		}
	];
</script>

<Timeline defaultValue={3}>
	{#each items as item (item.id)}
		<TimelineItem step={item.id} class="group-data-[orientation=vertical]/timeline:sm:ms-32">
			<TimelineHeader>
				<TimelineSeparator />
				<TimelineDate
					class="group-data-[orientation=vertical]/timeline:sm:absolute group-data-[orientation=vertical]/timeline:sm:-left-32 group-data-[orientation=vertical]/timeline:sm:w-20 group-data-[orientation=vertical]/timeline:sm:text-right"
				>
					{item.date}
				</TimelineDate>
				<TimelineTitle class="sm:-mt-0.5">{item.title}</TimelineTitle>
				<TimelineIndicator />
			</TimelineHeader>
			<TimelineContent>{item.description}</TimelineContent>
		</TimelineItem>
	{/each}
</Timeline>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-02.svelte)


## timeline-03

> A type-safe, accessible timeline-03 component for building modern UIs. This component is part of the timelines collection.

### Core Information

- **Component ID**: `timeline-03`
- **Location**: `/src/lib/components/timelines/timeline-03.svelte`
- **Type**: UI Component

### Usage

```svelte
Full component implementation:

```svelte
<script lang="ts">
	import {
		Timeline,
		TimelineContent,
		TimelineDate,
		TimelineHeader,
		TimelineIndicator,
		TimelineItem,
		TimelineSeparator,
		TimelineTitle
	} from '$lib/components/ui/timeline';
	const items = [
		{
			date: 'Mar 15, 2024',
			description:
				'Initial team meeting and project scope definition. Established key milestones and resource allocation.',
			id: 1,
			title: 'Project Kickoff'
		},
		{
			date: 'Mar 22, 2024',
			description:
				'Completed wireframes and user interface mockups. Stakeholder review and feedback incorporated.',
			id: 2,
			title: 'Design Phase'
		},
		{
			date: 'Apr 5, 2024',
			description: 'Backend API implementation and frontend component development in progress.',
			id: 3,
			title: 'Development Sprint'
		},
		{
			date: 'Apr 19, 2024',
			description:
				'Quality assurance testing, performance optimization, and production deployment preparation.',
			id: 4,
			title: 'Testing & Deployment'
		}
	];
</script>

<Timeline defaultValue={3}>
	{#each items as item (item.id)}
		<TimelineItem step={item.id}>
			<TimelineHeader>
				<TimelineSeparator />
				<TimelineDate>{item.date}</TimelineDate>
				<TimelineTitle>{item.title}</TimelineTitle>
				<TimelineIndicator />
			</TimelineHeader>
			<TimelineContent>{item.description}</TimelineContent>
		</TimelineItem>
	{/each}
</Timeline>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-03.svelte)


## timeline-04

> A type-safe, accessible timeline-04 component for building modern UIs. This component is part of the timelines collection.

### Core Information

- **Component ID**: `timeline-04`
- **Location**: `/src/lib/components/timelines/timeline-04.svelte`
- **Type**: UI Component

### Usage

```svelte
Full component implementation:

```svelte
<script lang="ts">
	import {
		Timeline,
		TimelineContent,
		TimelineDate,
		TimelineHeader,
		TimelineIndicator,
		TimelineItem,
		TimelineSeparator,
		TimelineTitle
	} from '$lib/components/ui/timeline';
	const items = [
		{
			date: '15 minutes ago',
			description:
				'Submitted PR #342 with new feature implementation. Waiting for code review from team leads.',
			id: 1,
			title: 'Pull Request Submitted'
		},
		{
			date: '10 minutes ago',
			description:
				'Automated tests and build process initiated. Running unit tests and code quality checks.',
			id: 2,
			title: 'CI Pipeline Started'
		},
		{
			date: '5 minutes ago',
			description:
				'Received comments on PR. Minor adjustments needed in error handling and documentation.',
			id: 3,
			title: 'Code Review Feedback'
		},
		{
			description:
				'Implemented requested changes and pushed updates to feature branch. Awaiting final approval.',
			id: 4,
			title: 'Changes Pushed'
		}
	];
</script>

<Timeline defaultValue={3}>
	{#each items as item (item.id)}
		<TimelineItem step={item.id}>
			<TimelineHeader>
				<TimelineSeparator />
				<TimelineTitle class="-mt-0.5">{item.title}</TimelineTitle>
				<TimelineIndicator />
			</TimelineHeader>
			<TimelineContent>
				{item.description}
				<TimelineDate class="mb-0 mt-2">{item.date}</TimelineDate>
			</TimelineContent>
		</TimelineItem>
	{/each}
</Timeline>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-04.svelte)


## timeline-05

> A type-safe, accessible timeline-05 component for building modern UIs. This component is part of the timelines collection.

### Core Information

- **Component ID**: `timeline-05`
- **Location**: `/src/lib/components/timelines/timeline-05.svelte`
- **Type**: UI Component

### Usage

```svelte
### Dependencies

Required packages and components:

- [`@lucide/svelte`](https://github.com/lucide-icons/lucide)

Full component implementation:

```svelte
<script lang="ts">
	import CheckIcon from '@lucide/svelte/icons/check';
	import {
		Timeline,
		TimelineContent,
		TimelineDate,
		TimelineHeader,
		TimelineIndicator,
		TimelineItem,
		TimelineSeparator,
		TimelineTitle
	} from '$lib/components/ui/timeline';
	const items = [
		{
			date: 'Mar 15, 2024',
			description:
				'Initial team meeting and project scope definition. Established key milestones and resource allocation.',
			id: 1,
			title: 'Project Kickoff'
		},
		{
			date: 'Mar 22, 2024',
			description:
				'Completed wireframes and user interface mockups. Stakeholder review and feedback incorporated.',
			id: 2,
			title: 'Design Phase'
		},
		{
			date: 'Apr 5, 2024',
			description: 'Backend API implementation and frontend component development in progress.',
			id: 3,
			title: 'Development Sprint'
		},
		{
			date: 'Apr 19, 2024',
			description:
				'Quality assurance testing, performance optimization, and production deployment preparation.',
			id: 4,
			title: 'Testing & Deployment'
		}
	];
</script>

<Timeline defaultValue={3}>
	{#each items as item (item.id)}
		<TimelineItem step={item.id} class="group-data-[orientation=vertical]/timeline:ms-10">
			<TimelineHeader>
				<TimelineSeparator
					class="group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-[1.625rem]"
				/>
				<TimelineDate>{item.date}</TimelineDate>
				<TimelineTitle>{item.title}</TimelineTitle>
				<TimelineIndicator
					class="flex size-6 items-center justify-center group-data-[orientation=vertical]/timeline:-left-7 group-data-[completed]/timeline-item:border-none group-data-[completed]/timeline-item:bg-primary group-data-[completed]/timeline-item:text-primary-foreground"
				>
					<CheckIcon class="group-[:not([data-completed])]/timeline-item:hidden" size={16} />
				</TimelineIndicator>
			</TimelineHeader>
			<TimelineContent>{item.description}</TimelineContent>
		</TimelineItem>
	{/each}
</Timeline>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-05.svelte)


## timeline-06

> A type-safe, accessible timeline-06 component for building modern UIs. This component is part of the timelines collection.

### Core Information

- **Component ID**: `timeline-06`
- **Location**: `/src/lib/components/timelines/timeline-06.svelte`
- **Type**: UI Component

### Usage

```svelte
### Dependencies

Required packages and components:

- [`@lucide/svelte`](https://github.com/lucide-icons/lucide)

Full component implementation:

```svelte
<script lang="ts">
	import GitCompare from '@lucide/svelte/icons/git-compare';
	import GitFork from '@lucide/svelte/icons/git-fork';
	import GitMerge from '@lucide/svelte/icons/git-merge';
	import GitPullRequest from '@lucide/svelte/icons/git-pull-request';
	import {
		Timeline,
		TimelineContent,
		TimelineDate,
		TimelineHeader,
		TimelineIndicator,
		TimelineItem,
		TimelineSeparator,
		TimelineTitle
	} from '$lib/components/ui/timeline';

	const items = [
		{
			date: '15 minutes ago',
			description: 'Forked the repository to create a new branch for development.',
			icon: GitFork,
			id: 1,
			title: 'Forked Repository'
		},
		{
			date: '10 minutes ago',
			description:
				'Submitted PR #342 with new feature implementation. Waiting for code review from team leads.',
			icon: GitPullRequest,
			id: 2,
			title: 'Pull Request Submitted'
		},
		{
			date: '5 minutes ago',
			description:
				'Received comments on PR. Minor adjustments needed in error handling and documentation.',
			icon: GitCompare,
			id: 3,
			title: 'Comparing Branches'
		},
		{
			description: 'Merged the feature branch into the main branch. Ready for deployment.',
			icon: GitMerge,
			id: 4,
			title: 'Merged Branch'
		}
	];
</script>

<Timeline defaultValue={3}>
	{#each items as item (item.id)}
		<TimelineItem step={item.id} class="group-data-[orientation=vertical]/timeline:ms-10">
			<TimelineHeader>
				<TimelineSeparator
					class="group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-[1.625rem]"
				/>
				<TimelineTitle class="mt-0.5">{item.title}</TimelineTitle>
				<TimelineIndicator
					class="flex size-6 items-center justify-center border-none bg-primary/10 group-data-[orientation=vertical]/timeline:-left-7 group-data-[completed]/timeline-item:bg-primary group-data-[completed]/timeline-item:text-primary-foreground"
				>
					<item.icon size={14} />
				</TimelineIndicator>
			</TimelineHeader>
			<TimelineContent>
				{item.description}
				<TimelineDate class="mb-0 mt-2">{item.date}</TimelineDate>
			</TimelineContent>
		</TimelineItem>
	{/each}
</Timeline>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-06.svelte)


## timeline-07

> A type-safe, accessible timeline-07 component for building modern UIs. This component is part of the timelines collection.

### Core Information

- **Component ID**: `timeline-07`
- **Location**: `/src/lib/components/timelines/timeline-07.svelte`
- **Type**: UI Component

### Usage

```svelte
### Dependencies

Required packages and components:

- [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency)

Full component implementation:

```svelte
<script lang="ts">
	import Avatar01 from '$lib/assets/avatar-40-01.jpg?w=48&h=48&enhanced';
	import Avatar02 from '$lib/assets/avatar-40-02.jpg?w=48&h=48&enhanced';
	import Avatar03 from '$lib/assets/avatar-40-03.jpg?w=48&h=48&enhanced';
	import Avatar05 from '$lib/assets/avatar-40-05.jpg?w=48&h=48&enhanced';
	import {
		Timeline,
		TimelineContent,
		TimelineDate,
		TimelineHeader,
		TimelineIndicator,
		TimelineItem,
		TimelineSeparator,
		TimelineTitle
	} from '$lib/components/ui/timeline';

	const items = [
		{
			action: 'opened a new issue',
			date: '15 minutes ago',
			description:
				"I'm having trouble with the new component library. It's not rendering properly.",
			id: 1,
			image: Avatar01,
			title: 'Hannah Kandell'
		},
		{
			action: 'commented on',
			date: '10 minutes ago',
			description:
				"Hey Hannah, I'm having trouble with the new component library. It's not rendering properly.",
			id: 2,
			image: Avatar02,
			title: 'Chris Tompson'
		},
		{
			action: 'assigned you to',
			date: '5 minutes ago',
			description: 'The new component library is not rendering properly. Can you take a look?',
			id: 3,
			image: Avatar03,
			title: 'Emma Davis'
		},
		{
			action: 'closed the issue',
			date: '2 minutes ago',
			description: 'The issue has been fixed. Please review the changes.',
			id: 4,
			image: Avatar05,
			title: 'Alex Morgan'
		}
	];
</script>

<Timeline>
	{#each items as item (item.id)}
		<TimelineItem
			step={item.id}
			class="group-data-[orientation=vertical]/timeline:[&:not(:last-child)]:ms-10 group-data-[orientation=vertical]/timeline:[&:not(:last-child)]:pb-8"
		>
			<TimelineHeader>
				<TimelineSeparator
					class="group-data-[orientation=vertical]/timeline:-left-[1.75rem] group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-[1.625rem]"
				/>

				<TimelineTitle class="mt-0.5">
					{item.title}
					<span class="text-sm font-normal text-muted-foreground">
						{item.action}
					</span>
				</TimelineTitle>
				<TimelineIndicator
					class="flex size-6 items-center justify-center border-none bg-primary/10 group-data-[orientation=vertical]/timeline:-left-7 group-data-[completed]/timeline-item:bg-primary group-data-[completed]/timeline-item:text-primary-foreground"
				>
					<enhanced:img src={item.image} alt={item.title} class="size-6 rounded-full" />
				</TimelineIndicator>
			</TimelineHeader>
			<TimelineContent class="mt-2 rounded-lg border px-4 py-3 text-foreground">
				{item.description}
				<TimelineDate class="mb-0 mt-1">{item.date}</TimelineDate>
			</TimelineContent>
		</TimelineItem>
	{/each}
</Timeline>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-07.svelte)


## timeline-08

> A type-safe, accessible timeline-08 component for building modern UIs. This component is part of the timelines collection.

### Core Information

- **Component ID**: `timeline-08`
- **Location**: `/src/lib/components/timelines/timeline-08.svelte`
- **Type**: UI Component

### Usage

```svelte
Full component implementation:

```svelte
<script lang="ts">
	import {
		Timeline,
		TimelineDate,
		TimelineHeader,
		TimelineIndicator,
		TimelineItem,
		TimelineSeparator,
		TimelineTitle
	} from '$lib/components/ui/timeline';

	const items = [
		{
			date: 'Mar 15, 2024',
			id: 1,
			title: 'Project Kickoff'
		},
		{
			date: 'Mar 22, 2024',
			id: 2,
			title: 'Design Phase'
		},
		{
			date: 'Apr 5, 2024',
			id: 3,
			title: 'Development Sprint'
		},
		{
			date: 'Apr 19, 2024',
			id: 4,
			title: 'Testing & Deployment'
		},
		{
			date: 'May 3, 2024',
			id: 5,
			title: 'User Training'
		},
		{
			date: 'May 17, 2024',
			id: 6,
			title: 'Project Handover'
		}
	];
</script>

<Timeline defaultValue={3}>
	{#each items as item (item.id)}
		<TimelineItem
			step={item.id}
			class={[
				'w-[calc(50%-1.5rem)]',
				'group-data-[orientation=vertical]/timeline:odd:ms-auto',
				'group-data-[orientation=vertical]/timeline:even:text-right',
				'group-data-[orientation=vertical]/timeline:even:ml-0',
				'group-data-[orientation=vertical]/timeline:even:mr-8',
				'group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-indicator]]:even:-right-6',
				'group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-indicator]]:even:left-auto',
				'group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-indicator]]:even:translate-x-1/2',
				'group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-separator]]:even:-right-6',
				'group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-separator]]:even:left-auto',
				'group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-separator]]:even:translate-x-1/2'
			]}
		>
			<TimelineHeader>
				<TimelineSeparator />
				<TimelineDate>{item.date}</TimelineDate>
				<TimelineTitle>{item.title}</TimelineTitle>
				<TimelineIndicator />
			</TimelineHeader>
		</TimelineItem>
	{/each}
</Timeline>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-08.svelte)


## timeline-09

> A type-safe, accessible timeline-09 component for building modern UIs. This component is part of the timelines collection.

### Core Information

- **Component ID**: `timeline-09`
- **Location**: `/src/lib/components/timelines/timeline-09.svelte`
- **Type**: UI Component

### Usage

```svelte
Full component implementation:

```svelte
<script lang="ts">
	import {
		Timeline,
		TimelineContent,
		TimelineDate,
		TimelineItem
	} from '$lib/components/ui/timeline';

	const items = [
		{
			date: new Date('2024-01-09T10:55:00'),
			description: 'System backup completed successfully.',
			id: 1
		},
		{
			date: new Date('2024-01-09T10:50:00'),
			description: 'User authentication service restarted due to configuration update.',
			id: 2
		},
		{
			date: new Date('2024-01-09T10:45:00'),
			description: 'Warning: High CPU usage detected on worker node-03.',
			id: 3
		},
		{
			date: new Date('2024-01-09T10:40:00'),
			description: 'New deployment initiated for api-service v2.1.0.',
			id: 4
		}
	];
</script>

<Timeline class="divide-y rounded-lg border">
	{#each items as item (item.id)}
		<TimelineItem step={item.id} class="!m-0 !px-4 !py-3">
			<TimelineContent class="text-foreground">
				{item.description}
				<TimelineDate class="mt-1">
					{item.date.toLocaleDateString('en-US', {
						day: 'numeric',
						month: 'long',
						year: 'numeric'
					})}
					at
					{item.date.toLocaleTimeString('en-US', {
						hour: 'numeric',
						hour12: true,
						minute: '2-digit'
					})}
				</TimelineDate>
			</TimelineContent>
		</TimelineItem>
	{/each}
</Timeline>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-09.svelte)


## timeline-10

> A type-safe, accessible timeline-10 component for building modern UIs. This component is part of the timelines collection.

### Core Information

- **Component ID**: `timeline-10`
- **Location**: `/src/lib/components/timelines/timeline-10.svelte`
- **Type**: UI Component

### Usage

```svelte
### Dependencies

Required packages and components:

- [`@lucide/svelte`](https://github.com/lucide-icons/lucide)
- [`enhanced-image`](https://www.npmjs.com/package/@sveltejs/enhanced-img) (dev dependency)

Full component implementation:

```svelte
<script lang="ts">
	import { Timeline, TimelineContent, TimelineItem } from '$lib/components/ui/timeline';
	type ActionType = 'create' | 'edit' | 'post' | 'reply';

	import type { Icon as IconType } from '@lucide/svelte';

	import BookOpenIcon from '@lucide/svelte/icons/book-open';
	import MessageCircleIcon from '@lucide/svelte/icons/message-circle';
	import PencilIcon from '@lucide/svelte/icons/pencil';
	import PlusIcon from '@lucide/svelte/icons/plus';
	import Avatar02 from '$lib/assets/avatar-40-02.jpg?w=48&h=48&enhanced';
	const items: {
		action: ActionType;
		date: Date;
		id: number;
		image: Picture;
		user: string;
	}[] = [
		{
			action: 'post',
			date: new Date(Date.now() - 59000), // 59 seconds ago
			id: 1,
			image: Avatar02,
			user: 'Matt'
		},
		{
			action: 'reply',
			date: new Date(Date.now() - 180000), // 3 minutes ago
			id: 2,
			image: Avatar02,
			user: 'Matt'
		},
		{
			action: 'edit',
			date: new Date(Date.now() - 300000), // 5 minutes ago
			id: 3,
			image: Avatar02,
			user: 'Matt'
		},
		{
			action: 'create',
			date: new Date(Date.now() - 600000), // 10 minutes ago
			id: 4,
			image: Avatar02,
			user: 'Matt'
		}
	];

	function getActionIcon(action: ActionType): typeof IconType {
		const icons: Record<ActionType, typeof IconType> = {
			create: PlusIcon,
			edit: PencilIcon,
			post: BookOpenIcon,
			reply: MessageCircleIcon
		};
		return icons[action];
	}

	function getActionText(action: ActionType): string {
		const texts: Record<ActionType, string> = {
			create: 'created a new project',
			edit: 'edited a post',
			post: 'wrote a new post',
			reply: 'replied to a comment'
		};
		return texts[action];
	}

	function getRelativeTimeString(date: Date): string {
		const now = new Date();
		const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);

		if (diffInSeconds < 60) {
			return `${diffInSeconds} seconds ago`;
		} else if (diffInSeconds < 3600) {
			const minutes = Math.floor(diffInSeconds / 60);
			return `${minutes} ${minutes === 1 ? 'minute' : 'minutes'} ago`;
		} else if (diffInSeconds < 86400) {
			const hours = Math.floor(diffInSeconds / 3600);
			return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`;
		} else {
			const days = Math.floor(diffInSeconds / 86400);
			return `${days} ${days === 1 ? 'day' : 'days'} ago`;
		}
	}
</script>

<div class="space-y-3">
	<div class="text-xs font-medium text-muted-foreground">Activity</div>
	<Timeline>
		{#each items as item (item.id)}
			{@const ActionIcon = getActionIcon(item.action)}
			<TimelineItem step={item.id} class="!m-0 flex-row items-center gap-3 !py-2.5">
				<ActionIcon class="text-muted-foreground/80" size={16} />
				<enhanced:img src={item.image} alt={item.user} class="size-6 rounded-full" />
				<TimelineContent class="text-foreground">
					<a class="font-medium hover:underline" href="#">
						{item.user}
					</a>
					<span class="font-normal">
						{getActionText(item.action)}
						<a class="hover:underline" href="#">
							{getRelativeTimeString(item.date)}
						</a>
					</span>
				</TimelineContent>
			</TimelineItem>
		{/each}
	</Timeline>
</div>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-10.svelte)


## timeline-11

> A type-safe, accessible timeline-11 component for building modern UIs. This component is part of the timelines collection.

### Core Information

- **Component ID**: `timeline-11`
- **Location**: `/src/lib/components/timelines/timeline-11.svelte`
- **Type**: UI Component

### Usage

```svelte
Full component implementation:

```svelte
<script lang="ts">
	import {
		Timeline,
		TimelineContent,
		TimelineDate,
		TimelineHeader,
		TimelineIndicator,
		TimelineItem,
		TimelineSeparator,
		TimelineTitle
	} from '$lib/components/ui/timeline';

	const items = [
		{
			date: 'Mar 15, 2024',
			description: 'Initial team meeting.',
			id: 1,
			title: 'Project Kickoff'
		},
		{
			date: 'Mar 22, 2024',
			description: 'Completed wireframes.',
			id: 2,
			title: 'Design Phase'
		},
		{
			date: 'Apr 5, 2024',
			description: 'Backend development.',
			id: 3,
			title: 'Development Sprint'
		},
		{
			date: 'Apr 19, 2024',
			description: 'Performance optimization.',
			id: 4,
			title: 'Testing & Deployment'
		}
	];
</script>

<Timeline defaultValue={3} orientation="horizontal">
	{#each items as item (item.id)}
		<TimelineItem step={item.id}>
			<TimelineHeader>
				<TimelineSeparator />
				<TimelineDate>{item.date}</TimelineDate>
				<TimelineTitle>{item.title}</TimelineTitle>
				<TimelineIndicator />
			</TimelineHeader>
			<TimelineContent>{item.description}</TimelineContent>
		</TimelineItem>
	{/each}
</Timeline>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-11.svelte)


## timeline-12

> A type-safe, accessible timeline-12 component for building modern UIs. This component is part of the timelines collection.

### Core Information

- **Component ID**: `timeline-12`
- **Location**: `/src/lib/components/timelines/timeline-12.svelte`
- **Type**: UI Component

### Usage

```svelte
Full component implementation:

```svelte
<script lang="ts">
	import {
		Timeline,
		TimelineContent,
		TimelineDate,
		TimelineHeader,
		TimelineIndicator,
		TimelineItem,
		TimelineSeparator,
		TimelineTitle
	} from '$lib/components/ui/timeline';

	const items = [
		{
			date: 'Mar 15, 2024',
			description: 'Initial team meeting.',
			id: 1,
			title: 'Project Kickoff'
		},
		{
			date: 'Mar 22, 2024',
			description: 'Completed wireframes.',
			id: 2,
			title: 'Design Phase'
		},
		{
			date: 'Apr 5, 2024',
			description: 'Backend development.',
			id: 3,
			title: 'Development Sprint'
		},
		{
			date: 'Apr 19, 2024',
			description: 'Performance optimization.',
			id: 4,
			title: 'Testing & Deployment'
		}
	];
</script>

<Timeline defaultValue={3} orientation="horizontal">
	{#each items as item (item.id)}
		<TimelineItem step={item.id} class="group-data-[orientation=horizontal]/timeline:mt-0">
			<TimelineHeader>
				<TimelineSeparator class="group-data-[orientation=horizontal]/timeline:top-8" />
				<TimelineDate class="mb-10">{item.date}</TimelineDate>
				<TimelineTitle>{item.title}</TimelineTitle>
				<TimelineIndicator class="group-data-[orientation=horizontal]/timeline:top-8" />
			</TimelineHeader>
			<TimelineContent>{item.description}</TimelineContent>
		</TimelineItem>
	{/each}
</Timeline>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/timelines/timeline-12.svelte)