@dugongjs/cli/studio/panes/sidebar.js

import { Box, Spacer, Text } from "ink";
import SelectInput from "ink-select-input";
import React from "react";
import { HotkeyIndicator } from "../components/hotkey-indicator.js";
export const SIDEBAR_WIDTH = 30;
export const Sidebar = (props) => {
    const { isFocused, isLoading, error, types, selectedType, setSelectedType } = props;
    const items = types.map((type) => ({ label: type, value: type }));
    return (React.createElement(Box, { width: SIDEBAR_WIDTH, height: "100%", flexDirection: "column", borderStyle: "single", borderColor: isFocused ? "cyan" : "gray" },
        React.createElement(Box, { flexDirection: "column", width: "100%" }, isLoading ? (React.createElement(Text, { color: "gray" }, "Loading types\u2026")) : error ? (React.createElement(Text, { color: "red" }, error)) : items.length === 0 ? (React.createElement(Text, { color: "gray" }, "No types")) : (React.createElement(SelectInput, { items: items, onSelect: (item) => setSelectedType(item.value), initialIndex: selectedType ? types.indexOf(selectedType) : 0, isFocused: isFocused }))),
        React.createElement(Spacer, null),
        React.createElement(Box, { flexDirection: "column", width: 15 },
            React.createElement(HotkeyIndicator, { hotkey: "\u2191/\u2193", label: "navigate" }),
            React.createElement(HotkeyIndicator, { hotkey: "\u21B5", label: "select" }))));
};