FeedItem

tcmts.registry.pages.FeedItem · #jqd7mt5i · term · runs anywhere

A release in the feed: who released what, and a card with how it changed, where it runs and what it reaches.

import type { Trusted } from "#codebase/tcmts/cli/attest";
import { changesHref, libraryHref, said, whoHref } from "#codebase/tcmts/registry";
import type { RegistryRelease } from "#codebase/tcmts/registry";
import { Initial, Level, PlaceBar, placesText, Reaches } from "#codebase/tcmts/registry/pages";
import { ago } from "#codebase/tcmts/share";

export function FeedItem({ r, who }: { r: RegistryRelease; who: Trusted }) {
  return (
    <div className="ev">
      <Initial who={who} />
      <div>
        <div>
          <a href={whoHref(who)}>
            <b>{said(who)}</b>
          </a>{" "}
          released{" "}
          <a className="mono" href={libraryHref(who, r.package, r.version)}>
            {r.package} {r.version}
          </a>{" "}
          <span className="when">· {ago(Date.parse(r.createdAt))}</span>
        </div>
        <div className="card">
          <div className="top">
            <Level level={r.facts?.level} />
            <span>{r.facts?.change ?? (r.facts?.after === undefined ? "first release" : "")}</span>
            {r.facts?.after && (
              <a className="right" href={changesHref(who, r.package, r.facts.after, r.version)}>
                what changed
              </a>
            )}
          </div>
          {r.facts && (
            <div className="eff">
              <PlaceBar places={r.facts.places} thin />
              <span>{placesText(r)}</span>
              <span>
                · <Reaches facts={r.facts} />
              </span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

uses

used by