@frontify/fondue
Version:
Design system of Frontify
84 lines (83 loc) • 2.58 kB
JavaScript
import { jsxs as r, jsx as e } from "react/jsx-runtime";
import { Button as i } from "../../../../../Button/Button.es.js";
import w from "../../../../../../foundation/Icon/Generated/IconCheckMark20.es.js";
import { FormControl as n } from "../../../../../FormControl/FormControl.es.js";
import { Checkbox as f } from "../../../../../Checkbox/Checkbox.es.js";
import { FloatingModalWrapper as b } from "../../../../components/FloatingModal/FloatingModal.es.js";
import { TextInput as o } from "../../../../../TextInput/TextInput.es.js";
import { ButtonEmphasis as v, ButtonStyle as k, ButtonSize as a } from "../../../../../Button/ButtonTypes.es.js";
const z = ({
state: t,
onTextChange: d,
onUrlChange: m,
onToggleTab: c,
onCancel: s,
onSave: h,
isValidUrlOrEmpty: l,
hasValues: p,
testId: u,
children: x
}) => /* @__PURE__ */ r(b, { "data-test-id": u, minWidth: "400px", padding: "28px", children: [
/* @__PURE__ */ e(
n,
{
label: {
children: "Text",
htmlFor: "linkText",
required: !0
},
children: /* @__PURE__ */ e(o, { id: "linkText", value: t.text, placeholder: "Link Text", onChange: d })
}
),
x,
/* @__PURE__ */ r("div", { className: "tw-pt-5", children: [
/* @__PURE__ */ e(
n,
{
label: {
children: "URL",
htmlFor: "url",
required: !0
},
children: /* @__PURE__ */ e(
o,
{
id: "url",
value: t.url,
placeholder: "https://example.com",
focusOnMount: !0,
onChange: m
}
)
}
),
!l() && /* @__PURE__ */ e("div", { className: "tw-text-red-65 tw-mt-3", children: "Please enter a valid URL." })
] }),
/* @__PURE__ */ e("div", { className: "tw-pt-5", children: /* @__PURE__ */ e(f, { value: "new-tab", label: "Open in new tab", state: t.newTab, onChange: c }) }),
/* @__PURE__ */ e("div", { className: "tw-mt-3", children: /* @__PURE__ */ r("div", { className: "tw-pt-5 tw-flex tw-gap-x-3 tw-justify-end tw-border-t tw-border-t-black-10", children: [
/* @__PURE__ */ e(
i,
{
onClick: s,
size: a.Medium,
style: k.Default,
emphasis: v.Default,
children: "Cancel"
}
),
/* @__PURE__ */ e(
i,
{
onClick: h,
size: a.Medium,
icon: /* @__PURE__ */ e(w, {}),
disabled: !l() || !p,
children: "Save"
}
)
] }) })
] });
export {
z as InsertModal
};
//# sourceMappingURL=InsertModal.es.js.map