general category trip

features/trip/components/trip-card.tsx

@@ -2,11 +2,14 @@ import Image from "next/image";
 import Link from "next/link";
 import { formatRupiah } from "@/lib/utils";
 import { formatTripCalendarDateRangeLong } from "@/lib/trip-dates";
+import { categoryMeta } from "@/lib/activity-category";
+import type { ActivityCategory } from "@/app/generated/prisma/enums";
 
 interface TripCardProps {
   id: string;
   title: string;
-  mountain: string;
+  category: ActivityCategory;
+  destination: string;
   location: string;
   date: Date | string;
   endDate?: Date | string | null;
@@ -23,7 +26,8 @@ interface TripCardProps {
 export function TripCard({
   id,
   title,
-  mountain,
+  category,
+  destination,
   location,
   date,
   endDate,
@@ -38,6 +42,7 @@ export function TripCard({
 }: TripCardProps) {
   const spotsLeft = maxParticipants - participantCount;
   const isSmallGroup = maxParticipants <= 10;
+  const meta = categoryMeta(category);
 
   return (
     <Link href={`/trips/${id}`} className="group block">
@@ -55,9 +60,16 @@ export function TripCard({
             />
           ) : (
             <div className="flex h-full items-center justify-center bg-linear-to-br from-primary-800 to-secondary-900">
-              <span className="text-4xl">🏔️</span>
+              <span className="text-4xl">{meta.icon}</span>
             </div>
           )}
+          <span
+            className="absolute left-3 top-3 inline-flex items-center gap-1 rounded-full bg-white/90 px-2 py-0.5 text-[11px] font-semibold text-neutral-700 shadow-sm backdrop-blur-sm"
+            title={`Kategori: ${meta.label}`}
+          >
+            <span>{meta.icon}</span>
+            <span>{meta.label}</span>
+          </span>
           <span
             className={`absolute right-3 top-3 rounded-full px-2.5 py-0.5 text-xs font-bold backdrop-blur-sm ${
               status === "OPEN"
@@ -76,7 +88,7 @@ export function TripCard({
           <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>
+          <p className="mt-0.5 text-sm text-neutral-500">{destination}</p>
 
           <div className="mt-3 space-y-1 text-sm text-neutral-600">
             <div className="flex items-center gap-1.5">