Changes

src/components/reviews/ProductReviews.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { ReviewCard } from './ReviewCard';
+import { Star } from 'lucide-react';
+
+interface Review {
+  id: string;
+  rating: number;
+  title: string;
+  body: string;
+  created_at: string;
+  profiles: { full_name: string | null } | null;
+}
+
+interface ProductReviewsProps {
+  productId: string;
+  type?: string;
+}
+
+export function ProductReviews({ productId, type }: ProductReviewsProps) {
+  const [reviews, setReviews] = useState<Review[]>([]);
+  const [stats, setStats] = useState({ avg: 0, count: 0 });
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchReviews();
+  }, [productId, type]);
+
+  const fetchReviews = async () => {
+    let query = supabase
+      .from('reviews')
+      .select('id, rating, title, body, created_at, profiles (full_name)')
+      .eq('is_approved', true);
+
+    if (productId) {
+      query = query.eq('product_id', productId);
+    } else if (type) {
+      query = query.eq('type', type);
+    }
+
+    const { data } = await query.order('created_at', { ascending: false }).limit(3);
+
+    if (data && data.length > 0) {
+      const typedData = data as unknown as Review[];
+      setReviews(typedData);
+      const avg = typedData.reduce((sum, r) => sum + r.rating, 0) / typedData.length;
+      setStats({ avg: Math.round(avg * 10) / 10, count: typedData.length });
+    }
+    setLoading(false);
+  };
+
+  if (loading || reviews.length === 0) return null;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3">
+        <div className="flex gap-0.5">
+          {[1, 2, 3, 4, 5].map((i) => (
+            <Star
+              key={i}
+              className={`w-5 h-5 ${
+                i <= Math.round(stats.avg) ? 'fill-primary text-primary' : 'text-muted-foreground'
+              }`}
+            />
+          ))}
+        </div>
+        <span className="font-bold">{stats.avg}</span>
+        <span className="text-muted-foreground">({stats.count} ulasan)</span>
+      </div>
+      <div className="grid gap-4">
+        {reviews.map((review) => (
+          <ReviewCard
+            key={review.id}
+            rating={review.rating}
+            title={review.title}
+            body={review.body}
+            authorName={review.profiles?.full_name || 'Anonymous'}
+            date={review.created_at}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}