64 lines
2.7 KiB
TypeScript
64 lines
2.7 KiB
TypeScript
import { Card, CardContent, CardDescription, CardHeader } from '@/components/ui/card';
|
|
import { useTranslation } from '@/hooks/useTranslation';
|
|
|
|
interface SectionHeaderProps {
|
|
title: string;
|
|
viewAllPath?: string;
|
|
}
|
|
|
|
function SectionHeader({ title, viewAllPath }: SectionHeaderProps) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-heading-3">{title}</h2>
|
|
{viewAllPath && (
|
|
<a
|
|
href={viewAllPath}
|
|
className="text-caption hover:text-foreground transition-colors"
|
|
>
|
|
{t('dashboard.viewAll')} →
|
|
</a>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function RecentActivityCard() {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Card className="md:col-span-2" variant="glass">
|
|
<CardHeader>
|
|
<SectionHeader title={t('dashboard.recentActivity')} viewAllPath="/library" />
|
|
<CardDescription>
|
|
{t('dashboard.recentActivityDescription')}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center space-x-4 p-3 rounded-lg hover:bg-muted/50 transition-colors duration-[var(--duration-fast)] border border-transparent hover:border-border">
|
|
<div className="w-2 h-2 bg-primary rounded-full shadow-status-dot-cyan animate-pulse" />
|
|
<div className="flex-1 space-y-1">
|
|
<p className="text-sm font-medium text-foreground">{t('dashboard.activity.newTrackAdded')}</p>
|
|
<p className="text-xs text-muted-foreground">2 hours ago</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-4 p-3 rounded-lg hover:bg-muted/50 transition-colors duration-[var(--duration-fast)] border border-transparent hover:border-border">
|
|
<div className="w-2 h-2 bg-success rounded-full shadow-status-dot-lime" />
|
|
<div className="flex-1 space-y-1">
|
|
<p className="text-sm font-medium text-foreground">{t('dashboard.activity.messageFrom', { user: 'alice' })}</p>
|
|
<p className="text-xs text-muted-foreground">4 hours ago</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-4 p-3 rounded-lg hover:bg-muted/50 transition-colors duration-[var(--duration-fast)] border border-transparent hover:border-border">
|
|
<div className="w-2 h-2 bg-destructive rounded-full shadow-status-dot-magenta" />
|
|
<div className="flex-1 space-y-1">
|
|
<p className="text-sm font-medium text-foreground">{t('dashboard.activity.newFavoriteAdded')}</p>
|
|
<p className="text-xs text-muted-foreground">6 hours ago</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|