Input

import { useKeybindings, useFocus } from 'giggles';
import { useState } from 'react';
import { Box, Text } from 'ink';

function FileList() {
  const focus = useFocus();
  const [selected, setSelected] = useState(0);
  const files = ['file1.ts', 'file2.ts', 'file3.ts'];

  useKeybindings(focus, {
    j: () => setSelected((i) => Math.min(files.length - 1, i + 1)),
    k: () => setSelected((i) => Math.max(0, i - 1)),
  });

  return (
    <Box flexDirection="column">
      {files.map((file, i) => (
        <Text key={file} color={i === selected ? 'green' : 'white'}>
          {i === selected ? '> ' : '  '}
          {file}
        </Text>
      ))}
    </Box>
  );
}

function useKeybindings(
  focus: { id: string },
  bindings: Keybindings,
  options?: KeybindingOptions
): void

type KeyHandler = (input: string, key: Key) => void

function App() {
  const [showModal, setShowModal] = useState(false);

  return (
    <>
      <MainContent />
      {showModal && (
        <FocusTrap>
          <Modal onClose={() => setShowModal(false)} />
        </FocusTrap>
      )}
    </>
  );
}