add responsive mobile tablet laptop and desktop

This commit is contained in:
2026-04-16 16:49:32 +07:00
parent d0480df31a
commit 82c1da9951
9 changed files with 195 additions and 118 deletions
+10 -10
View File
@@ -6,38 +6,38 @@ export default async function TripsPage() {
const trips = await tripService.getOpenTrips();
return (
<div className="mx-auto max-w-6xl px-4 py-8">
<div className="mb-8 flex items-center justify-between">
<div className="mx-auto max-w-6xl px-4 py-6 sm:py-8">
<div className="mb-6 flex flex-col gap-3 sm:mb-8 sm:flex-row sm:items-center sm:justify-between">
<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
</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
</p>
</div>
<Link
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
</Link>
</div>
{trips.length === 0 ? (
<div className="rounded-2xl border-2 border-dashed border-neutral-200 bg-white p-14 text-center">
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary-50 text-3xl">
<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-14 w-14 items-center justify-center rounded-full bg-primary-50 text-2xl sm:h-16 sm:w-16 sm:text-3xl">
🏕
</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
</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!
</p>
<Link
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
</Link>