mbn-react-google-reviews/dist/index.mjs

Google Reviews Component which will bis in reactc component and is used by millions of developers

// src/components/review-list.tsx
import { motion } from "framer-motion";

// src/components/review-card.tsx
import { FaStar, FaRegStar } from "react-icons/fa";
import { jsx, jsxs } from "react/jsx-runtime";
var Rating = ({ rating }) => {
  return /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1", children: [
    [1, 2, 3, 4, 5].map(
      (star) => star <= rating ? /* @__PURE__ */ jsx(FaStar, { className: "text-yellow-400 h-6 w-6" }, star) : /* @__PURE__ */ jsx(FaRegStar, { className: "text-gray-300 h-6 w-6" }, star)
    ),
    /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
      rating,
      " out of 5 stars"
    ] })
  ] });
};
var ReviewCard = ({
  author,
  rating,
  text,
  date,
  avatar
}) => {
  return /* @__PURE__ */ jsx("div", { className: "bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start space-x-4", children: [
    avatar && /* @__PURE__ */ jsx(
      "img",
      {
        className: "h-12 w-12 rounded-full object-cover flex-shrink-0",
        src: avatar,
        alt: author
      }
    ),
    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
        /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium text-gray-900 truncate", children: author }),
        date && /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500 whitespace-nowrap", children: date })
      ] }),
      /* @__PURE__ */ jsx("div", { className: "mt-1.5 w-24", children: /* @__PURE__ */ jsx(Rating, { rating }) }),
      /* @__PURE__ */ jsx("p", { className: "mt-3 text-gray-600 leading-relaxed", children: text })
    ] })
  ] }) });
};

// src/components/review-list.tsx
import { jsx as jsx2, jsxs as jsxs2 } from "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__ */ jsxs2(
    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__ */ jsxs2("div", { className: "text-center mb-12", children: [
          /* @__PURE__ */ jsx2("h2", { className: "text-3xl font-extrabold text-gray-900 sm:text-4xl", children: "Customer Reviews" }),
          /* @__PURE__ */ jsx2("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__ */ jsx2(
          motion.div,
          {
            className: "grid grid-cols-1 md:grid-cols-2 gap-8",
            variants: containerVariants,
            children: reviews.map((review, idx) => /* @__PURE__ */ jsx2(motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsx2(ReviewCard, { ...review }) }, idx))
          }
        ),
        onCTA && /* @__PURE__ */ jsx2("div", { className: "mt-12 text-center", children: /* @__PURE__ */ jsx2(
          "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
import { jsx as jsx3 } from "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__ */ jsx3(
    ReviewList,
    {
      reviews,
      showTitle,
      ctaLabel,
      onCTA: onCTAClick
    }
  );
};
export {
  MbnGoogleReview
};
//# sourceMappingURL=index.mjs.map