trust roadmap

2026-05-09 00:55:40 +07:00
parent 5e0232d909
commit 54cd984a7e
14 changed files with 628 additions and 281 deletions
@@ -0,0 +1,107 @@
+import Link from "next/link";
+import Image from "next/image";
+import type { OrganizerReviewItem } from "@/server/services/review.service";
+
+interface OrganizerReviewsListProps {
+  reviews: OrganizerReviewItem[];
+  /// Total review keseluruhan organizer (bisa lebih besar dari `reviews.length`
+  /// kalau di-limit di service). Kalau tidak diberikan, fallback ke `reviews.length`.
+  totalCount?: number;
+}
+
+export function OrganizerReviewsList({
+  reviews,
+  totalCount,
+}: OrganizerReviewsListProps) {
+  if (reviews.length === 0) {
+    return null;
+  }
+
+  const total = totalCount ?? reviews.length;
+  const showingMore = total > reviews.length;
+
+  return (
+    <section className="mt-5 rounded-2xl border border-neutral-200 bg-white p-5 shadow-sm sm:p-6">
+      <div className="mb-4 flex flex-wrap items-baseline justify-between gap-2">
+        <h2 className="text-sm font-bold text-neutral-700 sm:text-base">
+          Ulasan dari peserta
+        </h2>
+        <p className="text-xs text-neutral-500">
+          {showingMore
+            ? `${reviews.length} terbaru dari ${total} ulasan`
+            : `${total} ulasan`}
+        </p>
+      </div>
+
+      <ul className="space-y-3">
+        {reviews.map((r) => (
+          <li
+            key={r.id}
+            className="rounded-xl border border-neutral-100 bg-neutral-50/60 px-3 py-3 sm:px-4 sm:py-3.5"
+          >
+            <div className="flex items-start gap-3">
+              {r.user.image ? (
+                <Image
+                  src={r.user.image}
+                  alt=""
+                  width={36}
+                  height={36}
+                  className="h-9 w-9 shrink-0 rounded-full object-cover"
+                />
+              ) : (
+                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary-600 text-xs font-bold text-white">
+                  {r.user.name.charAt(0).toUpperCase()}
+                </div>
+              )}
+
+              <div className="min-w-0 flex-1">
+                <div className="flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5">
+                  <Link
+                    href={`/u/${r.user.id}`}
+                    className="text-xs font-semibold text-neutral-800 hover:text-primary-700 sm:text-sm"
+                  >
+                    {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>
+                </div>
+
+                <p className="text-[11px] text-neutral-500 sm:text-xs">
+                  via{" "}
+                  <Link
+                    href={`/trips/${r.trip.id}`}
+                    className="text-neutral-600 underline-offset-2 hover:text-primary-700 hover:underline"
+                  >
+                    {r.trip.title}
+                  </Link>
+                  <span className="text-neutral-400">
+                    {" "}
+                    · {formatReviewDate(r.createdAt)}
+                  </span>
+                </p>
+
+                {r.comment && (
+                  <p className="mt-2 whitespace-pre-wrap text-xs leading-relaxed text-neutral-700 sm:text-sm">
+                    {r.comment}
+                  </p>
+                )}
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+function formatReviewDate(date: Date): string {
+  return new Date(date).toLocaleDateString("id-ID", {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  });
+}