68 lines
2.5 KiB
TypeScript
68 lines
2.5 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-6 sm:py-8">
|
||
<div className="mb-6 flex flex-col gap-3 sm:mb-8 sm:flex-row sm:items-center sm:justify-between">
|
||
<div>
|
||
<h1 className="text-xl font-bold text-neutral-800 sm:text-2xl">
|
||
Open Trip Pendakian
|
||
</h1>
|
||
<p className="mt-0.5 text-sm text-neutral-500">
|
||
{trips.length} trip tersedia — pilih dan langsung join
|
||
</p>
|
||
</div>
|
||
<Link
|
||
href="/create-trip"
|
||
className="w-full rounded-xl bg-primary-600 px-4 py-2.5 text-center text-sm font-semibold text-white shadow-md shadow-primary-600/20 hover:bg-primary-700 sm:w-auto"
|
||
>
|
||
+ Buat Trip
|
||
</Link>
|
||
</div>
|
||
|
||
{trips.length === 0 ? (
|
||
<div className="rounded-2xl border-2 border-dashed border-neutral-200 bg-white p-8 text-center sm:p-14">
|
||
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary-50 text-2xl sm:h-16 sm:w-16 sm:text-3xl">
|
||
🏕️
|
||
</div>
|
||
<p className="mb-1 text-base font-bold text-neutral-800 sm:text-lg">
|
||
Belum ada trip tersedia
|
||
</p>
|
||
<p className="mb-5 text-sm text-neutral-500 sm:mb-6">
|
||
Jadilah yang pertama membuat open trip pendakian!
|
||
</p>
|
||
<Link
|
||
href="/create-trip"
|
||
className="inline-block rounded-xl bg-primary-600 px-5 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>
|
||
);
|
||
}
|