Activity feed

import { ActivityFeed, type ActivityFeedItem } from "@/components/blocks/activity-feed";

import { ActivityFeed } from "@/components/blocks/activity-feed";

const items = [
  {
    id: "1",
    user: { name: "Jordan Burke" },
    action: "uploaded 3 images to",
    target: "Easter Series",
    timestamp: new Date().toISOString(),
    type: "upload",
  },
];

export function Example() {
  return (
    <ActivityFeed
      items={items}
      groupBy="day"
      showRelativeTime
      showSearch
      showFilter
      filterTypes={["upload", "comment", "join", "complete"]}
    />
  );
}

ActivityFeed                              (main component)
├── title?                                (string | null — default "Activity Feed"; null hides header)
├── description?                          (string — default "Recent team activity and updates")
├── card?                                 (boolean — default true; false renders bare list)
├── variant?="activity" | "notifications" (default "activity"; "notifications" switches to notification-center layout)
├── showSearch?                           (boolean — show search input. Default false)
├── searchPlaceholder?                    (string — search input placeholder)
├── showFilter?                           (boolean — show type filter. Default false; requires filterTypes)
├── filterTypes?                          (ActivityType[] — options for the type filter)
├── onMarkAllAsRead?                      (notifications variant — renders a "Mark all as read" action when provided)
├── markAllAsReadLabel?                   (string — default "Mark all as read")
├── items                                 (ActivityFeedItem[])
│   ├── id                                (string — unique key)
│   ├── user                              (ActivityFeedUser)
│   │   ├── name                          (string — display name)
│   │   ├── initials?                     (string — fallback if no avatar)
│   │   └── avatar?                       (string — image URL)
│   ├── action                            (string — verb, e.g. "uploaded")
│   ├── target?                           (string — optional object, e.g. project name)
│   ├── timestamp                         (ISO string | Date)
│   ├── icon?                             (ReactNode — overrides avatar with a lucide icon)
│   └── type?                             (string — used by filterTypes)
├── groupBy="day" | "none"                (default: "day")
├── showRelativeTime                      (boolean, default: true — "2h ago" or absolute)
├── emptyState?                           (ReactNode — replaces the default Empty component)
└── className?                            (string)