review-01-block

1import StarRating from "@/components/commerce-ui/star-rating-basic";
2interface Review_01Props {
3  rating?: number;
4  reviewDate?: string;
5  reviewText?: string;
6  avatarUrl?: string;
7  reviewerName?: string;
8  reviewerTitle?: string;
9}
10 
11function Review_01({
12  avatarUrl = "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/user-07.jpg",
13  rating = 4.0,
14  reviewDate = "Feb 12, 2025",
15  reviewerName = "Adam Smith",
16  reviewerTitle = "CEO ACME Inc.",
17  reviewText = "The product is great, I'm very satisfied with the quality and the price. I would recommend it to anyone looking for a good product or service.",
18}: Review_01Props = {}) {
19  return (
20    <>
21      <div className="flex max-w-2xl flex-col gap-4 rounded-lg border px-6 py-4">
22        <div className="flex flex-row flex-wrap items-center justify-between gap-2">
23          <div className="flex flex-row items-center gap-2">
24            <StarRating value={rating} maxStars={5} iconSize={18} readOnly />
25            <p className="text-sm">({rating}/5)</p>
26          </div>
27 
28          <p className="text-muted-foreground text-sm">{reviewDate}</p>
29        </div>
30 
31        <div>
32          <p className="text-justify">{reviewText}</p>
33        </div>
34 
35        <div className="flex flex-row items-end gap-4">
36          <img
37            src={avatarUrl}
38            alt="reviewer avatar"
39            className="relative inline-block h-12 w-12 !rounded-full object-cover object-center"
40          />
41          <div>
42            <p className="text-sm font-semibold">{reviewerName}</p>
43            <p className="font-base text-muted-foreground text-sm">
44              {reviewerTitle}
45            </p>
46          </div>
47        </div>
48      </div>
49    </>
50  );
51}
52 
53export default Review_01;
54export type { Review_01Props };