קלט ומפות מקשים

+נוסף: import { useState } from "react";+נוסף: import { Box, KeyHelp, Text, useKeymap } from "@textjs/app";+נוסף: import { DEPLOYMENTS } from "../../lib/deployments";+נוסף: +נוסף: export default function DeploymentsPage() {+נוסף:   const [index, setIndex] = useState(0);+נוסף:   const [open, setOpen] = useState(false);+נוסף:   const move = (by: number) => setIndex((i) => Math.max(0, Math.min(DEPLOYMENTS.length - 1, i + by)));+נוסף: +נוסף:   useKeymap({+נוסף:     "up, k": { label: "Previous deployment", run: () => move(-1) },+נוסף:     "down, j": { label: "Next deployment", run: () => move(1) },+נוסף:     enter: { label: "Toggle details", run: () => setOpen((o) => !o) },+נוסף:     "g g": { label: "First deployment", run: () => setIndex(0) },+נוסף:   });+נוסף: +נוסף:   return (+נוסף:     <Box className="flex-row grow p-1 gap-2">+נוסף:       <Box className="flex-col grow">+נוסף:         {DEPLOYMENTS.map((d, i) => (+נוסף:           <Box key={d.id} className="flex-row h-1 gap-2 px-1" backgroundColor={i === index ? "selection" : undefined}>+נוסף:             <Text>{i === index ? "›" : " "}</Text>+נוסף:             <Text bold={i === index} wrap="truncate-end">{d.commit}</Text>+נוסף:           </Box>+נוסף:         ))}+נוסף:       </Box>+נוסף:       {open && <Details deployment={DEPLOYMENTS[index]} />}+נוסף:       <KeyHelp />+נוסף:     </Box>+נוסף:   );+נוסף: }