arifal
108 lines
3.4 KiB
TypeScript
108 lines
3.4 KiB
TypeScript
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import { formatRupiah, formatDateRange } from "@/lib/utils";
|
||
|
||
interface TripCardProps {
|
||
id: string;
|
||
title: string;
|
||
mountain: string;
|
||
location: string;
|
||
date: Date | string;
|
||
endDate?: Date | string | null;
|
||
price: number;
|
||
maxParticipants: number;
|
||
participantCount: number;
|
||
organizerName: string;
|
||
status: string;
|
||
coverImage?: string | null;
|
||
priority?: boolean;
|
||
}
|
||
|
||
export function TripCard({
|
||
id,
|
||
title,
|
||
mountain,
|
||
location,
|
||
date,
|
||
endDate,
|
||
price,
|
||
maxParticipants,
|
||
participantCount,
|
||
organizerName,
|
||
status,
|
||
coverImage,
|
||
priority,
|
||
}: TripCardProps) {
|
||
const spotsLeft = maxParticipants - participantCount;
|
||
|
||
return (
|
||
<Link href={`/trips/${id}`} className="group block">
|
||
<div className="overflow-hidden rounded-2xl border border-neutral-200 bg-white transition-all group-hover:-translate-y-0.5 group-hover:shadow-lg group-hover:shadow-neutral-200/60">
|
||
{/* Cover Image */}
|
||
<div className="relative h-40 bg-neutral-800">
|
||
{coverImage ? (
|
||
<Image
|
||
src={coverImage}
|
||
alt={title}
|
||
fill
|
||
className="object-cover transition-transform group-hover:scale-105"
|
||
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
||
priority={priority}
|
||
/>
|
||
) : (
|
||
<div className="flex h-full items-center justify-center bg-linear-to-br from-primary-800 to-secondary-900">
|
||
<span className="text-4xl">🏔️</span>
|
||
</div>
|
||
)}
|
||
<span
|
||
className={`absolute right-3 top-3 rounded-full px-2.5 py-0.5 text-xs font-bold backdrop-blur-sm ${
|
||
status === "OPEN"
|
||
? "bg-primary-600/80 text-white"
|
||
: status === "FULL"
|
||
? "bg-amber-500/80 text-white"
|
||
: "bg-neutral-600/80 text-neutral-200"
|
||
}`}
|
||
>
|
||
{status}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div className="p-4">
|
||
<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 className="mt-3 space-y-1 text-sm text-neutral-600">
|
||
<div className="flex items-center gap-1.5">
|
||
<span className="text-xs text-secondary-500">📍</span> {location}
|
||
</div>
|
||
<div className="flex items-center gap-1.5">
|
||
<span className="text-xs text-secondary-500">📅</span>{" "}
|
||
{formatDateRange(date, endDate)}
|
||
</div>
|
||
<div className="flex items-center gap-1.5">
|
||
<span className="text-xs text-secondary-500">👤</span>{" "}
|
||
{organizerName}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-3 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>
|
||
</div>
|
||
</Link>
|
||
);
|
||
}
|