add trip image

features/trip/components/image-gallery.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import Image from "next/image";
+import { useState } from "react";
+
+interface TripImage {
+  id: string;
+  url: string;
+  caption: string | null;
+}
+
+export function ImageGallery({ images }: { images: TripImage[] }) {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  if (images.length === 0) {
+    return (
+      <div className="flex h-56 items-center justify-center bg-linear-to-br from-primary-800 to-secondary-900 sm:h-72">
+        <span className="text-6xl">🏔️</span>
+      </div>
+    );
+  }
+
+  const activeImage = images[activeIndex];
+
+  return (
+    <div>
+      {/* Main Image */}
+      <div className="relative h-56 bg-neutral-900 sm:h-72">
+        <Image
+          src={activeImage.url}
+          alt={activeImage.caption || "Foto trip"}
+          fill
+          className="object-cover"
+          sizes="(max-width: 768px) 100vw, 768px"
+          priority
+        />
+        {activeImage.caption && (
+          <div className="absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/60 to-transparent px-4 pb-3 pt-8">
+            <p className="text-sm font-medium text-white">
+              {activeImage.caption}
+            </p>
+          </div>
+        )}
+        {/* Counter */}
+        <div className="absolute right-3 top-3 rounded-full bg-black/50 px-2.5 py-1 text-xs font-medium text-white backdrop-blur-sm">
+          {activeIndex + 1} / {images.length}
+        </div>
+      </div>
+
+      {/* Thumbnails */}
+      {images.length > 1 && (
+        <div className="flex gap-1.5 overflow-x-auto bg-neutral-100 p-2">
+          {images.map((img, i) => (
+            <button
+              key={img.id}
+              onClick={() => setActiveIndex(i)}
+              className={`relative h-14 w-20 shrink-0 overflow-hidden rounded-lg transition-all ${
+                i === activeIndex
+                  ? "ring-2 ring-primary-500 ring-offset-1"
+                  : "opacity-60 hover:opacity-100"
+              }`}
+            >
+              <Image
+                src={img.url}
+                alt={img.caption || `Foto ${i + 1}`}
+                fill
+                className="object-cover"
+                sizes="80px"
+              />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

features/trip/components/image-url-input.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useState } from "react";
+
+export function ImageUrlInput() {
+  const [urls, setUrls] = useState<string[]>([""]);
+
+  function addField() {
+    if (urls.length < 5) {
+      setUrls([...urls, ""]);
+    }
+  }
+
+  function removeField(index: number) {
+    setUrls(urls.filter((_, i) => i !== index));
+  }
+
+  function updateField(index: number, value: string) {
+    const updated = [...urls];
+    updated[index] = value;
+    setUrls(updated);
+  }
+
+  return (
+    <div>
+      <label className="mb-2 flex items-center justify-between">
+        <span className="text-sm font-semibold text-neutral-700">
+          Foto Trip (URL)
+        </span>
+        <span className="text-xs text-neutral-400">{urls.length}/5</span>
+      </label>
+      <div className="space-y-2">
+        {urls.map((url, i) => (
+          <div key={i} className="flex gap-2">
+            <input
+              name="imageUrls"
+              type="url"
+              value={url}
+              onChange={(e) => updateField(i, e.target.value)}
+              className="flex-1 rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
+              placeholder={
+                i === 0
+                  ? "URL foto utama (cover)"
+                  : `URL foto ${i + 1} (opsional)`
+              }
+            />
+            {urls.length > 1 && (
+              <button
+                type="button"
+                onClick={() => removeField(i)}
+                className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-neutral-200 text-neutral-400 hover:bg-red-50 hover:text-red-500"
+              >
+                ✕
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+      {urls.length < 5 && (
+        <button
+          type="button"
+          onClick={addField}
+          className="mt-2 flex items-center gap-1 rounded-lg px-2 py-1 text-sm font-medium text-secondary-600 hover:bg-secondary-50"
+        >
+          + Tambah foto
+        </button>
+      )}
+      <p className="mt-1.5 text-xs text-neutral-400">
+        Upload foto ke hosting (imgur, imgbb, dll) lalu paste URL-nya di sini
+      </p>
+    </div>
+  );
+}

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>