Widget components

type ReviewAggregateData = {
  score: number;           // average rating, e.g. 4.8
  totalReviews: number;    // total verified review count
  distribution: {
    5: number;
    4: number;
    3: number;
    2: number;
    1: number;
  };
};

import "@ethioreview/review-widget-react/styles.css";

import { ReviewWidget } from "@ethioreview/review-widget-react";
import "@ethioreview/review-widget-react/styles.css";

export function TrustSection() {
  return (
    <ReviewWidget
      baseUrl="https://api.ethioreview.com"
      publicKey="pk_live_YOUR_KEY"
      widgetId="widget_abc"
    />
  );
}

<ReviewWidget
  baseUrl="https://api.ethioreview.com"
  publicKey="pk_live_YOUR_KEY"
  businessId="YOUR_ORG_PROFILE_ID"
  layout="hero-banner"
  minStars={4}
  limit={5}
/>

import {
  HeroReviewBanner,
  toReviewAggregateData,
} from "@ethioreview/review-widget-react";
import "@ethioreview/review-widget-react/styles.css";

const data = toReviewAggregateData({
  averageRating: 4.8,
  reviewCount: 20921,
  ratingDistribution: { "5": 16210, "4": 3120, "3": 980, "2": 360, "1": 251 },
});

export function Hero() {
  return (
    <HeroReviewBanner
      data={data}
      profileUrl="https://ethioreview.com/organizations/your-slug"
    />
  );
}