| 1 | import { ArrowUp } from "lucide-react"; |
| 2 | |
| 3 | import { Button } from "./ui/button"; |
| 4 | |
| 5 | /** |
| 6 | * "3 new commits · Show": what arrived while the reader was on the page, |
| 7 | * held back so the list does not move under them (lib/use-repo-live.ts, |
| 8 | * `hold`). Nothing when nothing is held. `count` null: arrived, uncounted. |
| 9 | */ |
| 10 | export function NewItemsBar({ held, count, noun, onShow }: { held: boolean; count: number | null; noun: [string, string]; onShow: () => void }) { |
| 11 | if (!held) return null; |
| 12 | const label = count == null || count < 1 ? `New ${noun[1]}` : `${count} new ${count === 1 ? noun[0] : noun[1]}`; |
| 13 | return ( |
| 14 | <div role="status" className="mb-3 flex justify-center"> |
| 15 | <Button variant="soft" size="xs" onClick={onShow} className="rounded-full px-3"> |
| 16 | <ArrowUp size={12} aria-hidden /> |
| 17 | {label} |
| 18 | <span aria-hidden className="text-faint"> |
| 19 | · |
| 20 | </span> |
| 21 | Show |
| 22 | </Button> |
| 23 | </div> |
| 24 | ); |
| 25 | } |