Skip to content

Commit 6c7cdf3

Browse files
Lemin-nLemin-n
committed
refactor: impl outlet component for routes rendering
1 parent 3975de6 commit 6c7cdf3

File tree

4 files changed

+59
-61
lines changed

4 files changed

+59
-61
lines changed

‎src/app.rs

+15-5
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,28 @@ use leptos::*;
22
use leptos_meta::*;
33
use leptos_router::*;
44

5-
use crate::pages::{contributors::Contributors, index::Index};
5+
use crate::{
6+
components::{footer::Footer, header::Header},
7+
pages::{contributors::Contributors, index::Index},
8+
};
69

710
#[component]
811
pub fn App() -> impl IntoView {
912
provide_meta_context();
1013

1114
view! {
1215
<Router>
13-
<Routes>
14-
<Route path="/" view=|| view! { <Index/> }/>
15-
<Route path="/colaboradores" view=|| view! { <Contributors/> }/>
16-
</Routes>
16+
<section class="w-full flex flex-col">
17+
<Header/>
18+
<main>
19+
<Routes>
20+
<Route path="" view=|| view! { <Index/> }/>
21+
<Route path="/colaboradores" view=|| view! { <Contributors/> }/>
22+
</Routes>
23+
<Outlet/>
24+
</main>
25+
<Footer/>
26+
</section>
1727
</Router>
1828
}
1929
}

‎src/components/hero.rs

+29-32
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
use leptos::*;
22

3-
use crate::components::header::Header;
3+
44
use rand::seq::SliceRandom;
55

66
#[component]
@@ -27,39 +27,36 @@ pub fn Hero() -> impl IntoView {
2727
};
2828

2929
view! {
30-
<section class="w-full flex flex-col">
31-
<Header/>
32-
<div class="flex items-center justify-center py-14 lg:py-32 px-4">
33-
<div class="grid items-center gap-x-20 gap-y-10 lg:grid-cols-2 w-full">
34-
<figure class="w-80 mx-auto lg:w-full">
35-
<img src="./rhq3ezvso9611-min.png" width="500" class="ml-auto"/>
36-
</figure>
37-
<div class="">
38-
<h1 class="flex flex-col mb-4 gap-y-2">
39-
<span class="font-work-sans text-4xl font-light text-center lg:text-left">
40-
"Bienvenidos a"
41-
</span>
42-
<span class="font-alfa-slab text-orange-500 text-6xl sm:text-7xl lg:text-8xl text-center lg:text-left">
43-
"Rust Lang"
44-
</span>
45-
<span class="font-work-sans text-5xl font-semibold text-center lg:text-left">
46-
"En Español"
47-
</span>
48-
</h1>
49-
<div class="flex items-center justify-center lg:justify-start group">
50-
<button
51-
class="bg-orange-300 border-4 border-orange-400 group-hover:border-orange-500 flex justify-center items-center rounded-full w-12 h-12 flex items-center justify-center text-xl relative z-10"
52-
on:click=click_handler
53-
>
54-
<span class="motion-safe:animate-spin">"🎲"</span>
55-
</button>
56-
<p class="font-work-sans font-light lg:text-left bg-orange-400 h-12 pr-4 pl-10 flex items-center -ml-6 flex-1 rounded-r-full group-hover:bg-orange-500 max-w-lg">
57-
{slogan}
58-
</p>
59-
</div>
30+
<div class="flex items-center justify-center py-14 lg:py-32 px-4">
31+
<div class="grid items-center gap-x-20 gap-y-10 lg:grid-cols-2 w-full">
32+
<figure class="w-80 mx-auto lg:w-full">
33+
<img src="./rhq3ezvso9611-min.png" width="500" class="ml-auto"/>
34+
</figure>
35+
<div class="">
36+
<h1 class="flex flex-col mb-4 gap-y-2">
37+
<span class="font-work-sans text-4xl font-light text-center lg:text-left">
38+
"Bienvenidos a"
39+
</span>
40+
<span class="font-alfa-slab text-orange-500 text-6xl sm:text-7xl lg:text-8xl text-center lg:text-left">
41+
"Rust Lang"
42+
</span>
43+
<span class="font-work-sans text-5xl font-semibold text-center lg:text-left">
44+
"En Español"
45+
</span>
46+
</h1>
47+
<div class="flex items-center justify-center lg:justify-start group">
48+
<button
49+
class="bg-orange-300 border-4 border-orange-400 group-hover:border-orange-500 flex justify-center items-center rounded-full w-12 h-12 flex items-center justify-center text-xl relative z-10"
50+
on:click=click_handler
51+
>
52+
<span class="motion-safe:animate-spin">"🎲"</span>
53+
</button>
54+
<p class="font-work-sans font-light lg:text-left bg-orange-400 h-12 pr-4 pl-10 flex items-center -ml-6 flex-1 rounded-r-full group-hover:bg-orange-500 max-w-lg">
55+
{slogan}
56+
</p>
6057
</div>
6158
</div>
6259
</div>
63-
</section>
60+
</div>
6461
}
6562
}

‎src/pages/contributors.rs

+11-17
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
use leptos::{error::Result, *};
22
use serde::{Deserialize, Serialize};
33

4-
use crate::components::{cards::contributor_card::ContributorCard, footer::Footer, header::Header};
4+
use crate::components::cards::contributor_card::ContributorCard;
55

66
#[derive(Clone, PartialEq, Eq, Serialize, Deserialize)]
77
pub struct Contributor {
@@ -47,22 +47,16 @@ pub fn Contributors() -> impl IntoView {
4747
};
4848

4949
view! {
50-
<div>
51-
<Header/>
52-
<main>
53-
<section class="bg-orange-300/30 py-16">
54-
<div class="flex flex-col gap-y-6 container mx-auto px-4">
55-
<h2 class="text-3xl text-left mb-6">
56-
<span class="font-work-sans font-light">"Nuestros "</span>
57-
<span class="font-alfa-slab text-orange-500">"Colaboradores"</span>
58-
</h2>
59-
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-5 gap-6">
50+
<section class="bg-orange-300/30 py-16">
51+
<div class="flex flex-col gap-y-6 container mx-auto px-4">
52+
<h2 class="text-3xl text-left mb-6">
53+
<span class="font-work-sans font-light">"Nuestros "</span>
54+
<span class="font-alfa-slab text-orange-500">"Colaboradores"</span>
55+
</h2>
56+
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-5 gap-6">
6057
{contributors_view}
61-
</div>
62-
</div>
63-
</section>
64-
</main>
65-
<Footer/>
66-
</div>
58+
</div>
59+
</div>
60+
</section>
6761
}
6862
}

‎src/pages/index.rs

+4-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
use leptos::*;
22

33
use crate::components::{
4-
community_projects::CommunityProjects, footer::Footer, hero::Hero,
4+
community_projects::CommunityProjects, hero::Hero,
55
other_communities::OtherCommunities, our_communities::OurCommunities,
66
};
77

@@ -10,12 +10,9 @@ pub fn Index() -> impl IntoView {
1010
view! {
1111
<div>
1212
<Hero/>
13-
<main>
14-
<OurCommunities/>
15-
<OtherCommunities/>
16-
<CommunityProjects/>
17-
</main>
18-
<Footer/>
13+
<OurCommunities/>
14+
<OtherCommunities/>
15+
<CommunityProjects/>
1916
</div>
2017
}
2118
}

0 commit comments

Comments
 (0)