add trip image

2026-04-16 16:26:29 +07:00
parent 237caad488
commit d0480df31a
43 changed files with 2334 additions and 214 deletions
@@ -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>
+  );
+}