@medalsocial/meda
Version:
Shared Meda UI shell and runtime package.
11 lines (10 loc) • 2.09 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { AlignmentToggle, ColorInput, Field, NumberInput, SelectInput, SpacingEditor, TextInput, } from './_shared.js';
export function ButtonPropertyEditor({ value, onChange }) {
return (_jsxs("div", { "data-slot": "email-builder-property-button", className: "flex flex-col gap-3", children: [_jsx(Field, { label: "Text", htmlFor: "btn-text", children: _jsx(TextInput, { id: "btn-text", value: value.text, onChange: (text) => onChange({ text }) }) }), _jsx(Field, { label: "URL", htmlFor: "btn-url", children: _jsx(TextInput, { id: "btn-url", value: value.url, onChange: (url) => onChange({ url }) }) }), _jsx(Field, { label: "Background color", children: _jsx(ColorInput, { value: value.backgroundColor, onChange: (backgroundColor) => onChange({ backgroundColor }) }) }), _jsx(Field, { label: "Text color", children: _jsx(ColorInput, { value: value.textColor, onChange: (textColor) => onChange({ textColor }) }) }), _jsx(Field, { label: "Border radius (px)", children: _jsx(NumberInput, { value: value.borderRadius, min: 0, max: 64, onChange: (borderRadius) => onChange({ borderRadius }) }) }), _jsx(Field, { label: "Size", children: _jsx(SelectInput, { value: value.size, options: [
{ value: 'sm', label: 'Small' },
{ value: 'md', label: 'Medium' },
{ value: 'lg', label: 'Large' },
], onChange: (size) => onChange({ size }) }) }), _jsx(Field, { label: "Alignment", children: _jsx(AlignmentToggle, { value: value.alignment, onChange: (alignment) => onChange({ alignment }) }) }), _jsx(Field, { label: "Full width", children: _jsxs("label", { className: "inline-flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: value.fullWidth, onChange: (e) => onChange({ fullWidth: e.target.checked }) }), "Stretch to container width"] }) }), _jsx(Field, { label: "Padding", children: _jsx(SpacingEditor, { value: value.padding, onChange: (padding) => onChange({ padding }) }) })] }));
}