File size: 3,571 Bytes
c0e8080 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
typescript
import React from 'react'
import { CheckCircle, AlertTriangle, Info } from 'lucide-react'
interface ActivityItem {
id: string
type: 'success' | 'warning' | 'info'
title: string
description: string
timestamp: string
asset?: string
}
const ActivityTimeline: React.FC = () => {
const activities: ActivityItem[] = [
{
id: '1',
type: 'success',
title: 'Database server restored',
description: 'Backup restoration completed successfully',
timestamp: '2 hours ago',
asset: 'db-prod-01'
},
{
id: '2',
type: 'warning',
title: 'High memory usage detected',
description: 'Web server memory usage above 90% threshold',
timestamp: '4 hours ago',
asset: 'web-staging-02'
},
{
id: '3',
type: 'info',
title: 'New asset added',
description: 'Added new load balancer to inventory',
timestamp: '6 hours ago'
},
{
id: '4',
type: 'success',
title: 'Network switch configured',
description: 'VLAN configuration updated successfully',
timestamp: '1 day ago',
asset: 'switch-dc-03'
}
]
const getActivityIcon = (type: string) => {
switch (type) {
case 'success':
return <CheckCircle className="h-4 w-4 text-accent-500" />
case 'warning':
return <AlertTriangle className="h-4 w-4 text-alert-500" />
case 'info':
return <Info className="h-4 w-4 text-primary-500" />
default:
return <Info className="h-4 w-4 text-primary-500" />
}
}
const getActivityColor = (type: string) => {
switch (type) {
case 'success':
return 'border-accent-200'
case 'warning':
return 'border-alert-200'
case 'info':
return 'border-primary-200'
default:
return 'border-gray-200'
}
}
return (
<div className="flow-root">
<ul className="-mb-8">
{activities.map((activity, activityIdx) => (
<li key={activity.id}>
<div className="relative pb-8">
{activityIdx !== activities.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
${getActivityColor(activity.type)}
`}>
{getActivityIcon(activity.type)}
</span>
</div>
<div className="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
<div>
<p className="text-sm text-gray-900">{activity.title}</p>
<p className="text-sm text-gray-500">{activity.description}</p>
{activity.asset && (
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
{activity.asset}
</span>
)}
</div>
<div className="text-right text-sm whitespace-nowrap text-gray-500">
{activity.timestamp}
</div>
</div>
</div>
</div>
</li>
))}
</ul>
</div>
)
}
export default ActivityTimeline
</html> |