85 lines
2.5 KiB
TypeScript
85 lines
2.5 KiB
TypeScript
import Link from "next/link";
|
|
import { formatRupiah, formatDate } from "@/lib/utils";
|
|
|
|
interface TripCardProps {
|
|
id: string;
|
|
title: string;
|
|
mountain: string;
|
|
location: string;
|
|
date: Date | string;
|
|
price: number;
|
|
maxParticipants: number;
|
|
participantCount: number;
|
|
organizerName: string;
|
|
status: string;
|
|
}
|
|
|
|
export function TripCard({
|
|
id,
|
|
title,
|
|
mountain,
|
|
location,
|
|
date,
|
|
price,
|
|
maxParticipants,
|
|
participantCount,
|
|
organizerName,
|
|
status,
|
|
}: TripCardProps) {
|
|
const spotsLeft = maxParticipants - participantCount;
|
|
|
|
return (
|
|
<Link href={`/trips/${id}`} className="group block">
|
|
<div className="rounded-2xl border border-neutral-200 bg-white p-5 transition-all group-hover:-translate-y-0.5 group-hover:shadow-lg group-hover:shadow-neutral-200/60">
|
|
{/* Header */}
|
|
<div className="mb-3 flex items-start justify-between">
|
|
<div>
|
|
<h3 className="font-bold text-neutral-800 group-hover:text-primary-700">
|
|
{title}
|
|
</h3>
|
|
<p className="mt-0.5 text-sm text-neutral-500">{mountain}</p>
|
|
</div>
|
|
<span
|
|
className={`rounded-full px-2.5 py-0.5 text-xs font-semibold ${
|
|
status === "OPEN"
|
|
? "bg-primary-100 text-primary-700"
|
|
: status === "FULL"
|
|
? "bg-amber-100 text-amber-700"
|
|
: "bg-neutral-100 text-neutral-500"
|
|
}`}
|
|
>
|
|
{status}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Info */}
|
|
<div className="space-y-1.5 text-sm text-neutral-600">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-secondary-500">📍</span> {location}
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-secondary-500">📅</span> {formatDate(date)}
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-secondary-500">👤</span> {organizerName}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="mt-4 flex items-center justify-between border-t border-neutral-100 pt-3">
|
|
<span className="text-lg font-bold text-primary-600">
|
|
{formatRupiah(price)}
|
|
</span>
|
|
<span
|
|
className={`text-xs font-semibold ${
|
|
spotsLeft > 0 ? "text-secondary-600" : "text-amber-600"
|
|
}`}
|
|
>
|
|
{spotsLeft > 0 ? `${spotsLeft} slot tersisa` : "Penuh"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|