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