Changes

src/components/reviews/TestimonialsSection.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { ReviewCard } from './ReviewCard';
+
+interface Review {
+  id: string;
+  rating: number;
+  title: string;
+  body: string;
+  created_at: string;
+  profiles: { full_name: string | null } | null;
+}
+
+export function TestimonialsSection() {
+  const [reviews, setReviews] = useState<Review[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchReviews();
+  }, []);
+
+  const fetchReviews = async () => {
+    const { data } = await supabase
+      .from('reviews')
+      .select('id, rating, title, body, created_at, profiles (full_name)')
+      .eq('is_approved', true)
+      .order('created_at', { ascending: false })
+      .limit(6);
+
+    if (data) {
+      setReviews(data as unknown as Review[]);
+    }
+    setLoading(false);
+  };
+
+  if (loading || reviews.length === 0) return null;
+
+  return (
+    <section className="container mx-auto px-4 py-16">
+      <h2 className="text-3xl font-bold text-center mb-8">Apa Kata Mereka</h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {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>
+    </section>
+  );
+}