Timeline

Timeline is a component that allows you to create a timeline to another page or resource.

Validate
Build
Iterate

import {
	Timeline,
	TimelineItem,
	TimelineSeparator,
	TimelineIcon,
	TimelineTrack,
	TimelineContent,
} from '@nerdfish/ui'

export function TimelineExample() {
	return (
		<Timeline>
			<TimelineItem>
				<TimelineSeparator>
					<TimelineIcon />
					<TimelineTrack />
				</TimelineSeparator>
				<TimelineContent>Validate</TimelineContent>
			</TimelineItem>
			<TimelineItem>
				<TimelineSeparator>
					<TimelineTrack />
					<TimelineIcon />
					<TimelineTrack />
				</TimelineSeparator>
				<TimelineContent>Build</TimelineContent>
			</TimelineItem>
			<TimelineItem>
				<TimelineSeparator>
					<TimelineTrack />
					<TimelineIcon />
				</TimelineSeparator>
				<TimelineContent>Iterate</TimelineContent>
			</TimelineItem>
		</Timeline>
	)
}

Usage

import { Timeline } from '@nerdfish/ui'

<Timeline>
	<TimelineItem>
		<TimelineSeparator>
			<TimelineTrack />
			<TimelineIcon />
		</TimelineSeparator>
	</TimelineItem>
</Timeline>

Colors

Validate
Build
Iterate

import {
	Timeline,
	TimelineItem,
	TimelineSeparator,
	TimelineIcon,
	TimelineTrack,
	TimelineContent,
} from '@nerdfish/ui'

export function TimelineColorsExample() {
	return (
		<Timeline>
			<TimelineItem>
				<TimelineSeparator>
					<TimelineIcon className="text-brand" />
					<TimelineTrack />
				</TimelineSeparator>
				<TimelineContent>Validate</TimelineContent>
			</TimelineItem>
			<TimelineItem>
				<TimelineSeparator>
					<TimelineTrack />
					<TimelineIcon className="text-green-500" />
					<TimelineTrack />
				</TimelineSeparator>
				<TimelineContent>Build</TimelineContent>
			</TimelineItem>
			<TimelineItem>
				<TimelineSeparator>
					<TimelineTrack />
					<TimelineIcon className="text-red-500" />
				</TimelineSeparator>
				<TimelineContent>Iterate</TimelineContent>
			</TimelineItem>
		</Timeline>
	)
}

Variants

Outline

Validate
Build
Iterate

import {
	Timeline,
	TimelineItem,
	TimelineSeparator,
	TimelineIcon,
	TimelineTrack,
	TimelineContent,
} from '@nerdfish/ui'

export function TimelineVariantsExample() {
	return (
		<div className="gap-md flex flex-col">
			<h3 className="text-lg font-bold">Outline</h3>
			<Timeline variant="outline">
				<TimelineItem>
					<TimelineSeparator>
						<TimelineIcon className="text-brand" />
						<TimelineTrack />
					</TimelineSeparator>
					<TimelineContent>Validate</TimelineContent>
				</TimelineItem>
				<TimelineItem>
					<TimelineSeparator>
						<TimelineTrack />
						<TimelineIcon className="text-green-500" />
						<TimelineTrack />
					</TimelineSeparator>
					<TimelineContent>Build</TimelineContent>
				</TimelineItem>
				<TimelineItem>
					<TimelineSeparator>
						<TimelineTrack />
						<TimelineIcon className="text-red-500" />
					</TimelineSeparator>
					<TimelineContent>Iterate</TimelineContent>
				</TimelineItem>
			</Timeline>
		</div>
	)
}

Custom Icons

Validate
Build
Iterate

import {
	Timeline,
	TimelineItem,
	TimelineSeparator,
	TimelineTrack,
	TimelineContent,
} from '@nerdfish/ui'
import { cx } from '@nerdfish/utils'
import { Code, RefreshCw, UserCheck } from 'lucide-react'
import * as React from 'react'

function CustomIcon({
	icon: Icon,
	className,
}: {
	icon: React.ElementType
	className: string
}) {
	return (
		<div
			className={cx(
				'flex size-8 items-center justify-center rounded-full border-2 border-current',
				className,
			)}
		>
			<Icon className="size-4" />
		</div>
	)
}

export function TimelineCustomIconsExample() {
	return (
		<Timeline>
			<TimelineItem>
				<TimelineSeparator>
					<CustomIcon icon={UserCheck} className="text-brand" />
					<TimelineTrack />
				</TimelineSeparator>
				<TimelineContent>Validate</TimelineContent>
			</TimelineItem>
			<TimelineItem>
				<TimelineSeparator>
					<TimelineTrack />
					<CustomIcon icon={Code} className="text-green-500" />
					<TimelineTrack />
				</TimelineSeparator>
				<TimelineContent>Build</TimelineContent>
			</TimelineItem>
			<TimelineItem>
				<TimelineSeparator>
					<TimelineTrack />
					<CustomIcon icon={RefreshCw} className="text-red-500" />
				</TimelineSeparator>
				<TimelineContent>Iterate</TimelineContent>
			</TimelineItem>
		</Timeline>
	)
}