@remotion/studio
Version:
APIs for interacting with the Remotion Studio
57 lines (56 loc) • 2.92 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.OptionExplainer = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const colors_1 = require("../../helpers/colors");
const MenuDivider_1 = require("../Menu/MenuDivider");
const layout_1 = require("../layout");
const CliCopyButton_1 = require("./CliCopyButton");
const container = {
fontSize: 14,
paddingTop: 10,
paddingBottom: 10,
backgroundColor: colors_1.INPUT_BACKGROUND,
};
const padding = {
paddingLeft: 20,
paddingRight: 20,
};
const title = {
fontSize: 14,
};
const description = {
fontSize: 14,
maxWidth: 400,
};
const link = {
fontSize: 14,
maxWidth: 200,
color: '#0b84f3',
wordWrap: 'break-word',
textDecoration: 'none',
};
const infoRow = {
...padding,
fontSize: 14,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
};
const infoRowLabel = {
width: 150,
fontSize: 14,
color: 'white',
};
const flexSpacer = {
display: 'flex',
flex: 1,
};
const copyWrapper = {
display: 'flex',
justifyContent: 'flex-end',
};
const OptionExplainer = ({ option }) => {
return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "__remotion-info-button-container", children: [(0, jsx_runtime_1.jsxs)("div", { style: padding, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { style: title, children: option.name }), option.docLink ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("a", { style: link, href: option.docLink, target: "_blank", children: "Docs" })] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: description, children: option.description('ssr') })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5, block: true }), (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5, block: true }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: infoRow, children: [(0, jsx_runtime_1.jsx)("div", { style: infoRowLabel, children: "CLI flag" }), (0, jsx_runtime_1.jsx)("div", { style: flexSpacer }), (0, jsx_runtime_1.jsxs)("code", { children: ["--", option.cliFlag] }), (0, jsx_runtime_1.jsx)("div", { style: copyWrapper, children: (0, jsx_runtime_1.jsx)(CliCopyButton_1.CliCopyButton, { valueToCopy: option.cliFlag }) })] }), option.ssrName ? ((0, jsx_runtime_1.jsxs)("div", { style: infoRow, children: [(0, jsx_runtime_1.jsx)("div", { style: infoRowLabel, children: "Node.JS option" }), (0, jsx_runtime_1.jsx)("div", { style: flexSpacer }), (0, jsx_runtime_1.jsx)("code", { children: option.ssrName }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 3.75 })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: infoRow })] })] }));
};
exports.OptionExplainer = OptionExplainer;