review-03-block

1"use client";
2 
3import LikeRating from "@/components/commerce-ui/like-rating-basic";
4import StarRating from "@/components/commerce-ui/star-rating-basic";
5import { Button } from "@/components/ui/button";
6import { useState, useRef, useEffect } from "react";
7 
8interface Review_03Props {
9  defaultRating?: number;
10  reviewerName?: string;
11  reviewerTitle?: string;
12  reviewerAvatar?: string;
13  initialLikes?: number;
14  initialDislikes?: number;
15  initialIsLiked?: boolean;
16  initialIsDisliked?: boolean;
17  reviewTitle?: string;
18  reviewContent?: string;
19}
20 
21function Review_03({
22  defaultRating = 5,
23  initialDislikes = 1,
24  initialIsDisliked = false,
25  initialIsLiked = true,
26  initialLikes = 11,
27  reviewContent = "I recently got my hands on this amazing bag, and after using it for a while, I can confidently say it is a solid choice for travelling. Verdict: If you are looking for an amazing backpack that balances comfort, organization, and durability, this is a great investment. Would definitely recommend it to anyone in need of a reliable bag! 🎒💼",
28  reviewerAvatar = "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/user-07.jpg",
29  reviewerName = "Adam Smith",
30  reviewerTitle = "CEO ACME Inc.",
31  reviewTitle = "Wished I bought this thing sooner!!",
32}: Review_03Props = {}) {
33  const [isExpanded, setIsExpanded] = useState(false);
34  const [likes, setLikes] = useState(initialLikes);
35  const [dislikes, setDislikes] = useState(initialDislikes);
36  const [isLiked, setIsLiked] = useState(initialIsLiked);
37  const [isDisliked, setIsDisliked] = useState(initialIsDisliked);
38  const [isContentOverflowing, setIsContentOverflowing] = useState(false);
39  const contentRef = useRef<HTMLParagraphElement>(null);
40 
41  // Check if content overflows when component mounts or content changes
42  useEffect(() => {
43    const checkOverflow = () => {
44      if (contentRef.current) {
45        // Check if scrollHeight is greater than clientHeight
46        const isOverflowing =
47          contentRef.current.scrollHeight > contentRef.current.clientHeight;
48        setIsContentOverflowing(isOverflowing);
49      }
50    };
51 
52    // Run the check after render
53    checkOverflow();
54 
55    // Also check on window resize in case layout changes
56    window.addEventListener("resize", checkOverflow);
57    return () => window.removeEventListener("resize", checkOverflow);
58  }, [reviewContent]);
59  return (
60// … truncated