Feeds

Vertical activity timelines: icons-in-a-line, multiple item types, and a commenting variant.

Preview

Applied to Front End Developer

Sep 20
Advanced to phone screening by Bethany Blake

Sep 22
Completed phone screening with Martha Gardner

Sep 28

Eduardo Benz

Commented 6d ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tincidunt nunc ipsum tempor purus vitae id.
Hilary Mahy assigned Kristin Watson 2d ago
Hilary Mahy added tags Bug Accessibility 6h ago

Chelsea Hagon created the invoice.
7d ago
Chelsea Hagon edited the invoice.
6d ago
Chelsea Hagon commented
3d ago

Called client, they reassured me the invoice would be paid by the 25th.
Alex Curren paid the invoice.
1d ago

React preview

LiveView (HEEx)

alias DesignSystem.UI.Feeds

<Feeds.feed items={[
  %{id: 1, type: :icon, icon: "hero-user-mini", icon_bg: "gray",
    content: "Applied to", target: "Front End Developer",
    href: "#", date: "Sep 20", datetime: "2020-09-20"},
  %{id: 2, type: :icon, icon: "hero-check-mini", icon_bg: "green",
    content: "Completed phone screening with", target: "Martha Gardner",
    href: "#", date: "Sep 28", datetime: "2020-09-28"}
]} />

<Feeds.comment_feed items={[
  %{id: 1, type: :created, person: %{name: "Chelsea Hagon"},
    date: "7d ago", datetime: "2023-01-23T10:32"},
  %{id: 2, type: :commented,
    person: %{name: "Chelsea Hagon", image_url: "/avatar.jpg"},
    comment: "Called client...",
    date: "3d ago", datetime: "2023-01-23T15:56"},
  %{id: 3, type: :paid, person: %{name: "Alex Curren"},
    date: "1d ago", datetime: "2023-01-24T09:20"}
]} />

React (JSX)

import { Feed, CommentFeed } from "../ui/index.mjs"
import { CheckIcon, UserIcon } from "@heroicons/react/20/solid"

<Feed
  items={[
    { id: 1, type: "icon", icon: UserIcon, iconBg: "gray",
      content: "Applied to", target: "Front End Developer",
      href: "#", date: "Sep 20", datetime: "2020-09-20" },
    { id: 2, type: "icon", icon: CheckIcon, iconBg: "green",
      content: "Completed phone screening with", target: "Martha Gardner",
      href: "#", date: "Sep 28", datetime: "2020-09-28" },
  ]}
/>

<CommentFeed
  items={[
    { id: 1, type: "created", person: { name: "Chelsea Hagon" },
      date: "7d ago", dateTime: "2023-01-23T10:32" },
    { id: 2, type: "commented",
      person: { name: "Chelsea Hagon", imageUrl: "/avatar.jpg" },
      comment: "Called client...",
      date: "3d ago", dateTime: "2023-01-23T15:56" },
    { id: 3, type: "paid", person: { name: "Alex Curren" },
      date: "1d ago", dateTime: "2023-01-24T09:20" },
  ]}
/>