add responsive mobile tablet laptop and desktop
This commit is contained in:
+10
-10
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user