import { Link } from '#/components/atoms/link.jsx';
import { cn } from '#/lib/utils.js';
/**
* One entry in a list of things that carry a state: a pull request, an issue.
*
* Both lists ask a reader the same three questions in the same order, so both
* are drawn here rather than each keeping its own sizes. The mark at the head
* is the state, because that is the question before the words are. The title
* is what a reader scans a column for. The line under it is who proposes
* what, read once a title has caught the eye.
*
* `marks` holds the right of the title line, which is what has been said
* about the entry. `footer` is what one entry has and the others do not, and
* needs the width the title has rather than the width left beside it.
*/
export function ListRow({
Icon,
iconClassName,
title,
href,
marks,
footer,
children,
}) {
return (
{title}
{marks && (
{marks}
)}
{children}
{footer}
);
}
/** What separates two facts on the line under a title. */
export function Dot() {
return ยท;
}
/**
* One count on the right of a title, with the icon that says what was
* counted. Nothing is drawn for a count of none.
* @param {{Icon: Function, count: number, className?: string, title?: string}} props
*/
export function ListCount({ Icon, count, className, title }) {
if (!count) return null;
return (
{count}
);
}