lazycrypto-cli
Version:
A simple CLI app to view cryptocurrency indicators
66 lines • 2.25 kB
JavaScript
import React, { useState, useEffect } from "react";
import { Box, Text, useInput } from "ink";
const TimeframeSelector = ({
currentTimeframe,
onSelect,
onCancel
}) => {
const timeframes = [{
value: "15min",
label: "15 minutes"
}, {
value: "30min",
label: "30 minutes"
}, {
value: "1hour",
label: "1 hour"
}, {
value: "4hour",
label: "4 hours"
}];
const [selectedIndex, setSelectedIndex] = useState(() => {
const index = timeframes.findIndex(tf => tf.value === currentTimeframe);
return index >= 0 ? index : 2;
});
useInput((input, key) => {
if (key.upArrow || input === 'k') {
setSelectedIndex(prev => prev > 0 ? prev - 1 : timeframes.length - 1);
} else if (key.downArrow || input === 'j') {
setSelectedIndex(prev => prev < timeframes.length - 1 ? prev + 1 : 0);
} else if (key.return) {
onSelect(timeframes[selectedIndex].value);
} else if (key.escape || input.toLowerCase() === 'q') {
onCancel();
}
});
return /*#__PURE__*/React.createElement(Box, {
flexDirection: "column",
padding: 1,
borderStyle: "round",
borderColor: "cyan"
}, /*#__PURE__*/React.createElement(Box, {
marginBottom: 1
}, /*#__PURE__*/React.createElement(Text, {
color: "cyan",
bold: true
}, "\u23F1\uFE0F Select Timeframe")), /*#__PURE__*/React.createElement(Box, {
flexDirection: "column",
marginBottom: 1
}, timeframes.map((timeframe, index) => /*#__PURE__*/React.createElement(Box, {
key: timeframe.value,
marginBottom: 0
}, /*#__PURE__*/React.createElement(Text, {
color: selectedIndex === index ? "black" : "white",
backgroundColor: selectedIndex === index ? "cyan" : undefined
}, selectedIndex === index ? "► " : " ", timeframe.value, currentTimeframe === timeframe.value ? " (current)" : "")))), /*#__PURE__*/React.createElement(Box, {
flexDirection: "column",
marginTop: 1,
borderStyle: "single",
padding: 1
}, /*#__PURE__*/React.createElement(Text, {
dimColor: true
}, "Navigation:"), /*#__PURE__*/React.createElement(Text, {
dimColor: true
}, "\u2191/\u2193 or j/k: Navigate \u2022 Enter: Select \u2022 Esc/q: Cancel")));
};
export default TimeframeSelector;