Activity feed

import * as React from "react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

type ActivityFeedProps = React.ComponentProps<"ul">;

/** Who did what, newest first. Compose with ActivityItem. */
export function ActivityFeed({ className, ...props }: ActivityFeedProps) {
  return <ul className={cn("m-0 flex list-none flex-col gap-4 p-0", className)} {...props} />;
}

type ActivityItemProps = React.ComponentProps<"li"> & {
  /** Who did it. The initials are taken from this. */
  actor: string;
  /** What they did, for example "merged". */
  action: string;
  /** What it was done to, shown in the foreground tone. */
  target: string;
  /** Machine-readable time, for example 2026-11-05T09:30:00Z. */
  dateTime: string;
  /** The time as people read it, for example "2 hours ago". */
  time: string;
};

function initials(name: string) {
  return name
    .split(/\s+/)
    .slice(0, 2)
    .map((part) => Array.from(part)[0]?.toUpperCase() ?? "")
    .join("");
}

export function ActivityItem({ actor, action, target, dateTime, time, className, ...props }: ActivityItemProps) {
  return (
    <li className={cn("flex items-start gap-3", className)} {...props}>
      <Avatar size="sm">
        <AvatarFallback aria-hidden="true">{initials(actor)}</AvatarFallback>
      </Avatar>
      <div className="flex min-w-0 flex-col gap-0.5">
        <p className="m-0 text-sm text-muted-foreground">
          <span className="text-foreground">{actor}</span> {action} <span className="text-foreground">{target}</span>
        </p>
        <time dateTime={dateTime} className="font-mono text-xs text-muted-foreground">
          {time}
        </time>
      </div>
    </li>
  );
}