Skip to content

Commit 561fe33

Browse files
michaelcardozamichaelcardoza
committed
feat: add contributors page
1 parent 733006e commit 561fe33

File tree

9 files changed

+221
-36
lines changed

9 files changed

+221
-36
lines changed

‎src/app.rs

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ use leptos::*;
22
use leptos_meta::*;
33
use leptos_router::*;
44

5-
use crate::pages::index::Index;
5+
use crate::pages::{contributors::Contributors, index::Index};
66

77
#[component]
88
pub fn App() -> impl IntoView {
@@ -12,6 +12,7 @@ pub fn App() -> impl IntoView {
1212
<Router>
1313
<Routes>
1414
<Route path="" view=|| view! { <Index/> }/>
15+
<Route path="/colaboradores" view=|| view! { <Contributors/> }/>
1516
</Routes>
1617
</Router>
1718
}

‎src/components/cards/contributor_card.rs

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
use leptos::*;
2+
3+
use crate::components::icons::github_icon::GithubIcon;
4+
5+
#[component]
6+
pub fn ContributorCard(
7+
#[prop(into)] name: &'static str,
8+
#[prop(into)] description: &'static str,
9+
#[prop(into)] link: &'static str,
10+
#[prop(into)] brand_src: &'static str,
11+
) -> impl IntoView {
12+
view! {
13+
<article>
14+
<a
15+
href=link
16+
target="_blank"
17+
class="group flex flex-col gap-y-6 border border-black p-6 hover:bg-orange-500 bg-orange-100 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between h-full"
18+
>
19+
<div class="flex flex-col gap-y-2">
20+
<img src=brand_src width="60" class="rounded-full mb-4" alt=name/>
21+
<h2 class="font-work-sans text-black text-xl">{name}</h2>
22+
<p class="font-work-sans text-black">{description}</p>
23+
</div>
24+
<span class="ml-auto">
25+
<GithubIcon size=30/>
26+
</span>
27+
</a>
28+
</article>
29+
}
30+
}

‎src/components/cards/mod.rs

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
pub mod card_title;
22
pub mod community_card;
3+
pub mod contributor_card;
34
pub mod project_card;

‎src/components/cards/project_card.rs

+8-8
Original file line numberDiff line numberDiff line change
@@ -40,17 +40,17 @@ pub fn ProjectCard(
4040
{brand_src}
4141
</span>
4242
}
43+
.into_any()
4344
} else {
4445
view! {
45-
<span>
46-
<img
47-
src=brand_src
48-
width="60"
49-
class=format!("rounded-full h-[60px] w-[60px] {}", current_color)
50-
alt=brand_alt
51-
/>
52-
</span>
46+
<img
47+
src=brand_src
48+
width="60"
49+
class=format!("rounded-full h-[60px] w-[60px] {}", current_color)
50+
alt=brand_alt
51+
/>
5352
}
53+
.into_any()
5454
}}
5555
<CardTitle texts=name.clone()/>
5656
<p class="mt-2 font-work-sans text-black">{description}</p>

‎src/components/header.rs

+3-4
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ pub fn Header() -> impl IntoView {
1010
<header class="border-b border-b-black/20">
1111
<div class="container mx-auto px-4 flex items-center justify-between flex-col lg:flex-row">
1212
<div class="flex justify-between w-full lg:w-auto">
13-
<div class="flex items-center gap-x-4">
13+
<a href="/" class="flex items-center gap-x-4">
1414
<img
1515
src="https://www.rust-lang.org/static/images/rust-logo-blk.svg"
1616
class="max-h-20 rounded-full"
1717
alt="Rust Lang en Español"
1818
/>
19-
</div>
19+
</a>
2020
<button
2121
class="lg:hidden"
2222
on:click=move |_| { set_is_open.update(|n| *n = !*n) }
@@ -30,15 +30,14 @@ pub fn Header() -> impl IntoView {
3030
"hidden lg:block" }
3131
)
3232
}>
33-
3433
<ul class="flex items-center gap-6 flex-col lg:flex-row lg:items-center">
3534
<li>
3635
<a href="https://rustlanges.github.io/rust-book-es" target="_blank">
3736
"Aprende"
3837
</a>
3938
</li>
4039
<li>
41-
<a href="#">"Comunidad"</a>
40+
<a href="/colaboradores">"Colaboradores"</a>
4241
</li>
4342
<li>
4443
<a href="#">"Blog"</a>

‎src/components/hero.rs

+14-13
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ pub fn Hero() -> impl IntoView {
99
"Una comunidad de gente mal intencionada y tonta.",
1010
"9 de cada 10 Go dev's lo recomiendan",
1111
"Acá le pegamos a la rústica bien recio",
12-
"⚡ Blazingly fast ⚡ 🚀🚀🚀 Super fast 🔥🔥🔥🔥 pero ahora en español!!",
12+
"⚡Blazingly fast⚡ 🚀 Super fast 🔥 pero ahora en español!",
1313
"Si te falla va ser de forma segura 😉",
1414
"Furrificando...",
1515
];
@@ -24,9 +24,9 @@ pub fn Hero() -> impl IntoView {
2424
<section class="w-full flex flex-col">
2525
<Header/>
2626
<div class="flex items-center justify-center py-14 lg:py-32 px-4">
27-
<div class="grid items-center gap-x-20 gap-y-10 lg:grid-cols-2">
27+
<div class="grid items-center gap-x-20 gap-y-10 lg:grid-cols-2 w-full">
2828
<figure class="w-80 mx-auto lg:w-full">
29-
<img src="./rhq3ezvso9611-min.png" width="500" class="mx-auto"/>
29+
<img src="./rhq3ezvso9611-min.png" width="500" class="ml-auto"/>
3030
</figure>
3131
<div class="">
3232
<h1 class="flex flex-col mb-4 gap-y-2">
@@ -40,16 +40,17 @@ pub fn Hero() -> impl IntoView {
4040
"En Español"
4141
</span>
4242
</h1>
43-
// TODO: Alguien que sepa de diseño que me ayude a hacer esto mas bonito
44-
<button
45-
class=" border-black p-6 hover:bg-orange-500 bg-orange-100 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition flex justify-center items-center rounded-[100%] w-6 h-6 mx-auto"
46-
on:click=click_handler
47-
>
48-
<span class="motion-safe:animate-spin">"🎲"</span>
49-
</button>
50-
<p class="font-work-sans font-light text-center lg:text-left max-w-[90%]">
51-
{slogan}
52-
</p>
43+
<div class="flex items-center justify-center lg:justify-start group">
44+
<button
45+
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"
46+
on:click=click_handler
47+
>
48+
<span class="motion-safe:animate-spin">"🎲"</span>
49+
</button>
50+
<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">
51+
{slogan}
52+
</p>
53+
</div>
5354
</div>
5455
</div>
5556
</div>

‎src/pages/contributors.rs

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
use leptos::*;
2+
3+
use crate::components::{cards::contributor_card::ContributorCard, footer::Footer, header::Header};
4+
5+
struct ContributorItem {
6+
name: &'static str,
7+
description: &'static str,
8+
link: &'static str,
9+
brand_src: &'static str,
10+
}
11+
12+
#[component]
13+
pub fn Contributors() -> impl IntoView {
14+
let contributors: Vec<ContributorItem> = vec![
15+
ContributorItem {
16+
name: "Phosphorus Moscu",
17+
description: "Student in Computer Science degree at Universidad Nacional del Oeste | Developer Consultant at Globant",
18+
link: "https://github.com/Phosphorus-M",
19+
brand_src: "https://avatars.githubusercontent.com/u/19656993?v=4",
20+
},
21+
ContributorItem {
22+
name: "Sergio Alejandro Ribera Costa",
23+
description: "Enthusiastic developer Linux and Open Source lover",
24+
link: "https://github.com/SergioRibera",
25+
brand_src: "https://avatars.githubusercontent.com/u/56278796?v=4",
26+
},
27+
ContributorItem {
28+
name: "Michael Cardoza",
29+
description: "Software Developer",
30+
link: "https://github.com/michaelcardoza",
31+
brand_src: "https://avatars.githubusercontent.com/u/8800455?v=4",
32+
},
33+
ContributorItem {
34+
name: "Emilio Ruscitti",
35+
description: "Rust Dev",
36+
link: "https://github.com/Lemin-n",
37+
brand_src: "https://avatars.githubusercontent.com/u/88170949?v=4",
38+
},
39+
ContributorItem {
40+
name: "carbon based lifeform",
41+
description: "Rust Dev",
42+
link: "https://github.com/ph4un00b",
43+
brand_src: "https://avatars.githubusercontent.com/u/1057021?v=4",
44+
},
45+
ContributorItem {
46+
name: "CrawKatt",
47+
description: "Aprendiz de Rust, estudiante de AIEP, Chileno",
48+
link: "https://github.com/CrawKatt",
49+
brand_src: "https://avatars.githubusercontent.com/u/108593932?v=4",
50+
},
51+
];
52+
53+
view! {
54+
<div>
55+
<Header/>
56+
<main>
57+
<section class="bg-orange-300/30 py-16">
58+
<div class="flex flex-col gap-y-6 container mx-auto px-4">
59+
<h2 class="text-3xl text-left mb-6">
60+
<span class="font-work-sans font-light">"Nuestros "</span>
61+
<span class="font-alfa-slab text-orange-500">"Colaboradores"</span>
62+
</h2>
63+
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-5 gap-6">
64+
{contributors
65+
.into_iter()
66+
.map(|contributor| {
67+
view! {
68+
<ContributorCard
69+
name=contributor.name
70+
description=contributor.description
71+
link=contributor.link
72+
brand_src=contributor.brand_src
73+
/>
74+
}
75+
})
76+
.collect::<Vec<_>>()}
77+
</div>
78+
</div>
79+
</section>
80+
</main>
81+
<Footer/>
82+
</div>
83+
}
84+
}

‎src/pages/mod.rs

+1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1+
pub mod contributors;
12
pub mod index;

0 commit comments

Comments
 (0)