Spaces:
No application file
No application file
File size: 2,207 Bytes
b4e31eb |
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 |
import React from 'react';
interface LogEntry {
id: string;
message: string;
type: 'success' | 'warning' | 'error' | 'info';
timestamp: Date;
}
interface ActivityLogProps {
entries: LogEntry[];
}
const ActivityLog: React.FC<ActivityLogProps> = ({ entries }) => {
const getLogColor = (type: LogEntry['type']) => {
switch (type) {
case 'success': return 'bg-green-100 text-green-800 border-green-200';
case 'warning': return 'bg-yellow-100 text-yellow-800 border-yellow-200';
case 'error': return 'bg-red-100 text-red-800 border-red-200';
case 'info': return 'bg-blue-100 text-blue-800 border-blue-200';
default: return 'bg-gray-100 text-gray-800 border-gray-200';
}
};
const getLogIcon = (type: LogEntry['type']) => {
switch (type) {
case 'success': return '✅';
case 'warning': return '⚠️';
case 'error': return '❌';
case 'info': return 'ℹ️';
default: return '📝';
}
};
return (
<div className="bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg">
<h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
📋 Recent Activity
</h3>
<div className="space-y-3 max-h-64 overflow-y-auto">
{entries.length === 0 ? (
<div className="text-gray-500 text-center py-8 italic">
No recent activity... Your pet is waiting! 🐾
</div>
) : (
entries.map((entry) => (
<div
key={entry.id}
className={`p-3 rounded-lg border transition-all duration-200 hover:scale-[1.02] ${getLogColor(entry.type)}`}
>
<div className="flex items-start gap-2">
<span className="text-sm">{getLogIcon(entry.type)}</span>
<div className="flex-1">
<p className="text-sm font-medium">{entry.message}</p>
<p className="text-xs opacity-70 mt-1">
{entry.timestamp.toLocaleTimeString()}
</p>
</div>
</div>
</div>
))
)}
</div>
</div>
);
};
export default ActivityLog;
|