99 lines
4.7 KiB
TypeScript
99 lines
4.7 KiB
TypeScript
import React from "react";
|
|
import { Card, CardHeader, CardTitle, CardContent } from "./ui/card";
|
|
import { Badge } from "./ui/badge";
|
|
import { type RecentEvent } from "@shared/modules/dashboard/dashboard.types";
|
|
import { cn } from "../lib/utils";
|
|
import { Skeleton } from "./ui/skeleton";
|
|
|
|
function timeAgo(dateInput: Date | string) {
|
|
const date = new Date(dateInput);
|
|
const now = new Date();
|
|
const seconds = Math.floor((now.getTime() - date.getTime()) / 1000);
|
|
|
|
if (seconds < 60) return "just now";
|
|
const minutes = Math.floor(seconds / 60);
|
|
if (minutes < 60) return `${minutes}m ago`;
|
|
const hours = Math.floor(minutes / 60);
|
|
if (hours < 24) return `${hours}h ago`;
|
|
return date.toLocaleDateString();
|
|
}
|
|
|
|
interface RecentActivityProps {
|
|
events: RecentEvent[];
|
|
isLoading?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export function RecentActivity({ events, isLoading, className }: RecentActivityProps) {
|
|
return (
|
|
<Card className={cn("glass-card border-none bg-card/40 h-full", className)}>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="flex items-center justify-between text-lg font-medium">
|
|
<span className="flex items-center gap-2">
|
|
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
|
|
Live Activity
|
|
</span>
|
|
{!isLoading && events.length > 0 && (
|
|
<Badge variant="glass" className="text-[10px] font-mono">
|
|
{events.length} EVENTS
|
|
</Badge>
|
|
)}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isLoading ? (
|
|
<div className="space-y-4 pt-2">
|
|
{[1, 2, 3].map((i) => (
|
|
<div key={i} className="flex items-center gap-4">
|
|
<Skeleton className="h-10 w-10 rounded-lg" />
|
|
<div className="space-y-2 flex-1">
|
|
<Skeleton className="h-4 w-3/4" />
|
|
<Skeleton className="h-3 w-1/2" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : events.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground space-y-2">
|
|
<div className="text-4xl">😴</div>
|
|
<p>No recent activity</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3 max-h-[400px] overflow-y-auto pr-2 -mr-2 custom-scrollbar">
|
|
{events.map((event, i) => (
|
|
<div
|
|
key={i}
|
|
className="group flex items-start gap-3 p-3 rounded-xl bg-background/30 hover:bg-background/50 border border-transparent hover:border-border/50 transition-all duration-300"
|
|
>
|
|
<div className="text-2xl p-2 rounded-lg bg-background/50 group-hover:scale-110 transition-transform">
|
|
{event.icon || "📝"}
|
|
</div>
|
|
<div className="flex-1 min-w-0 py-1">
|
|
<p className="text-sm font-medium leading-none truncate mb-1.5 text-foreground/90">
|
|
{event.message}
|
|
</p>
|
|
<div className="flex items-center gap-2">
|
|
<Badge
|
|
variant={
|
|
event.type === 'error' ? 'destructive' :
|
|
event.type === 'warn' ? 'destructive' :
|
|
event.type === 'success' ? 'aurora' : 'secondary'
|
|
}
|
|
className="text-[10px] h-4 px-1.5"
|
|
>
|
|
{event.type}
|
|
</Badge>
|
|
<span className="text-[10px] text-muted-foreground font-mono">
|
|
{timeAgo(event.timestamp)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|