42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { Card } from '@/components/ui/Card';
|
||
|
|
import { Avatar } from '@/components/ui/Avatar';
|
||
|
|
|
||
|
|
export interface ActivityItem {
|
||
|
|
id: string;
|
||
|
|
user: string;
|
||
|
|
action: string;
|
||
|
|
time: string;
|
||
|
|
avatarUrl?: string | null;
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface ActivityFeedProps {
|
||
|
|
activities: ActivityItem[];
|
||
|
|
title?: string;
|
||
|
|
maxItems?: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ActivityFeed({ activities, title = 'Letzte Aktivitäten', maxItems = 10 }: ActivityFeedProps) {
|
||
|
|
const visible = activities.slice(0, maxItems);
|
||
|
|
return (
|
||
|
|
<Card title={title} data-testid="activity-feed">
|
||
|
|
{visible.length === 0 ? (
|
||
|
|
<p className="text-sm text-secondary-500 py-4 text-center">Keine Aktivitäten vorhanden.</p>
|
||
|
|
) : (
|
||
|
|
<ul className="space-y-3" role="list">
|
||
|
|
{visible.map((activity) => (
|
||
|
|
<li key={activity.id} className="flex items-start gap-3 text-sm">
|
||
|
|
<Avatar name={activity.user} src={activity.avatarUrl} size="sm" />
|
||
|
|
<div className="flex-1 min-w-0">
|
||
|
|
<span className="font-medium text-secondary-900">{activity.user}</span>
|
||
|
|
<span className="text-secondary-600"> {activity.action}</span>
|
||
|
|
<span className="text-secondary-400 block mt-0.5">{activity.time}</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
)}
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
}
|