mbn-react-google-reviews
Version:
Google Reviews Component which will bis in reactc component and is used by millions of developers
176 lines (171 loc) • 6.42 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
MbnGoogleReview: () => MbnGoogleReview
});
module.exports = __toCommonJS(index_exports);
// src/components/review-list.tsx
var import_framer_motion = require("framer-motion");
// src/components/review-card.tsx
var import_fa = require("react-icons/fa");
var import_jsx_runtime = require("react/jsx-runtime");
var Rating = ({ rating }) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center space-x-1", children: [
[1, 2, 3, 4, 5].map(
(star) => star <= rating ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaStar, { className: "text-yellow-400 h-6 w-6" }, star) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaRegStar, { className: "text-gray-300 h-6 w-6" }, star)
),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "sr-only", children: [
rating,
" out of 5 stars"
] })
] });
};
var ReviewCard = ({
author,
rating,
text,
date,
avatar
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start space-x-4", children: [
avatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"img",
{
className: "h-12 w-12 rounded-full object-cover flex-shrink-0",
src: avatar,
alt: author
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 min-w-0", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-lg font-medium text-gray-900 truncate", children: author }),
date && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-gray-500 whitespace-nowrap", children: date })
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1.5 w-24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Rating, { rating }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-3 text-gray-600 leading-relaxed", children: text })
] })
] }) });
};
// src/components/review-list.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1,
delayChildren: 0.2
}
}
};
var itemVariants = {
hidden: { y: 20, opacity: 0 },
visible: {
y: 0,
opacity: 1,
transition: {
duration: 0.5,
ease: "easeOut"
}
}
};
var ReviewList = ({
reviews,
showTitle = true,
ctaLabel = "Leave a Review",
onCTA
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
import_framer_motion.motion.div,
{
className: "max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12",
initial: "hidden",
animate: "visible",
variants: containerVariants,
children: [
showTitle && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-center mb-12", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: "text-3xl font-extrabold text-gray-900 sm:text-4xl", children: "Customer Reviews" }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4", children: "Hear what our customers say about us" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_framer_motion.motion.div,
{
className: "grid grid-cols-1 md:grid-cols-2 gap-8",
variants: containerVariants,
children: reviews.map((review, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_framer_motion.motion.div, { variants: itemVariants, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ReviewCard, { ...review }) }, idx))
}
),
onCTA && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-12 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"button",
{
onClick: onCTA,
className: "px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 transition duration-150 ease-in-out shadow-sm hover:shadow-md",
children: ctaLabel
}
) })
]
}
);
};
// src/components/mbn-google-review.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var defaultReviews = [
{
author: "John Doe",
rating: 5,
text: "Amazing service!",
date: "June 15, 2023",
avatar: "https://randomuser.me/api/portraits/men/32.jpg"
},
{
author: "Jane Smith",
rating: 4,
text: "Great experience.",
date: "May 28, 2023",
avatar: "https://randomuser.me/api/portraits/women/44.jpg"
}
];
var MbnGoogleReview = ({
reviews = defaultReviews,
placeId,
apiKey,
layout = "grid",
showTitle = true,
titleText = "Customer Reviews",
descriptionText = "Hear what our customers say about us",
ctaLabel = "Leave a Review",
onCTAClick
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
ReviewList,
{
reviews,
showTitle,
ctaLabel,
onCTA: onCTAClick
}
);
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
MbnGoogleReview
});
//# sourceMappingURL=index.js.map