الإدخال وخرائط المفاتيح

+المضاف: 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>+المضاف:   );+المضاف: }