fix ui style

features/review/components/organizer-reviews-list.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import Image from "next/image";
+import { Star } from "lucide-react";
 import type { OrganizerReviewItem } from "@/server/services/review.service";
 
 interface OrganizerReviewsListProps {
@@ -62,11 +63,22 @@ export function OrganizerReviewsList({
                   >
                     {r.user.name}
                   </Link>
-                  <span className="text-xs font-bold text-amber-600">
-                    {"★".repeat(r.rating)}
-                    <span className="text-neutral-300">
-                      {"★".repeat(5 - r.rating)}
-                    </span>
+                  <span
+                    className="flex shrink-0 items-center gap-0.5"
+                    aria-label={`Rating ${r.rating} dari 5`}
+                  >
+                    {[1, 2, 3, 4, 5].map((n) => (
+                      <Star
+                        key={n}
+                        size={12}
+                        strokeWidth={2}
+                        fill="currentColor"
+                        aria-hidden
+                        className={
+                          n <= r.rating ? "text-amber-500" : "text-neutral-200"
+                        }
+                      />
+                    ))}
                   </span>
                 </div>