feat: Allow half stars for reviews

src/components/reviews/ReviewForm.tsx

@@ -12,9 +12,10 @@ import { useAuth } from '@/hooks/useAuth';
 import { supabase } from '@/integrations/supabase/client';
 import { toast } from '@/hooks/use-toast';
 import { PhotoUpload } from '@/components/upload/PhotoUpload';
+import { StarRating } from './StarRating';
 
 const reviewSchema = z.object({
-  rating: z.number().min(1).max(5),
+  rating: z.number().min(0.5).max(5).multipleOf(0.5),
   title: z.string().optional(),
   content: z.string().min(10, 'Review must be at least 10 characters long'),
   visit_date: z.string().optional(),
@@ -47,7 +48,7 @@ export function ReviewForm({ entityType, entityId, entityName, onReviewSubmitted
     resolver: zodResolver(reviewSchema)
   });
 
-  const handleRatingClick = (selectedRating: number) => {
+  const handleRatingChange = (selectedRating: number) => {
     setRating(selectedRating);
     setValue('rating', selectedRating);
   };
@@ -130,29 +131,13 @@ export function ReviewForm({ entityType, entityId, entityName, onReviewSubmitted
           {/* Rating */}
           <div className="space-y-2">
             <Label>Rating *</Label>
-            <div className="flex items-center gap-1">
-              {Array.from({ length: 5 }, (_, i) => (
-                <button
-                  key={i}
-                  type="button"
-                  onClick={() => handleRatingClick(i + 1)}
-                  className="text-2xl hover:scale-110 transition-transform"
-                >
-                  <Star
-                    className={`w-8 h-8 ${
-                      i < rating 
-                        ? 'fill-yellow-400 text-yellow-400' 
-                        : 'text-muted-foreground hover:text-yellow-400'
-                    }`}
-                  />
-                </button>
-              ))}
-              {rating > 0 && (
-                <span className="ml-2 text-sm text-muted-foreground">
-                  {rating} star{rating !== 1 ? 's' : ''}
-                </span>
-              )}
-            </div>
+            <StarRating
+              rating={rating}
+              onChange={handleRatingChange}
+              interactive={true}
+              showLabel={true}
+              size="lg"
+            />
             {errors.rating && (
               <p className="text-sm text-destructive">Please select a rating</p>
             )}