| 1 | import type { PullRequestRef, PullRequestStack } from "@t3tools/contracts"; |
| 2 | import { CheckIcon } from "lucide-react"; |
| 3 | import { MenuItem, MenuGroupLabel } from "../ui/menu"; |
| 4 | import { PullRequestStackLayerContent } from "./PullRequestStackLayerContent"; |
| 5 | |
| 6 | export function PullRequestStackLayers({ |
| 7 | stack, |
| 8 | reference, |
| 9 | onSelect, |
| 10 | pending = false, |
| 11 | }: { |
| 12 | stack: PullRequestStack; |
| 13 | reference: PullRequestRef; |
| 14 | onSelect?: ((reference: PullRequestRef) => void) | undefined; |
| 15 | pending?: boolean; |
| 16 | }) { |
| 17 | return ( |
| 18 | <div className="max-h-80 overflow-y-auto"> |
| 19 | {stack.layers.toReversed().map((layer) => { |
| 20 | return ( |
| 21 | <MenuItem |
| 22 | key={layer.number} |
| 23 | onClick={() => { |
| 24 | onSelect?.({ ...reference, number: layer.number }); |
| 25 | }} |
| 26 | disabled={!onSelect || pending} |
| 27 | aria-current={layer.number === reference.number ? "true" : undefined} |
| 28 | > |
| 29 | <PullRequestStackLayerContent layer={layer} /> |
| 30 | {layer.number === reference.number ? ( |
| 31 | <CheckIcon aria-hidden className="size-3.5" /> |
| 32 | ) : null} |
| 33 | </MenuItem> |
| 34 | ); |
| 35 | })} |
| 36 | <MenuGroupLabel>↳ {stack.base}</MenuGroupLabel> |
| 37 | </div> |
| 38 | ); |
| 39 | } |