ان پٹ اور کی میپس

+شامل کردہ: 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>+شامل کردہ:   );+شامل کردہ: }