68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
import Link from "next/link";
|
||
import { tripService } from "@/server/services/trip.service";
|
||
import { TripCard } from "@/features/trip/components/trip-card";
|
||
|
||
export default async function TripsPage() {
|
||
const trips = await tripService.getOpenTrips();
|
||
|
||
return (
|
||
<div className="mx-auto max-w-6xl px-4 py-8">
|
||
<div className="mb-8 flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-neutral-800">
|
||
Open Trip Pendakian
|
||
</h1>
|
||
<p className="mt-1 text-sm text-neutral-500">
|
||
{trips.length} trip tersedia — pilih dan langsung join
|
||
</p>
|
||
</div>
|
||
<Link
|
||
href="/create-trip"
|
||
className="rounded-xl bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-md shadow-primary-600/20 hover:bg-primary-700"
|
||
>
|
||
+ Buat Trip
|
||
</Link>
|
||
</div>
|
||
|
||
{trips.length === 0 ? (
|
||
<div className="rounded-2xl border-2 border-dashed border-neutral-200 bg-white p-14 text-center">
|
||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary-50 text-3xl">
|
||
🏕️
|
||
</div>
|
||
<p className="mb-1 text-lg font-bold text-neutral-800">
|
||
Belum ada trip tersedia
|
||
</p>
|
||
<p className="mb-6 text-sm text-neutral-500">
|
||
Jadilah yang pertama membuat open trip pendakian!
|
||
</p>
|
||
<Link
|
||
href="/create-trip"
|
||
className="inline-block rounded-xl bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary-600/25 hover:bg-primary-700"
|
||
>
|
||
Buat Trip Baru
|
||
</Link>
|
||
</div>
|
||
) : (
|
||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||
{trips.map((trip) => (
|
||
<TripCard
|
||
key={trip.id}
|
||
id={trip.id}
|
||
title={trip.title}
|
||
mountain={trip.mountain}
|
||
location={trip.location}
|
||
date={trip.date}
|
||
price={trip.price}
|
||
maxParticipants={trip.maxParticipants}
|
||
participantCount={trip._count.participants}
|
||
organizerName={trip.organizer.name}
|
||
status={trip.status}
|
||
coverImage={trip.images[0]?.url}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|