32 lines
868 B
TypeScript
32 lines
868 B
TypeScript
import { detectFormat } from "@/utils/file-detector";
|
|
import { useTheme } from "@/context/ThemeContext";
|
|
import { useInputFocusNav } from "@/hooks/useInputFocusNav";
|
|
|
|
type FilePickerProps = {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
};
|
|
|
|
export function FilePicker(props: FilePickerProps) {
|
|
const { theme } = useTheme();
|
|
// Yield navigation keybinds to the Shell router while the input is focused.
|
|
const inputRef = useInputFocusNav();
|
|
const format = detectFormat(props.value);
|
|
|
|
return (
|
|
<box style={{ flexDirection: "column", gap: 1 }}>
|
|
<input
|
|
ref={inputRef}
|
|
value={props.value}
|
|
onInput={props.onChange}
|
|
placeholder="/path/to/sync-file.json"
|
|
style={{ width: 40 }}
|
|
textColor={theme.text}
|
|
focusedTextColor={theme.accent}
|
|
cursorColor={theme.accent}
|
|
/>
|
|
<text fg={theme.text}>Format: {format}</text>
|
|
</box>
|
|
);
|
|
}
|