review-02-block

1"use client";
2 
3import StarRating from "@/components/commerce-ui/star-rating-fractions";
4import { Button } from "@/components/ui/button";
5import { Star } from "lucide-react";
6 
7interface RatingLevelProps {
8  level: number;
9  value: number;
10  total: number;
11}
12 
13interface RatingData {
14  level: number;
15  value: number;
16  total: number;
17}
18 
19interface Review_02Props {
20  productImageUrl?: string;
21  productName?: string;
22  badgeText?: string;
23  averageRating?: number;
24  totalReviews?: number;
25  ratingLevels?: RatingData[];
26  onReviewClick?: () => void;
27  onSeeAllReviewsClick?: () => void;
28}
29 
30function Review_02({
31  averageRating = 4.5,
32  badgeText = "Top rated",
33  onReviewClick = () => {},
34  onSeeAllReviewsClick = () => {},
35  productImageUrl = "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/backpack.jpg",
36  productName = "Ultra Backpack PRO GEAR - 2025 edition",
37  ratingLevels = [
38    { level: 5, total: 75, value: 75 },
39    { level: 4, total: 20, value: 20 },
40    { level: 3, total: 5, value: 5 },
41    { level: 2, total: 0, value: 0 },
42    { level: 1, total: 0, value: 0 },
43  ],
44  totalReviews = 100,
45}: Review_02Props = {}) {
46  return (
47    <>
48      <div className="items-left flex max-w-lg flex-col gap-6 rounded-lg border px-6 py-4">
49        <div className="flex w-full flex-row flex-wrap items-start justify-between gap-4">
50          <img
51            src={productImageUrl}
52            alt="product-image"
53            className="relative inline-block h-36 w-36 items-center rounded-sm object-cover"
54          />
55 
56          <div className="flex flex-col gap-4">
57            <p className="text-xl font-semibold">{productName}</p>
58            {badgeText && (
59              <div className="w-fit rounded-xl border border-teal-500/50 bg-teal-500/20 px-2 py-1 uppercase">
60                <p className="text-xs font-semibold text-teal-500">
61                  {badgeText}
62                </p>
63              </div>
64            )}
65          </div>
66        </div>
67 
68        <div className="flex flex-row flex-wrap items-center gap-4">
69          <p className="text-5xl">{averageRating}</p>
70          <div>
71            <StarRating value={averageRating} readOnly />
72            <p>{totalReviews} reviews</p>
73          </div>
74        </div>
75 
76        <div className="mb-4 flex flex-col gap-2">
77          {ratingLevels.map((rating) => (
78            <RatingLevel
79              key={rating.level}
80              level={rating.level}
81              value={rating.value}
82// … truncated