64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
|
|
export interface TimelineEvent {
|
|
id: string;
|
|
title: string;
|
|
description?: string;
|
|
timestamp: Date;
|
|
type?: 'success' | 'error' | 'warning' | 'info';
|
|
}
|
|
|
|
export interface TimelineProps {
|
|
events: TimelineEvent[];
|
|
}
|
|
|
|
export const Timeline: React.FC<TimelineProps> = ({ events }) => {
|
|
const typeColors = {
|
|
success: 'bg-green-500',
|
|
error: 'bg-red-500',
|
|
warning: 'bg-yellow-500',
|
|
info: 'bg-blue-500'
|
|
};
|
|
|
|
return (
|
|
<div className="flow-root">
|
|
<ul className="-mb-8">
|
|
{events.map((event, index) => (
|
|
<li key={event.id}>
|
|
<div className="relative pb-8">
|
|
{index !== events.length - 1 && (
|
|
<span
|
|
className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
|
|
aria-hidden="true"
|
|
/>
|
|
)}
|
|
<div className="relative flex space-x-3">
|
|
<div>
|
|
<span
|
|
className={`h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white ${
|
|
typeColors[event.type || 'info']
|
|
}`}
|
|
>
|
|
<span className="text-white text-sm">•</span>
|
|
</span>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-900">{event.title}</p>
|
|
<p className="text-xs text-gray-500">
|
|
{event.timestamp.toLocaleString()}
|
|
</p>
|
|
</div>
|
|
{event.description && (
|
|
<p className="mt-1 text-sm text-gray-600">{event.description}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
};
|