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; align-items: end;
width: 100%; width: 100%;
margin-left: 20px; margin-left: 15px;
margin-bottom: -5px; margin-bottom: -5px;
gap: 2.5px; gap: 2.5px;
@ -38,13 +38,13 @@
line-height: 14px; line-height: 14px;
text-align: center; text-align: center;
} }
.search-bar-arrangement-type-picker { .search-bar-arrangement-type-picker-selected {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 45px; width: 55px;
height: 30px; height: 35px;
color: black; color: black;
background-color: white; background-color: white;
@ -52,13 +52,13 @@
border: 0.4px solid #26306B; border: 0.4px solid #26306B;
border-radius: 5px; border-radius: 5px;
} }
.search-bar-arrangement-type-picker-selected { .search-bar-arrangement-type-picker {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 45px; width: 55px;
height: 30px; height: 35px;
color: white; color: white;
background-color: #26306B; background-color: #26306B;
@ -66,6 +66,7 @@
border: 0.4px solid #26306B; border: 0.4px solid #26306B;
border-radius: 5px; border-radius: 5px;
} }
.search-bar-arrangement-type-picker:hover { cursor: pointer; }
.search-bar-area-container { .search-bar-area-container {
display: flex; display: flex;
flex-direction: row; 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::*; use yew::prelude::*;
#[function_component(SearchSection)] #[function_component(SearchSection)]
pub fn search_section() -> Html { 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! { html! {
<div class={"search-container"} style={"background-image: url('images/search-background.png');"}> <div class={"search-container"} style={"background-image: url('images/search-background.png');"}>
<div class={"search-bar-container"}> <div class={"search-bar-container"}>
<div class={"search-bar-arrangement-type-picker-container"}> <div class={"search-bar-arrangement-type-picker-container"}>
<div class={"search-bar-arrangement-type-picker-selected"}> <div onclick={onclick_arrangement_type_sale} class={if (*arrangement_type_handle).clone() == ArrangementType::Sale {
{"Buy"} "search-bar-arrangement-type-picker-selected"
} else {
"search-bar-arrangement-type-picker"
}}>
{"Comprar"}
</div> </div>
<div class={"search-bar-arrangement-type-picker"}> <div onclick={onclick_arrangement_type_rent} class={if (*arrangement_type_handle).clone() == ArrangementType::Rent {
{"Rent"} "search-bar-arrangement-type-picker-selected"
} else {
"search-bar-arrangement-type-picker"
}}>
{"Alquilar"}
</div> </div>
</div> </div>
<div class={"search-bar-area-container"}> <div class={"search-bar-area-container"}>