Skip to content

Commit f4d3911

Browse files
utdevnputdevnp
committed
Update: Enhance the footer component
1 parent 52e1735 commit f4d3911

18 files changed

Lines changed: 241 additions & 266 deletions

‎dist/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,6 @@ var jsx_runtime_1 = require("react/jsx-runtime");
1818
var EmailTemplateBuilder_1 = __importDefault(require("./components/EmailTemplateBuilder"));
1919
require("./index.css");
2020
function App() {
21-
return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "min-h-screen bg-gray-50" }, { children: [(0, jsx_runtime_1.jsx)("header", __assign({ className: "bg-white shadow-sm border-b border-gray-200" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "w-full px-4 sm:px-6 lg:px-8" }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "flex justify-between items-center h-16" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "flex items-center" }, { children: (0, jsx_runtime_1.jsx)("h1", __assign({ className: "text-xl font-semibold text-gray-900" }, { children: "\uD83E\uDDEA Development Mode - Headerless Email Template Builder" })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text-sm text-gray-500" }, { children: "This header is for development only. Package users get headerless component." }))] })) })) })), (0, jsx_runtime_1.jsx)(EmailTemplateBuilder_1.default, {})] })));
21+
return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "min-h-screen bg-gray-50" }, { children: (0, jsx_runtime_1.jsx)(EmailTemplateBuilder_1.default, {}) })));
2222
}
2323
exports.default = App;

‎dist/components/Builder/Builder.js‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,10 @@ var Builder = function () {
137137
unsubscribeText: 'Click here to unsubscribe',
138138
unsubscribeUrl: 'https://company.com/unsubscribe',
139139
backgroundColor: 'transparent',
140+
companyNameColor: '#111827',
141+
contactTextColor: '#6b7280',
142+
socialTextColor: '#6b7280',
143+
unsubscribeTextColor: '#9ca3af',
140144
padding: '5px',
141145
contentAlignment: 'center',
142146
};
@@ -227,11 +231,11 @@ var Builder = function () {
227231
margin: component.props.margin || '20px 0',
228232
} }) })));
229233
case 'footer':
230-
return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "w-full py-6 px-6", style: { backgroundColor: component.props.backgroundColor || 'transparent' } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "mb-4 ".concat(component.props.contentAlignment === 'left' ? 'text-left' : component.props.contentAlignment === 'right' ? 'text-right' : 'text-center') }, { children: [(0, jsx_runtime_1.jsx)("h3", __assign({ className: "text-lg font-semibold text-gray-900 mb-2" }, { children: component.props.companyName || 'Company Name' })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "text-gray-600 text-sm mb-2" }, { children: component.props.address || '123 Main St, City, State 12345' })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "text-gray-600 text-sm mb-2" }, { children: component.props.phone || '+1 (555) 123-4567' })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "text-gray-600 text-sm mb-4" }, { children: component.props.email || 'info@company.com' }))] })), component.props.socialLinks && component.props.socialLinks.length > 0 && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "flex space-x-4 mb-4 ".concat(component.props.contentAlignment === 'left' ? 'justify-start' : component.props.contentAlignment === 'right' ? 'justify-end' : 'justify-center') }, { children: component.props.socialLinks.map(function (link, index) { return ((0, jsx_runtime_1.jsxs)("a", __assign({ href: link.url, className: "inline-flex items-center space-x-2 text-gray-600 hover:text-gray-800 transition-colors", target: "_blank", rel: "noopener noreferrer" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: link.imageUrl || '#', alt: link.title || link.platform || 'Social Link', className: "w-5 h-5", style: {
234+
return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "w-full py-6 px-6", style: { backgroundColor: component.props.backgroundColor || 'transparent' } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "mb-4 ".concat(component.props.contentAlignment === 'left' ? 'text-left' : component.props.contentAlignment === 'right' ? 'text-right' : 'text-center') }, { children: [(0, jsx_runtime_1.jsx)("h3", __assign({ className: "text-lg font-semibold mb-2", style: { color: component.props.companyNameColor || '#111827' } }, { children: component.props.companyName || 'Company Name' })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "text-sm mb-2", style: { color: component.props.contactTextColor || '#6b7280' } }, { children: component.props.address || '123 Main St, City, State 12345' })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "text-sm mb-2", style: { color: component.props.contactTextColor || '#6b7280' } }, { children: component.props.phone || '+1 (555) 123-4567' })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "text-sm mb-4", style: { color: component.props.contactTextColor || '#6b7280' } }, { children: component.props.email || 'info@company.com' }))] })), component.props.socialLinks && component.props.socialLinks.length > 0 && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "flex space-x-4 mb-4 ".concat(component.props.contentAlignment === 'left' ? 'justify-start' : component.props.contentAlignment === 'right' ? 'justify-end' : 'justify-center') }, { children: component.props.socialLinks.map(function (link, index) { return ((0, jsx_runtime_1.jsxs)("a", __assign({ href: link.url, className: "inline-flex items-center space-x-2 text-gray-600 hover:text-gray-800 transition-colors", target: "_blank", rel: "noopener noreferrer" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: link.imageUrl || '#', alt: link.title || link.platform || 'Social Link', className: "w-5 h-5", style: {
231235
filter: (link.imageUrl && link.imageUrl.includes('simple-icons'))
232236
? "brightness(0) saturate(100%) invert(0.6) sepia(0) saturate(0) hue-rotate(0deg) brightness(0.8) contrast(1)"
233237
: 'none'
234-
} }), (0, jsx_runtime_1.jsx)("span", __assign({ className: "text-sm font-medium" }, { children: link.title || link.platform || 'Social Link' }))] }), index)); }) }))), component.props.unsubscribeText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "".concat(component.props.contentAlignment === 'left' ? 'text-left' : component.props.contentAlignment === 'right' ? 'text-right' : 'text-center') }, { children: (0, jsx_runtime_1.jsx)("a", __assign({ href: "#", className: "text-sm text-gray-500 hover:text-gray-700 underline" }, { children: component.props.unsubscribeText })) })))] })));
238+
} }), (0, jsx_runtime_1.jsx)("span", __assign({ className: "text-sm font-medium", style: { color: component.props.socialTextColor || '#6b7280' } }, { children: link.title || link.platform || 'Social Link' }))] }), index)); }) }))), component.props.unsubscribeText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "".concat(component.props.contentAlignment === 'left' ? 'text-left' : component.props.contentAlignment === 'right' ? 'text-right' : 'text-center') }, { children: (0, jsx_runtime_1.jsx)("a", __assign({ href: "#", className: "text-sm underline hover:opacity-80", style: { color: component.props.unsubscribeTextColor || '#9ca3af' } }, { children: component.props.unsubscribeText })) })))] })));
235239
case 'spacer':
236240
return ((0, jsx_runtime_1.jsx)("div", { className: "w-full", style: { height: component.props.height || '20px' } }));
237241
case 'socialMedia':
@@ -260,13 +264,13 @@ var Builder = function () {
260264
moveComponent(result.draggableId, destinationIndex);
261265
}
262266
};
263-
return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "p-6 pt-2" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "mb-4" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "border-b border-gray-200" }, { children: (0, jsx_runtime_1.jsxs)("nav", __assign({ className: "-mb-px flex space-x-8" }, { children: [(0, jsx_runtime_1.jsxs)("button", __assign({ onClick: function () { return setActiveTab('editor'); }, className: "py-2 px-1 border-b-2 font-medium text-sm transition-colors ".concat(activeTab === 'editor'
264-
? 'border-primary-500 text-primary-600'
265-
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300') }, { children: [(0, jsx_runtime_1.jsx)("svg", __assign({ className: "w-4 h-4 mr-2 inline", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }) })), "Editor"] })), (0, jsx_runtime_1.jsxs)("button", __assign({ onClick: function () { return setActiveTab('pc'); }, disabled: template.components.length === 0, className: "py-2 px-1 border-b-2 font-medium text-sm transition-colors ".concat(activeTab === 'pc'
266-
? 'border-primary-500 text-primary-600'
267-
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed') }, { children: [(0, jsx_runtime_1.jsx)("svg", __assign({ className: "w-4 h-4 mr-2 inline", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) })), "Desktop"] })), (0, jsx_runtime_1.jsxs)("button", __assign({ onClick: function () { return setActiveTab('mobile'); }, disabled: template.components.length === 0, className: "py-2 px-1 border-b-2 font-medium text-sm transition-colors ".concat(activeTab === 'mobile'
268-
? 'border-primary-500 text-primary-600'
269-
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed') }, { children: [(0, jsx_runtime_1.jsx)("svg", __assign({ className: "w-4 h-4 mr-2 inline", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" }) })), "Mobile"] }))] })) })) })), activeTab === 'editor' && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "flex justify-center" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ ref: drop, className: "min-h-[600px] border-2 border-dashed border-gray-300 w-[700px] cursor-pointer", style: {
267+
return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "p-6 pt-2" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "mb-4" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "border-b border-gray-200" }, { children: (0, jsx_runtime_1.jsxs)("nav", __assign({ className: "-mb-px flex" }, { children: [(0, jsx_runtime_1.jsxs)("button", __assign({ onClick: function () { return setActiveTab('editor'); }, className: "py-2 px-3 border-b-2 font-medium text-sm transition-colors ".concat(activeTab === 'editor'
268+
? 'border-primary-500 text-primary-600 bg-primary-50'
269+
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 hover:bg-gray-50 bg-white') }, { children: [(0, jsx_runtime_1.jsx)("svg", __assign({ className: "w-4 h-4 mr-2 inline", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" }) })), "Editor"] })), (0, jsx_runtime_1.jsxs)("button", __assign({ onClick: function () { return setActiveTab('pc'); }, disabled: template.components.length === 0, className: "py-2 px-3 border-b-2 font-medium text-sm transition-colors ".concat(activeTab === 'pc'
270+
? 'border-primary-500 text-primary-600 bg-primary-50'
271+
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 hover:bg-gray-50 bg-white disabled:opacity-50 disabled:cursor-not-allowed') }, { children: [(0, jsx_runtime_1.jsx)("svg", __assign({ className: "w-4 h-4 mr-2 inline", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) })), "Desktop"] })), (0, jsx_runtime_1.jsxs)("button", __assign({ onClick: function () { return setActiveTab('mobile'); }, disabled: template.components.length === 0, className: "py-2 px-3 border-b-2 font-medium text-sm transition-colors ".concat(activeTab === 'mobile'
272+
? 'border-primary-500 text-primary-600 bg-primary-50'
273+
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 hover:bg-gray-50 bg-white disabled:opacity-50 disabled:cursor-not-allowed') }, { children: [(0, jsx_runtime_1.jsx)("svg", __assign({ className: "w-4 h-4 mr-2 inline", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" }) })), "Mobile"] }))] })) })) })), activeTab === 'editor' && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "flex justify-center" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ ref: drop, className: "min-h-[600px] border-2 border-dashed border-gray-300 w-[700px] cursor-pointer", style: {
270274
backgroundColor: template.settings.backgroundColor || 'transparent',
271275
} }, { children: template.components.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "flex flex-col items-center justify-center h-full py-20" }, { children: [(0, jsx_runtime_1.jsx)("svg", __assign({ className: "w-16 h-16 text-gray-300 mb-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z" }) })), (0, jsx_runtime_1.jsx)("h3", __assign({ className: "text-lg font-medium text-gray-900 mb-2" }, { children: "Start building your email" })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "text-gray-500 text-center max-w-sm" }, { children: "Drag components from the left sidebar to start creating your email template" })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "mt-8" }, { children: (0, jsx_runtime_1.jsx)(DropZone_1.DropZone, { index: 0, onDrop: function (type, index) {
272276
var defaultProps = getDefaultProps(type);

0 commit comments

Comments
 (0)