इनपुट और कीमैप

+जोड़ा गया: 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>+जोड़ा गया:   );+जोड़ा गया: }