added profile section to homepage

This commit is contained in:
2024-03-22 20:25:52 -04:00
parent a7368aec30
commit e211f476a7
15 changed files with 128 additions and 31 deletions

View File

@ -38,6 +38,7 @@ pub fn App() -> impl IntoView {
use crate::components::sidebar::*;
use crate::components::dashboard::*;
use crate::components::search::*;
use crate::components::personal::*;
/// Renders the home page of your application.
#[component]
@ -49,13 +50,14 @@ fn HomePage() -> impl IntoView {
view! {
<div class="home-container">
<Sidebar setter=set_dashboard_open />
<Sidebar setter=set_dashboard_open active=dashboard_open />
<Show
when=move || {dashboard_open() == true}
fallback=move || view! { <Search /> }
>
<Dashboard />
</Show>
<Personal />
<PlayBar status=play_status/>
<Queue status=play_status/>
</div>

View File

@ -1,3 +1,4 @@
pub mod sidebar;
pub mod dashboard;
pub mod search;
pub mod search;
pub mod personal;

View File

@ -3,7 +3,7 @@ use leptos::*;
#[component]
pub fn Dashboard() -> impl IntoView {
view! {
<div class="dashboard-container">
<div class="dashboard-container home-component">
<h1>Dashboard</h1>
</div>
}

View File

@ -0,0 +1,25 @@
use leptos::leptos_dom::*;
use leptos::*;
use leptos_icons::*;
use leptos_icons::CgIcon::*;
#[component]
pub fn Personal() -> impl IntoView {
view! {
<div class=" personal-container">
<Profile />
</div>
}
}
#[component]
pub fn Profile() -> impl IntoView {
view! {
<div class="profile-container">
<div class="profile-icon">
<Icon icon=Icon::from(CgProfile) />
</div>
</div>
}
}

View File

@ -4,7 +4,7 @@ use leptos::leptos_dom::*;
#[component]
pub fn Search() -> impl IntoView {
view! {
<div class="search-container">
<div class="search-container home-component">
<h1>Searching...</h1>
</div>
}

View File

@ -1,11 +1,11 @@
use leptos::*;
use leptos::leptos_dom::*;
use leptos_icons::AiIcon::*;
use leptos::*;
use leptos_icons::BiIcon::*;
use leptos_icons::OcIcon::*;
use leptos_icons::*;
#[component]
pub fn Sidebar(setter: WriteSignal<bool>) -> impl IntoView {
pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>) -> impl IntoView {
let open_dashboard = move |_| {
setter.update(|value| *value = true);
log!("open dashboard");
@ -19,16 +19,16 @@ pub fn Sidebar(setter: WriteSignal<bool>) -> impl IntoView {
<div class="sidebar-container">
<div class="sidebar-top-container">
<h2 class="header">LibreTunes</h2>
<div class="buttons" on:click=open_dashboard>
<div class="buttons" on:click=open_dashboard style={move || if active() {"color: #e1e3e1"} else {""}} >
<Icon icon=Icon::from(OcHomeFillLg) />
<h1>Dashboard</h1>
</div>
<div class="buttons" on:click=open_search>
<Icon icon=Icon::from(AiSearchOutlined) />
<div class="buttons" on:click=open_search style={move || if !active() {"color: #e1e3e1"} else {""}}>
<Icon icon=Icon::from(BiSearchRegular) />
<h1>Search</h1>
</div>
</div>
<div class="sidebar-header">
<div class="sidebar-bottom-container">
<h1>LibreTunes</h1>
</div>