auth, trips and join trips

2026-04-16 14:51:54 +07:00
parent de0d1c5413
commit 237caad488
49 changed files with 11343 additions and 334 deletions
@@ -0,0 +1,84 @@
+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>
+  );
+}