nexo-solutions-review-carousel
Version:
A customizable review carousel component for React applications
76 lines (75 loc) • 4.6 kB
JavaScript
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import React from 'react';
import './ReviewCarousel.css';
// Google logo is imported in a way that works in both development and when published
var googleLogoPath = process.env.NODE_ENV === 'production'
? require('./assets/google-logo.svg').default
: './assets/google-logo.svg';
export var ReviewModal = function (_a) {
var review = _a.review, language = _a.language, onClose = _a.onClose, _b = _a.accentColor, accentColor = _b === void 0 ? '#ffc800' : _b, _c = _a.sourceIconUrl, sourceIconUrl = _c === void 0 ? googleLogoPath : _c, _d = _a.translations, translations = _d === void 0 ? {
viewOn: {
en: 'View on Google Maps',
pt: 'Ver no Google Maps',
},
} : _d;
if (!review)
return null;
var handleImageError = function (e, name) {
var target = e.target;
var nameParts = name.split(' ');
var initials = nameParts.length > 1
? "".concat(nameParts[0][0]).concat(nameParts[1][0])
: nameParts[0].substring(0, 2);
// Generate a deterministic color based on the name
var colors = ['#4285F4', '#DB4437', '#F4B400', '#0F9D58', '#9C27B0', '#FF6D00'];
var colorIndex = name.length % colors.length;
var backgroundColor = colors[colorIndex];
// Create a canvas element
var canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext('2d');
if (ctx) {
// Draw background circle
ctx.fillStyle = backgroundColor;
ctx.beginPath();
ctx.arc(100, 100, 100, 0, 2 * Math.PI);
ctx.fill();
// Add text
ctx.font = 'bold 80px Arial';
ctx.fillStyle = '#FFFFFF';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(initials.toUpperCase(), 100, 100);
// Replace the image source with the canvas data URL
target.src = canvas.toDataURL('image/png');
}
};
return (React.createElement("div", { className: "review-modal-overlay", onClick: onClose },
React.createElement("div", { className: "review-modal", onClick: function (e) { return e.stopPropagation(); } },
React.createElement("button", { className: "review-modal-close", onClick: onClose, "aria-label": "Close review" }, "\u00D7"),
React.createElement("div", { className: "review-modal-content" },
React.createElement("div", { className: "review-stars" },
__spreadArray([], Array(5), true).map(function (_, i) { return (React.createElement("i", { key: i, className: i < review.rating ? 'fas fa-star' : 'far fa-star' })); }),
review.sourceUrl && (React.createElement("a", { href: review.sourceUrl, target: "_blank", rel: "noopener noreferrer", className: "google-source-indicator", title: translations.viewOn[language] || translations.viewOn.en },
React.createElement("img", { src: sourceIconUrl, alt: "Source", className: "source-icon" })))),
React.createElement("div", { className: "review-modal-text" },
React.createElement("p", null, review.comment[language] || review.comment.en)),
React.createElement("div", { className: "review-modal-author" },
React.createElement("div", { className: "author-image" },
React.createElement("img", { src: review.image, alt: review.name, onError: function (e) { return handleImageError(e, review.name); } })),
React.createElement("div", null,
React.createElement("h4", { className: "author-name" }, review.name),
React.createElement("span", { className: "author-location" }, review.location[language] || review.location.en))))),
React.createElement("style", { dangerouslySetInnerHTML: {
__html: "\n .review-stars, .review-stars i.fas.fa-star {\n color: ".concat(accentColor, ";\n }\n ")
} })));
};