Activity Feed

1import { formatDistanceToNow } from "date-fns";
2import { TokenIcon } from "@/registry/sol/token-icon";
3import { cn } from "@/lib/utils";
4 
5interface ActivityFeedProps {
6  items: {
7    icon?: string;
8    title: string;
9    description?: string;
10    timestamp: Date;
11    value?: string;
12  }[];
13  className?: string;
14}
15 
16const ActivityFeed = ({ items, className }: ActivityFeedProps) => {
17  if (items.length === 0) {
18    return (
19      <div className={cn("text-center py-8 text-muted-foreground", className)}>
20        No recent activity
21      </div>
22    );
23  }
24 
25  return (
26    <div className={cn("flex flex-col", className)}>
27      {items.map((item, i) => (
28        <div
29          key={`${item.title}-${i}`}
30          className={cn(
31            "flex items-center gap-3 py-3 px-1",
32            i < items.length - 1 && "border-b",
33          )}
34        >
35          {item.icon && (
36            <TokenIcon
37              src={item.icon}
38              alt={item.title}
39              width={32}
40              height={32}
41            />
42          )}
43          <div className="flex flex-col flex-1 min-w-0">
44            <span className="text-sm font-medium truncate">{item.title}</span>
45            {item.description && (
46              <span className="text-xs text-muted-foreground truncate">
47                {item.description}
48              </span>
49            )}
50          </div>
51          <div className="flex flex-col items-end shrink-0">
52            {item.value && (
53              <span className="text-sm font-medium">{item.value}</span>
54            )}
55            <span className="text-xs text-muted-foreground">
56              {formatDistanceToNow(item.timestamp, { addSuffix: true })}
57            </span>
58          </div>
59        </div>
60      ))}
61    </div>
62  );
63};
64 
65export type { ActivityFeedProps };
66export { ActivityFeed };