ActivityFeed

import { ActivityFeedItem, Avatar, Button } from "@nili/ui"

export function Example() {
  return (
    <>
      <ActivityFeedItem
        type="basic"
        avatar={<Avatar size="sm" name="Ada Lovelace" tone="blue" />}
        title="Ada Lovelace commented"
        timestamp="8 min ago"
        subject="Design system"
        description="This looks good to me — shipping it."
      />

      <ActivityFeedItem
        type="button"
        avatar={<Avatar size="sm" name="Grace Hopper" tone="purple" />}
        title="Grace Hopper wants to join"
        timestamp="1 h ago"
        actions={
          <>
            <Button size="xs">Accept</Button>
            <Button size="xs" appearance="stroke">Decline</Button>
          </>
        }
      />

      <ActivityFeedItem
        type="file"
        title="Katherine shared a file"
        file={{ name: "annual-report.pdf", size: "4mb", href: "#" }}
      />

      <ActivityFeedItem
        type="message"
        title="Radia replied"
        message="Can we move the review to Thursday?"
      />
    </>
  )
}

import { ActivityFeedItem } from "@nili/ui"

export function Example() {
  return (
    <>
      <ActivityFeedItem
        unread
        onSelect={() => open(notification)}
        title="Ada Lovelace mentioned you"
        timestamp="8 min ago"
        badge={<Badge size="small" color="blue" appearance="lighter">New</Badge>}
      />
      <ActivityFeedItem
        onSelect={() => open(notification)}
        title="Already read"
        timestamp="2 days ago"
      />
    </>
  )
}

import {
  ActivityFeed, ActivityFeedItem, ActivityFeedTab,
  ActivityFeedTabSeparator, ActivityFeedFooter, LinkButton,
} from "@nili/ui"

export function Example() {
  const [tab, setTab] = useState("all")

  return (
    <ActivityFeed
      label="Notifications"
      title="Notifications"
      headerAction={<LinkButton color="primary" size="sm">Mark all as read</LinkButton>}
      tabs={
        <>
          <ActivityFeedTab selected={tab === "all"} onClick={() => setTab("all")}>
            All
          </ActivityFeedTab>
          <ActivityFeedTab
            selected={tab === "unread"}
            onClick={() => setTab("unread")}
            count={3}
          >
            Unread
          </ActivityFeedTab>
          <ActivityFeedTabSeparator />
          <ActivityFeedTab selected={tab === "mentions"} onClick={() => setTab("mentions")}>
            Mentions
          </ActivityFeedTab>
        </>
      }
      footer={
        <ActivityFeedFooter
          hint={<><ActivityFeedKey>↑</ActivityFeedKey><ActivityFeedKey>↓</ActivityFeedKey> to navigate</>}
          action={<LinkButton href="#" size="sm">See all activity</LinkButton>}
        />
      }
    >
      …
    </ActivityFeed>
  )
}