auth, trips and join trips
This commit is contained in:
@@ -0,0 +1,110 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { joinTripAction, cancelJoinAction } from "@/features/trip/actions";
|
||||
|
||||
interface JoinTripButtonProps {
|
||||
tripId: string;
|
||||
isLoggedIn: boolean;
|
||||
isOrganizer: boolean;
|
||||
isJoined: boolean;
|
||||
isFull: boolean;
|
||||
tripStatus: string;
|
||||
}
|
||||
|
||||
export function JoinTripButton({
|
||||
tripId,
|
||||
isLoggedIn,
|
||||
isOrganizer,
|
||||
isJoined,
|
||||
isFull,
|
||||
tripStatus,
|
||||
}: JoinTripButtonProps) {
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
if (!isLoggedIn) {
|
||||
return (
|
||||
<Link
|
||||
href="/login"
|
||||
className="block w-full rounded-xl bg-primary-600 py-3 text-center text-sm font-bold text-white shadow-lg shadow-primary-600/20 hover:bg-primary-700"
|
||||
>
|
||||
Login untuk Join Trip
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
if (isOrganizer) {
|
||||
return (
|
||||
<div className="rounded-xl bg-secondary-50 py-3 text-center text-sm font-medium text-secondary-700">
|
||||
Kamu adalah organizer trip ini
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (tripStatus !== "OPEN" && !isJoined) {
|
||||
return (
|
||||
<div className="rounded-xl bg-neutral-100 py-3 text-center text-sm font-medium text-neutral-500">
|
||||
Trip tidak tersedia untuk pendaftaran
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
async function handleJoin() {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
const result = await joinTripAction(tripId);
|
||||
setLoading(false);
|
||||
if (result.error) {
|
||||
setError(result.error);
|
||||
} else {
|
||||
router.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCancel() {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
const result = await cancelJoinAction(tripId);
|
||||
setLoading(false);
|
||||
if (result.error) {
|
||||
setError(result.error);
|
||||
} else {
|
||||
router.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{error && (
|
||||
<div className="mb-3 rounded-xl bg-red-50 px-4 py-3 text-sm font-medium text-red-600">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{isJoined ? (
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
disabled={loading}
|
||||
className="w-full rounded-xl border-2 border-red-200 py-3 text-sm font-bold text-red-600 transition-colors hover:bg-red-50 disabled:opacity-50"
|
||||
>
|
||||
{loading ? "Memproses..." : "Batal Ikut"}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleJoin}
|
||||
disabled={loading || isFull}
|
||||
className="w-full rounded-xl bg-primary-600 py-3 text-sm font-bold text-white shadow-lg shadow-primary-600/20 transition-colors hover:bg-primary-700 disabled:opacity-50"
|
||||
>
|
||||
{loading
|
||||
? "Memproses..."
|
||||
: isFull
|
||||
? "Trip Sudah Penuh"
|
||||
: "Join Trip Sekarang"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
export function SearchBar() {
|
||||
const router = useRouter();
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
function handleSearch(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (query.trim()) {
|
||||
router.push(`/trips?q=${encodeURIComponent(query.trim())}`);
|
||||
} else {
|
||||
router.push("/trips");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSearch} className="mx-auto max-w-xl">
|
||||
<div className="flex overflow-hidden rounded-2xl bg-white/10 ring-1 ring-white/20 backdrop-blur-sm transition-all focus-within:bg-white/15 focus-within:ring-primary-400/50">
|
||||
<input
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Cari gunung, lokasi, atau trip..."
|
||||
className="flex-1 border-none bg-transparent px-5 py-3.5 text-sm text-white outline-none placeholder:text-neutral-400"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-primary-600 px-6 text-sm font-semibold text-white transition-colors hover:bg-primary-500"
|
||||
>
|
||||
Cari
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import Link from "next/link";
|
||||
import { formatRupiah, formatDate } from "@/lib/utils";
|
||||
|
||||
interface TripCardProps {
|
||||
id: string;
|
||||
title: string;
|
||||
mountain: string;
|
||||
location: string;
|
||||
date: Date | string;
|
||||
price: number;
|
||||
maxParticipants: number;
|
||||
participantCount: number;
|
||||
organizerName: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export function TripCard({
|
||||
id,
|
||||
title,
|
||||
mountain,
|
||||
location,
|
||||
date,
|
||||
price,
|
||||
maxParticipants,
|
||||
participantCount,
|
||||
organizerName,
|
||||
status,
|
||||
}: 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>
|
||||
<span
|
||||
className={`rounded-full px-2.5 py-0.5 text-xs font-semibold ${
|
||||
status === "OPEN"
|
||||
? "bg-primary-100 text-primary-700"
|
||||
: status === "FULL"
|
||||
? "bg-amber-100 text-amber-700"
|
||||
: "bg-neutral-100 text-neutral-500"
|
||||
}`}
|
||||
>
|
||||
{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>
|
||||
|
||||
{/* 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>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user