nice-ui/lib/5-block/CommandPalette/args/CommandArg.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CommandArg = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const Split_1 = require("../../../3-list-item/Split");
const CommandPaletteTitle_1 = require("../CommandPaletteList/CommandPaletteTitle");
const blockClass = (0, nano_theme_1.rule)({
    pad: '12px 0',
});
const contentClass = (0, nano_theme_1.rule)({
    ...nano_theme_1.theme.font.ui1.mid,
    pad: '8px 0',
    fz: '14px',
});
const labelClass = (0, nano_theme_1.rule)({
    d: 'flex',
    alignItems: 'center',
    pad: '0 20px 0 0',
});
const CommandArg = ({ title, right, active, children, onClick }) => {
    return (React.createElement("div", { className: blockClass, onClick: onClick },
        React.createElement("div", null,
            !!title && (React.createElement(Split_1.Split, { style: { userSelect: 'none' } },
                React.createElement(CommandPaletteTitle_1.CommandPaletteTitle, { contrast: active }, title),
                React.createElement("div", { className: labelClass }, right))),
            active && React.createElement("div", { className: contentClass }, children))));
};
exports.CommandArg = CommandArg;