review-04-block

1import StarRating from "@/components/commerce-ui/star-rating-fractions";
2 
3interface RatingItemProps {
4  label: string;
5  value: number;
6  isLast?: boolean;
7}
8 
9interface RatingItemData {
10  label: string;
11  value: number;
12}
13 
14interface Review_04Props {
15  title?: string;
16  overallRating?: number;
17  recommendPercentage?: number;
18  ratingItems?: RatingItemData[];
19}
20 
21function RatingItem({ isLast, label, value }: RatingItemProps) {
22  return (
23    <div className="flex flex-col gap-2">
24      <p className="text-sm tracking-wider uppercase">
25        <span className="mr-2 font-semibold">{value}/5</span> {label}
26      </p>
27      <StarRating value={value} readOnly iconSize={16} />
28      {!isLast && (
29        <hr className="my-2 block border-t border-gray-500/50 md:hidden" />
30      )}
31    </div>
32  );
33}
34 
35function Review_04({
36  overallRating = 4.4,
37  ratingItems = [
38    { label: "Quality", value: 4.5 },
39    { label: "Value", value: 4.5 },
40    { label: "Appearance", value: 4.5 },
41    { label: "Effectiveness", value: 4.5 },
42    { label: "Features", value: 4.1 },
43    { label: "Quietness", value: 4.4 },
44  ],
45  recommendPercentage = 87,
46  title = "Customer Reviews",
47}: Review_04Props = {}) {
48  return (
49    <div className="items-left flex flex-col gap-6 px-6 py-4">
50      <h1 className="mb-4 text-left text-2xl font-semibold">{title}</h1>
51      <div className="flex flex-row flex-wrap gap-12">
52        <div className="flex grow-0 flex-col justify-around gap-2">
53          <p className="text-4xl font-semibold"> {overallRating}/5</p>
54          <StarRating value={overallRating} readOnly iconSize={36} />
55          <p className="text-muted-foreground max-w-[20ch] text-sm">
56            <span className="font-semibold text-teal-500">
57              {recommendPercentage}% would recommend{" "}
58            </span>
59            this product to a friend
60          </p>
61        </div>
62        <div className="grid w-fit grid-cols-1 gap-2 md:grid-cols-3">
63          {ratingItems.map((item, index) => (
64            <RatingItem
65              key={item.label}
66              label={item.label}
67              value={item.value}
68              isLast={index === ratingItems.length - 1}
69            />
70          ))}
71        </div>
72      </div>
73    </div>
74  );
75}
76 
77export default Review_04;
78export type { RatingItemData, RatingItemProps, Review_04Props };