review-05-block

1import StarRating from "@/components/commerce-ui/star-rating-fractions";
2import { Progress } from "@/components/ui/progress";
3 
4interface ReviewStatProps {
5  stars: number;
6  percentage: number;
7  count: number;
8}
9 
10interface ReviewStatData {
11  stars: number;
12  percentage: number;
13  count: number;
14}
15 
16interface Review_05Props {
17  title?: string;
18  subtitle?: string;
19  overallRating?: number;
20  totalReviewCount?: number;
21  verifiedPurchases?: number;
22  reviewStats?: ReviewStatData[];
23  showProgress?: boolean;
24}
25 
26function ReviewStat({ count, percentage, stars }: ReviewStatProps) {
27  return (
28    <div className="flex w-full items-center gap-2">
29      <div className="w-16 text-right text-sm">{stars} stars</div>
30      <Progress value={percentage} className="h-2 flex-1" />
31      <div className="text-muted-foreground w-12 text-left text-sm">
32        {count}
33      </div>
34    </div>
35  );
36}
37 
38function Review_05({
39  overallRating = 4.7,
40  reviewStats = [
41    { count: 629, percentage: 76, stars: 5 },
42    { count: 116, percentage: 14, stars: 4 },
43    { count: 50, percentage: 6, stars: 3 },
44    { count: 24, percentage: 3, stars: 2 },
45    { count: 8, percentage: 1, stars: 1 },
46  ],
47  showProgress = true,
48  subtitle = "What our customers are saying",
49  title = "Customer Reviews",
50  totalReviewCount = 827,
51  verifiedPurchases = 756,
52}: Review_05Props = {}) {
53  const verifiedPercentage = Math.round(
54    (verifiedPurchases / totalReviewCount) * 100
55  );
56 
57  return (
58    <div className="flex flex-col gap-8 rounded-lg bg-white px-6 py-6 dark:bg-gray-950">
59      <div className="flex flex-col items-center text-center">
60        <h2 className="mb-1 text-2xl font-bold">{title}</h2>
61        <p className="text-muted-foreground mb-6 text-sm">{subtitle}</p>
62 
63        <div className="mb-4 flex flex-col items-center">
64          <span className="mb-2 text-5xl font-bold">{overallRating}</span>
65          <StarRating
66            value={overallRating}
67            readOnly
68            iconSize={24}
69            className="mb-2"
70          />
71          <p className="text-muted-foreground text-sm">
72            Based on {totalReviewCount} reviews
73          </p>
74        </div>
75 
76        <div className="mb-2 w-full max-w-xs rounded-md bg-gray-50 px-4 py-3 dark:bg-gray-900">
77          <p className="text-sm">
78            <span className="font-medium">{verifiedPercentage}%</span> of
79            reviews from{" "}
80            <span className="font-medium text-green-600 dark:text-green-400">
81// … truncated