franklinblanco/realtor-lp-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added arrangement type switching to search bar

Browse Source
This commit is contained in:
Franklin 2023-05-11 13:18:56 -04:00
parent 50917eecb9
commit 39270a6fd2
2 changed files with 34 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/components/page/search.css
View File

@ -26,7 +26,7 @@
align-items: end;
width: 100%;
margin-left: 20px;
margin-left: 15px;
margin-bottom: -5px;
gap: 2.5px;
@ -38,13 +38,13 @@
line-height: 14px;
text-align: center;
}
.search-bar-arrangement-type-picker {
.search-bar-arrangement-type-picker-selected {
display: flex;
justify-content: center;
align-items: center;
width: 45px;
height: 30px;
width: 55px;
height: 35px;
color: black;
background-color: white;
@ -52,13 +52,13 @@
border: 0.4px solid #26306B;
border-radius: 5px;
}
.search-bar-arrangement-type-picker-selected {
.search-bar-arrangement-type-picker {
display: flex;
justify-content: center;
align-items: center;
width: 45px;
height: 30px;
width: 55px;
height: 35px;
color: white;
background-color: #26306B;
@ -66,6 +66,7 @@
border: 0.4px solid #26306B;
border-radius: 5px;
}
.search-bar-arrangement-type-picker:hover { cursor: pointer; }
.search-bar-area-container {
display: flex;
flex-direction: row;

30
src/components/page/search.rs
View File

@ -1,16 +1,38 @@
use realtor_lp_types::domain::arrangement::ArrangementType;
use yew::prelude::*;
#[function_component(SearchSection)]
pub fn search_section() -> Html {
let arrangement_type_handle = use_state_eq(|| ArrangementType::Sale);
let onclick_arrangement_type_rent = {
let arrangement_type_handle = arrangement_type_handle.clone();
Callback::from(move |_: MouseEvent| {
arrangement_type_handle.set(ArrangementType::Rent);
})
};
let onclick_arrangement_type_sale = {
let arrangement_type_handle = arrangement_type_handle.clone();
Callback::from(move |_: MouseEvent| {
arrangement_type_handle.set(ArrangementType::Sale);
})
};
html! {
<div class={"search-container"} style={"background-image: url('images/search-background.png');"}>
<div class={"search-bar-container"}>
<div class={"search-bar-arrangement-type-picker-container"}>
<div class={"search-bar-arrangement-type-picker-selected"}>
{"Buy"}
<div onclick={onclick_arrangement_type_sale} class={if (*arrangement_type_handle).clone() == ArrangementType::Sale {
"search-bar-arrangement-type-picker-selected"
} else {
"search-bar-arrangement-type-picker"
}}>
{"Comprar"}
</div>
<div class={"search-bar-arrangement-type-picker"}>
{"Rent"}
<div onclick={onclick_arrangement_type_rent} class={if (*arrangement_type_handle).clone() == ArrangementType::Rent {
"search-bar-arrangement-type-picker-selected"
} else {
"search-bar-arrangement-type-picker"
}}>
{"Alquilar"}
</div>
</div>
<div class={"search-bar-area-container"}>