fixing index text input
This commit is contained in:
parent
e705472d6a
commit
ccff6ae2cd
48
src/app.css
48
src/app.css
@ -19,18 +19,63 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
form.search-input {
|
form.search-input {
|
||||||
display: none
|
display: none;
|
||||||
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.dropdown-menu {
|
button.dropdown-menu {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.search-input-dropdown {
|
||||||
|
margin-right: 10px;
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1.title-dropdown {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 390px){
|
||||||
|
input.text-input-search {
|
||||||
|
width: 230px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
label:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 18px;
|
||||||
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='18' height='18' viewBox='0 0 25 25' fill-rule='evenodd'%3E%3Cpath d='M16.036 18.455l2.404-2.405 5.586 5.587-2.404 2.404zM8.5 2C12.1 2 15 4.9 15 8.5S12.1 15 8.5 15 2 12.1 2 8.5 4.9 2 8.5 2zm0-2C3.8 0 0 3.8 0 8.5S3.8 17 8.5 17 17 13.2 17 8.5 13.2 0 8.5 0zM15 16a1 1 0 1 1 2 0 1 1 0 1 1-2 0'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-input-search {
|
||||||
|
padding: 12px 20px 12px 40px;
|
||||||
|
border-radius: 12px;
|
||||||
|
width: 325px;
|
||||||
|
font-size: 1em;
|
||||||
|
background-color: #4b4b4b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
max-width: 1280px;
|
max-width: 1280px;
|
||||||
@ -44,6 +89,7 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.nav-container {
|
.nav-container {
|
||||||
background-color: #4b4b4b;
|
background-color: #4b4b4b;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
|
@ -7,6 +7,7 @@ import React from 'preact/compat';
|
|||||||
function Home() {
|
function Home() {
|
||||||
const [count, setCount] = useState(0)
|
const [count, setCount] = useState(0)
|
||||||
const [searchVal, setSearchVal] = useState('');
|
const [searchVal, setSearchVal] = useState('');
|
||||||
|
const [dropdown, setDropdown] = useState(false);
|
||||||
|
|
||||||
const onInput = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
const onInput = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
||||||
const val = e.target as HTMLInputElement;
|
const val = e.target as HTMLInputElement;
|
||||||
@ -19,35 +20,36 @@ function Home() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const onDropdown = (e): void => {
|
const onDropdown = (e): void => {
|
||||||
alert("bruh");
|
setDropdown(!dropdown)
|
||||||
|
// alert("bruh");
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DefaultLayout>
|
<DefaultLayout>
|
||||||
<header>
|
<header>
|
||||||
<div className="content">
|
<div className="flex flex-row content">
|
||||||
<div className="flex flex-row justify-between">
|
<h1 className={`title ${dropdown ? 'title-dropdown' : ""}`}>HilingRiviw</h1>
|
||||||
<h1 style={{ fontSize: '32px' }}>HilingRiviw</h1>
|
<form onSubmit={onSearchSubmit} className={`search-input ${dropdown ? "search-input-dropdown" : ""}`}>
|
||||||
<form onSubmit={onSearchSubmit} className="search-input">
|
<label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={searchVal}
|
value={searchVal}
|
||||||
onInput={onInput}
|
onInput={onInput}
|
||||||
placeholder="Yogyakarta, Pantai Cidaun, Gedung DPR ..."
|
placeholder="Yogyakarta, Pantai Cidaun ..."
|
||||||
style={{ padding: '12px 24px 12px 40px', borderRadius: 12, width: '100%', fontSize: '1em', backgroundColor: '#4b4b4b' }}
|
class="text-input-search"
|
||||||
/>
|
/>
|
||||||
<svg style={{ position: 'absolute', top: '2em', padding: '0 0 0 5px' }} xmlns="http://www.w3.org/2000/svg" height="18" fill='white' viewBox="0 -960 960 960" width="36"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" /></svg>
|
</label>
|
||||||
</form>
|
</form>
|
||||||
<button onClick={onDropdown} className="dropdown-menu" style={{ backgroundColor: "#4b4b4b", padding: 5, margin: 'auto 0', borderRadius: 10 }}>
|
<button onClick={onDropdown} className="dropdown-menu" style={{ backgroundColor: "#4b4b4b", padding: 5, margin: 'auto 0', borderRadius: 10, marginLeft: 'auto' }}>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" height="30" fill="white" viewBox="0 -960 960 960" width="30"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" /></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" height="30" fill="white" viewBox="0 -960 960 960" width="30"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" /></svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="nav-container">
|
<div className="nav-container">
|
||||||
<a href="#" className="navLink">Best places</a>
|
<a href="#" className="navLink">Best places</a>
|
||||||
<a href="#" className="navLink">Discover</a>
|
<a href="#" className="navLink">Discover</a>
|
||||||
<a href="#" className="navLink">Trending Places</a>
|
<a href="#" className="navLink">Trending Places</a>
|
||||||
<a href="#" className="navLink">Lists</a>
|
<a href="#" className="navLink">Lists</a>
|
||||||
|
<a href="#" className="navLink">Stories</a>
|
||||||
<a href="#" className="navLink">News</a>
|
<a href="#" className="navLink">News</a>
|
||||||
<a href="#" className="navLink">Forum</a>
|
<a href="#" className="navLink">Forum</a>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user