@remotion/studio
Version:
APIs for interacting with the Remotion Studio
70 lines (69 loc) • 3.11 kB
JavaScript
"use strict";
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 layout_1 = require("../layout");
const MenuDivider_1 = require("../Menu/MenuDivider");
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 (jsx_runtime_1.jsxs("div", { style: container, className: "__remotion-info-button-container", children: [
jsx_runtime_1.jsxs("div", { style: padding, children: [
jsx_runtime_1.jsxs("div", { children: [
jsx_runtime_1.jsx("strong", { style: title, children: option.name }), option.docLink ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("a", { style: link, href: option.docLink, target: "_blank", children: "Docs" })
] })) : null] }), jsx_runtime_1.jsx("div", { style: description, children: option.description('ssr') })
] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5, block: true }), jsx_runtime_1.jsx(MenuDivider_1.MenuDivider, {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5, block: true }), jsx_runtime_1.jsxs("div", { children: [
jsx_runtime_1.jsxs("div", { style: infoRow, children: [
jsx_runtime_1.jsx("div", { style: infoRowLabel, children: "CLI flag" }), jsx_runtime_1.jsx("div", { style: flexSpacer }), jsx_runtime_1.jsxs("code", { children: ["--", option.cliFlag] }), jsx_runtime_1.jsx("div", { style: copyWrapper, children: jsx_runtime_1.jsx(CliCopyButton_1.CliCopyButton, { valueToCopy: option.cliFlag }) })
] }), option.ssrName ? (jsx_runtime_1.jsxs("div", { style: infoRow, children: [
jsx_runtime_1.jsx("div", { style: infoRowLabel, children: "Node.JS option" }), jsx_runtime_1.jsx("div", { style: flexSpacer }), jsx_runtime_1.jsx("code", { children: option.ssrName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 3.75 })
] })) : null, jsx_runtime_1.jsx("div", { style: infoRow })
] })
] }));
};
exports.OptionExplainer = OptionExplainer;