add user profile, profile vibe and trip vibe and social signal

features/trip/components/create-trip-form.tsx

@@ -11,7 +11,8 @@ import {
   ACTIVITY_CATEGORIES,
   categoryMeta,
 } from "@/lib/activity-category";
-import type { ActivityCategory } from "@/app/generated/prisma/enums";
+import { VIBES, vibeMeta } from "@/lib/vibe";
+import type { ActivityCategory, Vibe } from "@/app/generated/prisma/enums";
 
 function formatRupiahInput(value: string): string {
   const num = value.replace(/\D/g, "");
@@ -32,6 +33,7 @@ export function CreateTripForm({ isVerifiedOrganizer }: CreateTripFormProps) {
   const [loading, setLoading] = useState(false);
 
   const [category, setCategory] = useState<ActivityCategory>("HIKING");
+  const [vibe, setVibe] = useState<Vibe | null>(null);
   const [startDate, setStartDate] = useState<Date | null>(null);
   const [endDate, setEndDate] = useState<Date | null>(null);
   const [priceDisplay, setPriceDisplay] = useState("");
@@ -62,6 +64,7 @@ export function CreateTripForm({ isVerifiedOrganizer }: CreateTripFormProps) {
       }
     }
     formData.set("price", parseRupiahInput(priceDisplay));
+    if (vibe) formData.set("vibe", vibe);
 
     const result = await createTripAction(formData);
 
@@ -124,6 +127,57 @@ export function CreateTripForm({ isVerifiedOrganizer }: CreateTripFormProps) {
           <input type="hidden" name="category" value={category} />
         </div>
 
+        {/* Vibe Chips */}
+        <div className="rounded-xl bg-secondary-50 p-4">
+          <label className="mb-1 block text-sm font-bold text-secondary-900">
+            Vibe Trip{" "}
+            <span className="text-xs font-normal text-secondary-700">(opsional)</span>
+          </label>
+          <p className="mb-2 text-[11px] text-secondary-700/80">
+            Bantu calon peserta menilai apakah ritmenya cocok dengan mereka.
+          </p>
+          <div className="flex flex-wrap gap-2">
+            <button
+              type="button"
+              onClick={() => setVibe(null)}
+              aria-pressed={vibe === null}
+              className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${
+                vibe === null
+                  ? "border-neutral-700 bg-neutral-800 text-white"
+                  : "border-secondary-200 bg-white text-secondary-800 hover:bg-secondary-100"
+              }`}
+            >
+              Belum diisi
+            </button>
+            {VIBES.map((v) => {
+              const m = vibeMeta(v);
+              const active = v === vibe;
+              return (
+                <button
+                  key={v}
+                  type="button"
+                  onClick={() => setVibe(v)}
+                  aria-pressed={active}
+                  title={m.description}
+                  className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${
+                    active
+                      ? "border-secondary-600 bg-secondary-600 text-white"
+                      : "border-secondary-200 bg-white text-secondary-800 hover:bg-secondary-100"
+                  }`}
+                >
+                  <span aria-hidden>{m.icon}</span>
+                  <span>{m.label}</span>
+                </button>
+              );
+            })}
+          </div>
+          {vibe && (
+            <p className="mt-2 text-[11px] italic text-secondary-700/80">
+              {vibeMeta(vibe).description}
+            </p>
+          )}
+        </div>
+
         <div>
           <label htmlFor="title" className="mb-1.5 block text-sm font-semibold text-neutral-700">
             Judul Trip