arifal/setrip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add responsive mobile tablet laptop and desktop

Browse Source
This commit is contained in:
arifal
2026-04-16 16:49:32 +07:00
parent d0480df31a
commit 82c1da9951
9 changed files with 195 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/create-trip/page.tsx
+3 -3
View File
@@ -80,8 +80,8 @@ export default function CreateTripPage() {
} }
return ( return (
<div className="mx-auto max-w-2xl px-4 py-8"> <div className="mx-auto max-w-2xl px-4 py-6 sm:py-8">
<div className="mb-6"> <div className="mb-4 sm:mb-6">
<h1 className="text-2xl font-bold text-neutral-800">Buat Trip Baru</h1> <h1 className="text-2xl font-bold text-neutral-800">Buat Trip Baru</h1>
<p className="mt-1 text-sm text-neutral-500"> <p className="mt-1 text-sm text-neutral-500">
Ajak teman baru naik gunung bareng! Ajak teman baru naik gunung bareng!
@@ -175,7 +175,7 @@ export default function CreateTripPage() {
<ImageUrlInput /> <ImageUrlInput />
<div className="grid gap-4 sm:grid-cols-3"> <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-4">
<div> <div>
<label htmlFor="date" className="mb-1.5 block text-sm font-semibold text-neutral-700"> <label htmlFor="date" className="mb-1.5 block text-sm font-semibold text-neutral-700">
Tanggal Tanggal
app/login/page.tsx
+2 -2
View File
@@ -36,10 +36,10 @@ export default function LoginPage() {
} }
return ( return (
<div className="flex min-h-[calc(100vh-3.5rem)] items-center justify-center px-4 py-12"> <div className="flex min-h-[calc(100vh-3.5rem)] items-center justify-center px-4 py-8 sm:py-12">
<div className="w-full max-w-sm"> <div className="w-full max-w-sm">
{/* Header */} {/* Header */}
<div className="mb-8 text-center"> <div className="mb-6 text-center sm:mb-8">
<Link href="/" className="mb-4 inline-block text-2xl font-bold text-neutral-800"> <Link href="/" className="mb-4 inline-block text-2xl font-bold text-neutral-800">
Se<span className="text-primary-600">Trip</span> Se<span className="text-primary-600">Trip</span>
</Link> </Link>
app/page.tsx
+41 -42
View File
@@ -17,27 +17,26 @@ export default async function HomePage() {
<div className="relative min-h-screen bg-neutral-50"> <div className="relative min-h-screen bg-neutral-50">
{/* ========== HERO ========== */} {/* ========== HERO ========== */}
<section className="relative overflow-hidden bg-neutral-900"> <section className="relative overflow-hidden bg-neutral-900">
{/* Gradient overlay */}
<div className="absolute inset-0 bg-linear-to-br from-primary-900/90 via-neutral-900/80 to-secondary-900/70" /> <div className="absolute inset-0 bg-linear-to-br from-primary-900/90 via-neutral-900/80 to-secondary-900/70" />
<div className="relative mx-auto max-w-4xl px-4 pb-16 pt-14 text-center"> <div className="relative mx-auto max-w-4xl px-4 pb-10 pt-8 text-center sm:pb-14 sm:pt-12 lg:pb-16 lg:pt-14">
{/* Brand */} {/* Brand badge */}
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-primary-400/30 bg-primary-600/20 px-4 py-1.5"> <div className="mb-4 inline-flex items-center gap-1.5 rounded-full border border-primary-400/30 bg-primary-600/20 px-3 py-1 sm:mb-6 sm:gap-2 sm:px-4 sm:py-1.5">
<span className="text-sm">🏔️</span> <span className="text-xs sm:text-sm">🏔️</span>
<span className="text-sm font-medium text-primary-300"> <span className="text-xs font-medium text-primary-300 sm:text-sm">
Open Trip Pendakian Gunung Open Trip Pendakian Gunung
</span> </span>
</div> </div>
<h1 className="mb-4 text-4xl font-extrabold leading-tight tracking-tight text-white sm:text-5xl"> <h1 className="mb-3 text-3xl font-extrabold leading-tight tracking-tight text-white sm:mb-4 sm:text-4xl lg:text-5xl">
Se<span className="text-primary-400">Trip</span> Se<span className="text-primary-400">Trip</span>
</h1> </h1>
<p className="mx-auto mb-3 max-w-lg text-lg font-medium text-neutral-300"> <p className="mx-auto mb-2 max-w-sm text-base font-medium text-neutral-300 sm:mb-3 sm:max-w-lg sm:text-lg">
Masa cowok sejati, cewek seimut nggak{" "} Masa cowok sejati, cewek seimut nggak{" "}
<span className="text-primary-400">SeTrip</span> bareng? <span className="text-primary-400">SeTrip</span> bareng?
</p> </p>
<p className="mx-auto mb-8 max-w-md text-neutral-400"> <p className="mx-auto mb-6 max-w-xs text-sm text-neutral-400 sm:mb-8 sm:max-w-md sm:text-base">
Yuk mulai dari sini. Cari open trip pendakian, gabung bareng, nikmati Yuk mulai dari sini. Cari open trip pendakian, gabung bareng, nikmati
petualangan ke gunung-gunung Jawa Barat. petualangan ke gunung-gunung Jawa Barat.
</p> </p>
@@ -45,41 +44,41 @@ export default async function HomePage() {
<SearchBar /> <SearchBar />
{/* Stats */} {/* Stats */}
<div className="mt-10 flex justify-center gap-8 sm:gap-12"> <div className="mt-8 flex justify-center gap-6 sm:mt-10 sm:gap-10 lg:gap-12">
<div> <div>
<p className="text-2xl font-bold text-primary-400"> <p className="text-xl font-bold text-primary-400 sm:text-2xl">
{trips.length} {trips.length}
</p> </p>
<p className="text-xs text-neutral-400">Trip Tersedia</p> <p className="text-[11px] text-neutral-400 sm:text-xs">Trip Tersedia</p>
</div> </div>
<div className="h-10 w-px bg-neutral-700" /> <div className="h-8 w-px bg-neutral-700 sm:h-10" />
<div> <div>
<p className="text-2xl font-bold text-secondary-400">8</p> <p className="text-xl font-bold text-secondary-400 sm:text-2xl">8</p>
<p className="text-xs text-neutral-400">Gunung Jabar</p> <p className="text-[11px] text-neutral-400 sm:text-xs">Gunung Jabar</p>
</div> </div>
<div className="h-10 w-px bg-neutral-700" /> <div className="h-8 w-px bg-neutral-700 sm:h-10" />
<div> <div>
<p className="text-2xl font-bold text-white">100%</p> <p className="text-xl font-bold text-white sm:text-2xl">100%</p>
<p className="text-xs text-neutral-400">Seru</p> <p className="text-[11px] text-neutral-400 sm:text-xs">Seru</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{/* ========== CONTENT ========== */} {/* ========== CONTENT ========== */}
<div className="mx-auto max-w-6xl px-4 py-10 space-y-12"> <div className="mx-auto max-w-6xl px-4 py-6 space-y-8 sm:py-8 sm:space-y-10 lg:py-10 lg:space-y-12">
{/* Trip Terdekat */} {/* Trip Terdekat */}
{upcomingTrips.length > 0 && ( {upcomingTrips.length > 0 && (
<section> <section>
<div className="mb-5 flex items-center gap-3"> <div className="mb-4 flex items-center gap-3 sm:mb-5">
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary-100 text-lg"> <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary-100 text-base sm:h-9 sm:w-9 sm:text-lg">
🔥 🔥
</div> </div>
<div> <div>
<h2 className="text-lg font-bold text-neutral-800"> <h2 className="text-base font-bold text-neutral-800 sm:text-lg">
Trip Terdekat Trip Terdekat
</h2> </h2>
<p className="text-xs text-neutral-500"> <p className="text-[11px] text-neutral-500 sm:text-xs">
Berangkat dalam 7 hari ke depan Berangkat dalam 7 hari ke depan
</p> </p>
</div> </div>
@@ -108,42 +107,42 @@ export default async function HomePage() {
{/* Open Trip */} {/* Open Trip */}
<section> <section>
<div className="mb-5 flex items-center justify-between"> <div className="mb-4 flex items-center justify-between sm:mb-5">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-secondary-100 text-lg"> <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-secondary-100 text-base sm:h-9 sm:w-9 sm:text-lg">
🏔️ 🏔️
</div> </div>
<div> <div>
<h2 className="text-lg font-bold text-neutral-800"> <h2 className="text-base font-bold text-neutral-800 sm:text-lg">
Open Trip Open Trip
</h2> </h2>
<p className="text-xs text-neutral-500"> <p className="hidden text-xs text-neutral-500 sm:block">
Pendakian gunung bareng teman baru Pendakian gunung bareng teman baru
</p> </p>
</div> </div>
</div> </div>
<Link <Link
href="/trips" href="/trips"
className="rounded-lg bg-secondary-50 px-3 py-1.5 text-sm font-medium text-secondary-600 hover:bg-secondary-100" className="rounded-lg bg-secondary-50 px-2.5 py-1 text-xs font-medium text-secondary-600 hover:bg-secondary-100 sm:px-3 sm:py-1.5 sm:text-sm"
> >
Lihat semua Lihat semua
</Link> </Link>
</div> </div>
{latestTrips.length === 0 ? ( {latestTrips.length === 0 ? (
<div className="rounded-2xl border-2 border-dashed border-neutral-200 bg-white p-14 text-center"> <div className="rounded-2xl border-2 border-dashed border-neutral-200 bg-white p-8 text-center sm:p-14">
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary-50 text-3xl"> <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary-50 text-2xl sm:h-16 sm:w-16 sm:text-3xl">
🏕️ 🏕️
</div> </div>
<p className="mb-1 text-lg font-bold text-neutral-800"> <p className="mb-1 text-base font-bold text-neutral-800 sm:text-lg">
Belum ada trip tersedia Belum ada trip tersedia
</p> </p>
<p className="mb-6 text-sm text-neutral-500"> <p className="mb-5 text-sm text-neutral-500 sm:mb-6">
Jadilah yang pertama buat open trip pendakian! Jadilah yang pertama buat open trip pendakian!
</p> </p>
<Link <Link
href="/create-trip" href="/create-trip"
className="inline-block rounded-xl bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary-600/25 hover:bg-primary-700" className="inline-block rounded-xl bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary-600/25 hover:bg-primary-700"
> >
+ Buat Trip Baru + Buat Trip Baru
</Link> </Link>
@@ -173,15 +172,15 @@ export default async function HomePage() {
{/* Budget Friendly */} {/* Budget Friendly */}
{budgetTrips.length > 0 && ( {budgetTrips.length > 0 && (
<section> <section>
<div className="mb-5 flex items-center gap-3"> <div className="mb-4 flex items-center gap-3 sm:mb-5">
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary-100 text-lg"> <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary-100 text-base sm:h-9 sm:w-9 sm:text-lg">
💸 💸
</div> </div>
<div> <div>
<h2 className="text-lg font-bold text-neutral-800"> <h2 className="text-base font-bold text-neutral-800 sm:text-lg">
Budget Friendly Budget Friendly
</h2> </h2>
<p className="text-xs text-neutral-500"> <p className="text-[11px] text-neutral-500 sm:text-xs">
Trip di bawah Rp 300.000 Trip di bawah Rp 300.000
</p> </p>
</div> </div>
@@ -208,15 +207,15 @@ export default async function HomePage() {
)} )}
{/* CTA Bottom */} {/* CTA Bottom */}
<section className="overflow-hidden rounded-2xl bg-neutral-800 p-8 text-center sm:p-12"> <section className="overflow-hidden rounded-2xl bg-neutral-800 p-6 text-center sm:p-8 lg:p-12">
<h2 className="mb-2 text-2xl font-bold text-white"> <h2 className="mb-2 text-xl font-bold text-white sm:text-2xl">
Siap naik gunung? Siap naik gunung?
</h2> </h2>
<p className="mx-auto mb-6 max-w-sm text-neutral-400"> <p className="mx-auto mb-5 max-w-xs text-sm text-neutral-400 sm:mb-6 sm:max-w-sm sm:text-base">
Buat trip sendiri atau gabung trip yang sudah ada. Seru bareng teman Buat trip sendiri atau gabung trip yang sudah ada. Seru bareng teman
baru! baru!
</p> </p>
<div className="flex justify-center gap-3"> <div className="flex flex-col justify-center gap-2 sm:flex-row sm:gap-3">
<Link <Link
href="/create-trip" href="/create-trip"
className="rounded-xl bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary-600/25 hover:bg-primary-500" className="rounded-xl bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary-600/25 hover:bg-primary-500"
@@ -236,7 +235,7 @@ export default async function HomePage() {
{/* ========== FAB ========== */} {/* ========== FAB ========== */}
<Link <Link
href="/create-trip" href="/create-trip"
className="fixed bottom-6 right-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-primary-600 text-2xl font-bold text-white shadow-xl shadow-primary-600/30 transition-all hover:scale-110 hover:bg-primary-500 active:scale-95" className="fixed bottom-4 right-4 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-primary-600 text-xl font-bold text-white shadow-xl shadow-primary-600/30 transition-all hover:scale-110 hover:bg-primary-500 active:scale-95 sm:bottom-6 sm:right-6 sm:h-14 sm:w-14 sm:text-2xl"
title="Buat Trip" title="Buat Trip"
> >
+ +
app/register/page.tsx
+2 -2
View File
@@ -42,10 +42,10 @@ export default function RegisterPage() {
} }
return ( return (
<div className="flex min-h-[calc(100vh-3.5rem)] items-center justify-center px-4 py-12"> <div className="flex min-h-[calc(100vh-3.5rem)] items-center justify-center px-4 py-8 sm:py-12">
<div className="w-full max-w-sm"> <div className="w-full max-w-sm">
{/* Header */} {/* Header */}
<div className="mb-8 text-center"> <div className="mb-6 text-center sm:mb-8">
<Link href="/" className="mb-4 inline-block text-2xl font-bold text-neutral-800"> <Link href="/" className="mb-4 inline-block text-2xl font-bold text-neutral-800">
Se<span className="text-primary-600">Trip</span> Se<span className="text-primary-600">Trip</span>
</Link> </Link>
app/trips/[id]/page.tsx
+43 -45
View File
@@ -39,14 +39,14 @@ export default async function TripDetailPage({
: null; : null;
return ( return (
<div className="mx-auto max-w-3xl px-4 py-8"> <div className="mx-auto max-w-3xl px-4 py-4 sm:py-8">
{/* Breadcrumb */} {/* Breadcrumb */}
<div className="mb-4 flex items-center gap-2 text-sm text-neutral-500"> <div className="mb-3 flex items-center gap-2 text-xs text-neutral-500 sm:mb-4 sm:text-sm">
<Link href="/trips" className="hover:text-primary-600"> <Link href="/trips" className="hover:text-primary-600">
Open Trip Open Trip
</Link> </Link>
<span>/</span> <span>/</span>
<span className="text-neutral-700">{trip.mountain}</span> <span className="truncate text-neutral-700">{trip.mountain}</span>
</div> </div>
<div className="overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-sm"> <div className="overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-sm">
@@ -54,10 +54,10 @@ export default async function TripDetailPage({
<ImageGallery images={trip.images} /> <ImageGallery images={trip.images} />
{/* Title bar */} {/* Title bar */}
<div className="border-b border-neutral-100 px-6 py-4"> <div className="border-b border-neutral-100 px-4 py-3 sm:px-6 sm:py-4">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between gap-2">
<div> <div className="min-w-0">
<h1 className="text-xl font-bold text-neutral-800"> <h1 className="text-lg font-bold text-neutral-800 sm:text-xl">
{trip.title} {trip.title}
</h1> </h1>
<p className="mt-0.5 flex items-center gap-1.5 text-sm text-neutral-500"> <p className="mt-0.5 flex items-center gap-1.5 text-sm text-neutral-500">
@@ -65,7 +65,7 @@ export default async function TripDetailPage({
</p> </p>
</div> </div>
<span <span
className={`rounded-full px-3 py-1 text-xs font-bold ${ className={`shrink-0 rounded-full px-2.5 py-0.5 text-xs font-bold sm:px-3 sm:py-1 ${
trip.status === "OPEN" trip.status === "OPEN"
? "bg-primary-100 text-primary-700" ? "bg-primary-100 text-primary-700"
: trip.status === "FULL" : trip.status === "FULL"
@@ -78,52 +78,50 @@ export default async function TripDetailPage({
</div> </div>
</div> </div>
<div className="space-y-6 p-6"> <div className="space-y-5 p-4 sm:space-y-6 sm:p-6">
{/* Info Grid */} {/* Info Grid */}
<div className="grid gap-3 sm:grid-cols-2"> <div className="grid grid-cols-2 gap-2 sm:gap-3">
<div className="flex items-center gap-3 rounded-xl bg-neutral-50 p-4"> <div className="flex items-center gap-2 rounded-xl bg-neutral-50 p-3 sm:gap-3 sm:p-4">
<span className="flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-100 text-lg"> <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-secondary-100 text-sm sm:h-10 sm:w-10 sm:text-lg">
📍 📍
</span> </span>
<div> <div className="min-w-0">
<p className="text-xs font-medium text-neutral-400">Lokasi</p> <p className="text-[10px] font-medium text-neutral-400 sm:text-xs">Lokasi</p>
<p className="font-semibold text-neutral-800">{trip.location}</p> <p className="truncate text-xs font-semibold text-neutral-800 sm:text-sm">{trip.location}</p>
</div> </div>
</div> </div>
<div className="flex items-center gap-3 rounded-xl bg-neutral-50 p-4"> <div className="flex items-center gap-2 rounded-xl bg-neutral-50 p-3 sm:gap-3 sm:p-4">
<span className="flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-100 text-lg"> <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-secondary-100 text-sm sm:h-10 sm:w-10 sm:text-lg">
📅 📅
</span> </span>
<div> <div className="min-w-0">
<p className="text-xs font-medium text-neutral-400">Tanggal</p> <p className="text-[10px] font-medium text-neutral-400 sm:text-xs">Tanggal</p>
<p className="font-semibold text-neutral-800"> <p className="truncate text-xs font-semibold text-neutral-800 sm:text-sm">
{formatDate(trip.date)} {formatDate(trip.date)}
</p> </p>
</div> </div>
</div> </div>
<div className="flex items-center gap-3 rounded-xl bg-primary-50 p-4"> <div className="flex items-center gap-2 rounded-xl bg-primary-50 p-3 sm:gap-3 sm:p-4">
<span className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-lg"> <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary-100 text-sm sm:h-10 sm:w-10 sm:text-lg">
💰 💰
</span> </span>
<div> <div className="min-w-0">
<p className="text-xs font-medium text-primary-600">Harga</p> <p className="text-[10px] font-medium text-primary-600 sm:text-xs">Harga</p>
<p className="text-xl font-bold text-primary-700"> <p className="text-base font-bold text-primary-700 sm:text-xl">
{formatRupiah(trip.price)} {formatRupiah(trip.price)}
</p> </p>
</div> </div>
</div> </div>
<div className="flex items-center gap-3 rounded-xl bg-neutral-50 p-4"> <div className="flex items-center gap-2 rounded-xl bg-neutral-50 p-3 sm:gap-3 sm:p-4">
<span className="flex h-10 w-10 items-center justify-center rounded-lg bg-neutral-200 text-lg"> <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-neutral-200 text-sm sm:h-10 sm:w-10 sm:text-lg">
👤 👤
</span> </span>
<div> <div className="min-w-0">
<p className="text-xs font-medium text-neutral-400"> <p className="text-[10px] font-medium text-neutral-400 sm:text-xs">Organizer</p>
Organizer <p className="truncate text-xs font-semibold text-neutral-800 sm:text-sm">
</p>
<p className="font-semibold text-neutral-800">
{trip.organizer.name} {trip.organizer.name}
</p> </p>
</div> </div>
@@ -131,19 +129,19 @@ export default async function TripDetailPage({
</div> </div>
{/* Participant Progress */} {/* Participant Progress */}
<div className="rounded-xl border border-neutral-200 p-4"> <div className="rounded-xl border border-neutral-200 p-3 sm:p-4">
<div className="mb-2 flex items-center justify-between"> <div className="mb-2 flex items-center justify-between">
<span className="text-sm font-semibold text-neutral-700"> <span className="text-xs font-semibold text-neutral-700 sm:text-sm">
Peserta Peserta
</span> </span>
<span className="text-sm font-bold text-neutral-800"> <span className="text-xs font-bold text-neutral-800 sm:text-sm">
{participantCount}{" "} {participantCount}{" "}
<span className="font-normal text-neutral-400"> <span className="font-normal text-neutral-400">
/ {trip.maxParticipants} / {trip.maxParticipants}
</span> </span>
</span> </span>
</div> </div>
<div className="h-2.5 overflow-hidden rounded-full bg-neutral-100"> <div className="h-2 overflow-hidden rounded-full bg-neutral-100 sm:h-2.5">
<div <div
className={`h-full rounded-full transition-all ${ className={`h-full rounded-full transition-all ${
fillPercent >= 100 fillPercent >= 100
@@ -155,7 +153,7 @@ export default async function TripDetailPage({
style={{ width: `${fillPercent}%` }} style={{ width: `${fillPercent}%` }}
/> />
</div> </div>
<p className="mt-1.5 text-xs text-neutral-500"> <p className="mt-1.5 text-[11px] text-neutral-500 sm:text-xs">
{spotsLeft > 0 {spotsLeft > 0
? `${spotsLeft} slot tersisa — yuk gabung!` ? `${spotsLeft} slot tersisa — yuk gabung!`
: "Trip sudah penuh"} : "Trip sudah penuh"}
@@ -165,10 +163,10 @@ export default async function TripDetailPage({
{/* Description */} {/* Description */}
{trip.description && ( {trip.description && (
<div> <div>
<h2 className="mb-2 text-sm font-bold text-neutral-700"> <h2 className="mb-2 text-xs font-bold text-neutral-700 sm:text-sm">
Deskripsi Trip Deskripsi Trip
</h2> </h2>
<p className="whitespace-pre-wrap text-sm leading-relaxed text-neutral-600"> <p className="whitespace-pre-wrap text-xs leading-relaxed text-neutral-600 sm:text-sm">
{trip.description} {trip.description}
</p> </p>
</div> </div>
@@ -186,24 +184,24 @@ export default async function TripDetailPage({
{/* Participants List */} {/* Participants List */}
<div> <div>
<h2 className="mb-3 text-sm font-bold text-neutral-700"> <h2 className="mb-3 text-xs font-bold text-neutral-700 sm:text-sm">
Peserta ({participantCount}) Peserta ({participantCount})
</h2> </h2>
{participantCount === 0 ? ( {participantCount === 0 ? (
<p className="text-sm text-neutral-400"> <p className="text-xs text-neutral-400 sm:text-sm">
Belum ada peserta. Jadilah yang pertama! 🎒 Belum ada peserta. Jadilah yang pertama! 🎒
</p> </p>
) : ( ) : (
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-1.5 sm:gap-2">
{activeParticipants.map((p) => ( {activeParticipants.map((p) => (
<div <div
key={p.id} key={p.id}
className="flex items-center gap-2 rounded-full bg-neutral-100 px-3 py-1.5" className="flex items-center gap-1.5 rounded-full bg-neutral-100 px-2.5 py-1 sm:gap-2 sm:px-3 sm:py-1.5"
> >
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary-600 text-[10px] font-bold text-white"> <div className="flex h-5 w-5 items-center justify-center rounded-full bg-primary-600 text-[9px] font-bold text-white sm:h-6 sm:w-6 sm:text-[10px]">
{p.user.name.charAt(0).toUpperCase()} {p.user.name.charAt(0).toUpperCase()}
</div> </div>
<span className="text-sm font-medium text-neutral-700"> <span className="text-xs font-medium text-neutral-700 sm:text-sm">
{p.user.name} {p.user.name}
</span> </span>
</div> </div>
app/trips/page.tsx
+10 -10
View File
@@ -6,38 +6,38 @@ export default async function TripsPage() {
const trips = await tripService.getOpenTrips(); const trips = await tripService.getOpenTrips();
return ( return (
<div className="mx-auto max-w-6xl px-4 py-8"> <div className="mx-auto max-w-6xl px-4 py-6 sm:py-8">
<div className="mb-8 flex items-center justify-between"> <div className="mb-6 flex flex-col gap-3 sm:mb-8 sm:flex-row sm:items-center sm:justify-between">
<div> <div>
<h1 className="text-2xl font-bold text-neutral-800"> <h1 className="text-xl font-bold text-neutral-800 sm:text-2xl">
Open Trip Pendakian Open Trip Pendakian
</h1> </h1>
<p className="mt-1 text-sm text-neutral-500"> <p className="mt-0.5 text-sm text-neutral-500">
{trips.length} trip tersedia — pilih dan langsung join {trips.length} trip tersedia — pilih dan langsung join
</p> </p>
</div> </div>
<Link <Link
href="/create-trip" href="/create-trip"
className="rounded-xl bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-md shadow-primary-600/20 hover:bg-primary-700" className="w-full rounded-xl bg-primary-600 px-4 py-2.5 text-center text-sm font-semibold text-white shadow-md shadow-primary-600/20 hover:bg-primary-700 sm:w-auto"
> >
+ Buat Trip + Buat Trip
</Link> </Link>
</div> </div>
{trips.length === 0 ? ( {trips.length === 0 ? (
<div className="rounded-2xl border-2 border-dashed border-neutral-200 bg-white p-14 text-center"> <div className="rounded-2xl border-2 border-dashed border-neutral-200 bg-white p-8 text-center sm:p-14">
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary-50 text-3xl"> <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary-50 text-2xl sm:h-16 sm:w-16 sm:text-3xl">
🏕️ 🏕️
</div> </div>
<p className="mb-1 text-lg font-bold text-neutral-800"> <p className="mb-1 text-base font-bold text-neutral-800 sm:text-lg">
Belum ada trip tersedia Belum ada trip tersedia
</p> </p>
<p className="mb-6 text-sm text-neutral-500"> <p className="mb-5 text-sm text-neutral-500 sm:mb-6">
Jadilah yang pertama membuat open trip pendakian! Jadilah yang pertama membuat open trip pendakian!
</p> </p>
<Link <Link
href="/create-trip" href="/create-trip"
className="inline-block rounded-xl bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary-600/25 hover:bg-primary-700" className="inline-block rounded-xl bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary-600/25 hover:bg-primary-700"
> >
Buat Trip Baru Buat Trip Baru
</Link> </Link>
components/shared/navbar.tsx
+83 -3
View File
@@ -1,14 +1,17 @@
"use client"; "use client";
import { useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { useSession, signOut } from "next-auth/react"; import { useSession, signOut } from "next-auth/react";
export function Navbar() { export function Navbar() {
const { data: session } = useSession(); const { data: session } = useSession();
const [menuOpen, setMenuOpen] = useState(false);
return ( return (
<nav className="sticky top-0 z-40 border-b border-neutral-200 bg-white/90 backdrop-blur-md"> <nav className="sticky top-0 z-40 border-b border-neutral-200 bg-white/90 backdrop-blur-md">
<div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-4"> <div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-4">
{/* Logo */}
<Link href="/" className="flex items-center gap-1.5"> <Link href="/" className="flex items-center gap-1.5">
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary-600 text-xs font-bold text-white"> <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary-600 text-xs font-bold text-white">
S S
@@ -18,7 +21,8 @@ export function Navbar() {
</span> </span>
</Link> </Link>
<div className="flex items-center gap-1"> {/* Desktop Nav */}
<div className="hidden items-center gap-1 md:flex">
<Link <Link
href="/trips" href="/trips"
className="rounded-lg px-3 py-1.5 text-sm font-medium text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-800" className="rounded-lg px-3 py-1.5 text-sm font-medium text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-800"
@@ -34,12 +38,11 @@ export function Navbar() {
> >
Buat Trip Buat Trip
</Link> </Link>
<div className="ml-2 flex items-center gap-2"> <div className="ml-2 flex items-center gap-2">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-600 text-xs font-bold text-white"> <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-600 text-xs font-bold text-white">
{session.user.name?.charAt(0).toUpperCase()} {session.user.name?.charAt(0).toUpperCase()}
</div> </div>
<span className="hidden text-sm font-medium text-neutral-700 sm:block"> <span className="text-sm font-medium text-neutral-700">
{session.user.name} {session.user.name}
</span> </span>
<button <button
@@ -67,7 +70,84 @@ export function Navbar() {
</> </>
)} )}
</div> </div>
{/* Mobile Hamburger */}
<button
onClick={() => setMenuOpen(!menuOpen)}
className="flex h-9 w-9 items-center justify-center rounded-lg text-neutral-600 transition-colors hover:bg-neutral-100 md:hidden"
aria-label="Toggle menu"
>
{menuOpen ? (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
<path d="M5 5l10 10M15 5L5 15" />
</svg>
) : (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
<path d="M3 5h14M3 10h14M3 15h14" />
</svg>
)}
</button>
</div> </div>
{/* Mobile Menu */}
{menuOpen && (
<div className="border-t border-neutral-100 bg-white px-4 pb-4 pt-2 md:hidden">
<div className="flex flex-col gap-1">
<Link
href="/trips"
onClick={() => setMenuOpen(false)}
className="rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50"
>
Open Trip
</Link>
{session?.user ? (
<>
<Link
href="/create-trip"
onClick={() => setMenuOpen(false)}
className="rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50"
>
Buat Trip
</Link>
<div className="mt-2 flex items-center justify-between rounded-lg bg-neutral-50 px-3 py-2.5">
<div className="flex items-center gap-2">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-600 text-xs font-bold text-white">
{session.user.name?.charAt(0).toUpperCase()}
</div>
<span className="text-sm font-medium text-neutral-700">
{session.user.name}
</span>
</div>
<button
onClick={() => signOut()}
className="rounded-lg px-3 py-1.5 text-sm font-medium text-red-500 transition-colors hover:bg-red-50"
>
Logout
</button>
</div>
</>
) : (
<div className="mt-2 flex gap-2">
<Link
href="/login"
onClick={() => setMenuOpen(false)}
className="flex-1 rounded-lg border border-neutral-200 py-2.5 text-center text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-50"
>
Login
</Link>
<Link
href="/register"
onClick={() => setMenuOpen(false)}
className="flex-1 rounded-lg bg-primary-600 py-2.5 text-center text-sm font-semibold text-white transition-colors hover:bg-primary-700"
>
Daftar
</Link>
</div>
)}
</div>
</div>
)}
</nav> </nav>
); );
} }
features/trip/components/image-gallery.tsx
+8 -8
View File
@@ -14,8 +14,8 @@ export function ImageGallery({ images }: { images: TripImage[] }) {
if (images.length === 0) { if (images.length === 0) {
return ( return (
<div className="flex h-56 items-center justify-center bg-linear-to-br from-primary-800 to-secondary-900 sm:h-72"> <div className="flex h-44 items-center justify-center bg-linear-to-br from-primary-800 to-secondary-900 sm:h-56 lg:h-72">
<span className="text-6xl">🏔️</span> <span className="text-5xl sm:text-6xl">🏔️</span>
</div> </div>
); );
} }
@@ -25,7 +25,7 @@ export function ImageGallery({ images }: { images: TripImage[] }) {
return ( return (
<div> <div>
{/* Main Image */} {/* Main Image */}
<div className="relative h-56 bg-neutral-900 sm:h-72"> <div className="relative h-44 bg-neutral-900 sm:h-56 lg:h-72">
<Image <Image
src={activeImage.url} src={activeImage.url}
alt={activeImage.caption || "Foto trip"} alt={activeImage.caption || "Foto trip"}
@@ -35,26 +35,26 @@ export function ImageGallery({ images }: { images: TripImage[] }) {
priority priority
/> />
{activeImage.caption && ( {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"> <div className="absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/60 to-transparent px-3 pb-2.5 pt-6 sm:px-4 sm:pb-3 sm:pt-8">
<p className="text-sm font-medium text-white"> <p className="text-xs font-medium text-white sm:text-sm">
{activeImage.caption} {activeImage.caption}
</p> </p>
</div> </div>
)} )}
{/* Counter */} {/* 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"> <div className="absolute right-2 top-2 rounded-full bg-black/50 px-2 py-0.5 text-[10px] font-medium text-white backdrop-blur-sm sm:right-3 sm:top-3 sm:px-2.5 sm:py-1 sm:text-xs">
{activeIndex + 1} / {images.length} {activeIndex + 1} / {images.length}
</div> </div>
</div> </div>
{/* Thumbnails */} {/* Thumbnails */}
{images.length > 1 && ( {images.length > 1 && (
<div className="flex gap-1.5 overflow-x-auto bg-neutral-100 p-2"> <div className="flex gap-1 overflow-x-auto bg-neutral-100 p-1.5 sm:gap-1.5 sm:p-2">
{images.map((img, i) => ( {images.map((img, i) => (
<button <button
key={img.id} key={img.id}
onClick={() => setActiveIndex(i)} onClick={() => setActiveIndex(i)}
className={`relative h-14 w-20 shrink-0 overflow-hidden rounded-lg transition-all ${ className={`relative h-11 w-16 shrink-0 overflow-hidden rounded-md transition-all sm:h-14 sm:w-20 sm:rounded-lg ${
i === activeIndex i === activeIndex
? "ring-2 ring-primary-500 ring-offset-1" ? "ring-2 ring-primary-500 ring-offset-1"
: "opacity-60 hover:opacity-100" : "opacity-60 hover:opacity-100"
features/trip/components/search-bar.tsx
+3 -3
View File
@@ -18,17 +18,17 @@ export function SearchBar() {
return ( return (
<form onSubmit={handleSearch} className="mx-auto max-w-xl"> <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"> <div className="flex overflow-hidden rounded-xl bg-white/10 ring-1 ring-white/20 backdrop-blur-sm transition-all focus-within:bg-white/15 focus-within:ring-primary-400/50 sm:rounded-2xl">
<input <input
type="text" type="text"
value={query} value={query}
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
placeholder="Cari gunung, lokasi, atau trip..." 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" className="min-w-0 flex-1 border-none bg-transparent px-3.5 py-3 text-sm text-white outline-none placeholder:text-neutral-400 sm:px-5 sm:py-3.5"
/> />
<button <button
type="submit" type="submit"
className="bg-primary-600 px-6 text-sm font-semibold text-white transition-colors hover:bg-primary-500" className="shrink-0 bg-primary-600 px-4 text-sm font-semibold text-white transition-colors hover:bg-primary-500 sm:px-6"
> >
Cari Cari
</button> </button>