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
+3 -3
View File
@@ -18,17 +18,17 @@ export function SearchBar() {
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">
<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
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"
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
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
</button>