reviews and review history

frontend/src/components/StarRating.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+interface StarRatingProps {
+  rating: number;
+  size?: 'small' | 'medium' | 'large';
+  className?: string;
+}
+
+const StarRating: React.FC<StarRatingProps> = ({ 
+  rating, 
+  size = 'small', 
+  className = '' 
+}) => {
+  const getSizeStyle = () => {
+    switch (size) {
+      case 'large':
+        return { fontSize: '1.5rem' };
+      case 'medium':
+        return { fontSize: '1.2rem' };
+      case 'small':
+      default:
+        return { fontSize: '1rem' };
+    }
+  };
+
+  const renderStars = () => {
+    const stars = [];
+    const fullStars = Math.floor(rating);
+    const hasHalfStar = rating % 1 !== 0;
+
+    // Render filled stars
+    for (let i = 0; i < fullStars; i++) {
+      stars.push(
+        <i
+          key={`filled-${i}`}
+          className="bi bi-star-fill"
+          style={{ color: '#ffc107' }}
+        ></i>
+      );
+    }
+
+    // Render half star if needed
+    if (hasHalfStar) {
+      stars.push(
+        <i
+          key="half"
+          className="bi bi-star-half"
+          style={{ color: '#ffc107' }}
+        ></i>
+      );
+    }
+
+    // Render empty stars
+    const emptyStars = 5 - Math.ceil(rating);
+    for (let i = 0; i < emptyStars; i++) {
+      stars.push(
+        <i
+          key={`empty-${i}`}
+          className="bi bi-star"
+          style={{ color: '#dee2e6' }}
+        ></i>
+      );
+    }
+
+    return stars;
+  };
+
+  return (
+    <div className={`d-inline-flex align-items-center gap-1 ${className}`} style={getSizeStyle()}>
+      {renderStars()}
+    </div>
+  );
+};
+
+export default StarRating;