beam-cli
Version:
A beautifully simple CLI for running Lighthouse audits on a statically generated (SSG) website
24 lines (23 loc) • 1.42 kB
JavaScript
import React from 'react';
import { Box, Spacer, Text } from 'ink';
const keys = [
{ key: 'h', action: 'Show / hide this help.' },
{ key: 'tab', action: 'Change tab.' },
{ key: 'up / down', action: 'Change item highlighted / selected.' },
{ key: 'enter', action: 'Open report in browser.' },
// { key: 'right', action: 'Show detailed information.' },
{ key: '- / +', action: 'Change sort order (ascending / descending).' },
{ key: 's', action: 'Change sort category.' },
{ key: '[ / ]', action: 'Previous / next sort category.' },
];
export const HelpBox = () => {
const longestKey = Math.max(...keys.map(k => k.key.length));
return (React.createElement(Box, { flexDirection: 'column' },
React.createElement(Text, { bold: true, underline: true, color: 'white' }, "Keyboard Shortcuts"),
React.createElement(Box, { flexDirection: 'row' },
React.createElement(Box, { borderColor: 'white', borderStyle: 'round', padding: 1, flexDirection: 'column', flexGrow: 0 }, keys.map(shortcut => (React.createElement(Box, { key: shortcut.key, flexDirection: 'row' },
React.createElement(Box, { width: longestKey, marginLeft: 1, marginRight: 4 },
React.createElement(Text, { color: 'cyan' }, shortcut.key)),
React.createElement(Text, null, shortcut.action))))),
React.createElement(Spacer, null))));
};