add trip image

features/trip/components/trip-card.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Link from "next/link";
 import { formatRupiah, formatDate } from "@/lib/utils";
 
@@ -12,6 +13,8 @@ interface TripCardProps {
   participantCount: number;
   organizerName: string;
   status: string;
+  coverImage?: string | null;
+  priority?: boolean;
 }
 
 export function TripCard({
@@ -25,58 +28,76 @@ export function TripCard({
   participantCount,
   organizerName,
   status,
+  coverImage,
+  priority,
 }: 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>
+      <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={`rounded-full px-2.5 py-0.5 text-xs font-semibold ${
+            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-100 text-primary-700"
+                ? "bg-primary-600/80 text-white"
                 : status === "FULL"
-                ? "bg-amber-100 text-amber-700"
-                : "bg-neutral-100 text-neutral-500"
+                ? "bg-amber-500/80 text-white"
+                : "bg-neutral-600/80 text-neutral-200"
             }`}
           >
             {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>
+        {/* 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>
 
-        {/* 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 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>{" "}
+              {formatDate(date)}
+            </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>