120 lines
4.0 KiB
TypeScript
120 lines
4.0 KiB
TypeScript
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 {
|
|
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="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>
|
|
|
|
<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",
|
|
});
|
|
}
|