Skip to content

Commit 7575b7d

Browse files
Phosphorus-MPhosphorus-M
authored
Merge pull request #10 from michaelcardoza/main
refactor: home page completed
2 parents fd17ee7 + d6b09dd commit 7575b7d

21 files changed

+343
-496
lines changed

‎src/components/atom/discord_icon.rs

-12
This file was deleted.

‎src/components/atom/github_icon.rs

-12
This file was deleted.

‎src/components/atom/telegram_icon.rs

-12
This file was deleted.

‎src/components/button_link.rs

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
use std::collections::HashMap;
2+
use leptos::*;
3+
4+
#[component]
5+
pub fn ButtonLink(
6+
cx: Scope,
7+
href: String,
8+
#[prop(default = "primary".to_string())] color: String,
9+
#[prop(default = "normal".to_string())] size: String,
10+
children: Children,
11+
) -> impl IntoView {
12+
let colors = HashMap::from([
13+
("primary".to_string(), "bg-orange-300 hover:bg-black hover:text-white"),
14+
("white".to_string(), "bg-orange-100")
15+
]);
16+
let sizes = HashMap::from([
17+
("normal".to_string(), "h-9"),
18+
("big".to_string(), "h-12")
19+
]);
20+
let current_color = colors.get(&color).unwrap().to_string();
21+
let current_size = sizes.get(&size).unwrap().to_string();
22+
23+
view! { cx,
24+
<a
25+
href=href.to_string()
26+
target="_blank"
27+
class=format!("tracking-widest font-work-sans border border-black flex items-center px-4 drop-shadow-[4px_4px_0_rgba(0,0,0)] hover:drop-shadow-[0_0_0_rgba(0,0,0)] transition w-fit gap-x-4 {} {}", current_color, current_size)
28+
>
29+
{children(cx)}
30+
</a>
31+
}
32+
}

‎src/components/header.rs

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
use leptos::*;
2+
3+
use crate::components::button_link::ButtonLink;
4+
5+
#[component]
6+
pub fn Header(cx: Scope) -> impl IntoView {
7+
view! { cx,
8+
<header class="border-b border-b-black/20">
9+
<div class="container mx-auto px-4 flex items-center justify-between">
10+
<div class="flex items-center gap-x-4">
11+
<img
12+
src="https://www.rust-lang.org/static/images/rust-logo-blk.svg"
13+
class="max-h-20 rounded-full"
14+
alt="Rust Lang en Español"
15+
/>
16+
</div>
17+
<nav>
18+
<ul class="flex items-center gap-5">
19+
<li>
20+
<a href="#">"Aprende"</a>
21+
</li>
22+
<li>
23+
<a href="#">"Comunidad"</a>
24+
</li>
25+
<li>
26+
<a href="#">"Blog"</a>
27+
</li>
28+
<li class="ml-4">
29+
<ButtonLink
30+
href="https://github.com/RustLangES".to_string()
31+
>
32+
"Github"
33+
</ButtonLink>
34+
</li>
35+
<li>
36+
<ButtonLink
37+
href="https://discord.gg/4ng5HgmaMg".to_string()
38+
>
39+
"Discord"
40+
</ButtonLink>
41+
</li>
42+
</ul>
43+
</nav>
44+
</div>
45+
</header>
46+
}
47+
}

‎src/components/hero.rs

+3-66
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,12 @@
11
use leptos::*;
22

3-
use crate::components::atom::discord_icon::DiscordIcon;
4-
use crate::components::atom::github_icon::GithubIcon;
5-
use crate::components::atom::telegram_icon::TelegramIcon;
3+
use crate::components::header::Header;
64

75
#[component]
86
pub fn Hero(cx: Scope) -> impl IntoView {
9-
view! {
10-
cx,
7+
view! { cx,
118
<section class="w-full flex flex-col">
12-
<header class="border-b border-b-black/20">
13-
<div class="container mx-auto px-4 flex items-center justify-between">
14-
<div class="flex items-center gap-x-4">
15-
<img
16-
src="https://www.rust-lang.org/static/images/rust-logo-blk.svg"
17-
class="max-h-20 rounded-full"
18-
alt="Rust Lang en Español"
19-
/>
20-
</div>
21-
<nav>
22-
<ul class="flex items-center gap-5">
23-
<li>
24-
<a href="#">Aprende</a>
25-
</li>
26-
<li>
27-
<a href="#">Comunidad</a>
28-
</li>
29-
<li>
30-
<a href="#">Blog</a>
31-
</li>
32-
<li class="ml-4">
33-
<a
34-
class="tracking-widest font-light border border-black flex items-center px-4 h-9 bg-orange-300 hover:bg-black hover:text-white drop-shadow-[4px_4px_0_rgba(0,0,0)] hover:drop-shadow-[0_0_0_rgba(0,0,0)] transition"
35-
href="https://github.com/RustLangES"
36-
target="_blank"
37-
>
38-
Github
39-
</a>
40-
</li>
41-
<li>
42-
<a
43-
class="tracking-widest font-light border border-black flex items-center px-4 h-9 bg-orange-300 hover:bg-black hover:text-white drop-shadow-[4px_4px_0_rgba(0,0,0)] hover:drop-shadow-[0_0_0_rgba(0,0,0)] transition"
44-
href="https://discord.gg/4ng5HgmaMg"
45-
target="_blank"
46-
>
47-
Discord
48-
</a>
49-
</li>
50-
</ul>
51-
</nav>
52-
</div>
53-
</header>
9+
<Header />
5410
<div class="flex items-center justify-center py-32">
5511
<div class="flex items-center gap-x-20">
5612
<figure>
@@ -68,25 +24,6 @@ pub fn Hero(cx: Scope) -> impl IntoView {
6824
</div>
6925
</div>
7026
</div>
71-
/* <div class="py-6">
72-
<div class="container mx-auto">
73-
<h2 class="text-lg text-center mb-2">Comunidad</h2>
74-
<p class="mb-4 text-center text-xs font-light">
75-
Unete a nuestra comunidad en Discord, Telegram y Github
76-
</p>
77-
<div class="flex justify-center gap-x-12">
78-
<a href="https://discord.gg/4ng5HgmaMg" target="_blank">
79-
<DiscordIcon />
80-
</a>
81-
<a href="https://github.com/RustLangES" target="_blank">
82-
<GithubIcon />
83-
</a>
84-
<a href="https://t.me/rust_es" target="_blank">
85-
<TelegramIcon />
86-
</a>
87-
</div>
88-
</div>
89-
</div> */
9027
</section>
9128
}
9229
}

‎src/components/icons/discord_icon.rs

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
use leptos::*;
2+
3+
#[component]
4+
pub fn DiscordIcon(
5+
cx: Scope,
6+
#[prop(default = 40)] size: u32,
7+
#[prop(default = "fill-black".to_string())] class: String,
8+
) -> impl IntoView {
9+
view!{
10+
cx,
11+
<svg
12+
width=size
13+
height=size
14+
viewBox="0 0 24 24"
15+
class=class
16+
xmlns="http://www.w3.org/2000/svg"
17+
>
18+
<path
19+
d="M19.2701 5.33C17.9401 4.71 16.5001 4.26 15.0001 4C14.987 3.99958 14.9739 4.00205 14.9618 4.00723C14.9497 4.01241 14.9389 4.02019 14.9301 4.03C14.7501 4.36 14.5401 4.79 14.4001 5.12C12.8091 4.88 11.1911 4.88 9.60012 5.12C9.46012 4.78 9.25012 4.36 9.06012 4.03C9.05012 4.01 9.02012 4 8.99012 4C7.49012 4.26 6.06012 4.71 4.72012 5.33C4.71012 5.33 4.70012 5.34 4.69012 5.35C1.97012 9.42 1.22012 13.38 1.59012 17.3C1.59012 17.32 1.60012 17.34 1.62012 17.35C3.42012 18.67 5.15012 19.47 6.86012 20C6.89012 20.01 6.92012 20 6.93012 19.98C7.33012 19.43 7.69012 18.85 8.00012 18.24C8.02012 18.2 8.00012 18.16 7.96012 18.15C7.39012 17.93 6.85012 17.67 6.32012 17.37C6.28012 17.35 6.28012 17.29 6.31012 17.26C6.42012 17.18 6.53012 17.09 6.64012 17.01C6.66012 16.99 6.69012 16.99 6.71012 17C10.1501 18.57 13.8601 18.57 17.2601 17C17.2801 16.99 17.3101 16.99 17.3301 17.01C17.4401 17.1 17.5501 17.18 17.6601 17.27C17.7001 17.3 17.7001 17.36 17.6501 17.38C17.1301 17.69 16.5801 17.94 16.0101 18.16C15.9701 18.17 15.9601 18.22 15.9701 18.25C16.2901 18.86 16.6501 19.44 17.0401 19.99C17.0701 20 17.1001 20.01 17.1301 20C18.8501 19.47 20.5801 18.67 22.3801 17.35C22.4001 17.34 22.4101 17.32 22.4101 17.3C22.8501 12.77 21.6801 8.84 19.3101 5.35C19.3001 5.34 19.2901 5.33 19.2701 5.33ZM8.52012 14.91C7.49012 14.91 6.63012 13.96 6.63012 12.79C6.63012 11.62 7.47012 10.67 8.52012 10.67C9.58012 10.67 10.4201 11.63 10.4101 12.79C10.4101 13.96 9.57012 14.91 8.52012 14.91ZM15.4901 14.91C14.4601 14.91 13.6001 13.96 13.6001 12.79C13.6001 11.62 14.4401 10.67 15.4901 10.67C16.5501 10.67 17.3901 11.63 17.3801 12.79C17.3801 13.96 16.5501 14.91 15.4901 14.91Z"
20+
/>
21+
</svg>
22+
}
23+
}

‎src/components/icons/github_icon.rs

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
use leptos::*;
2+
3+
#[component]
4+
pub fn GithubIcon (
5+
cx: Scope,
6+
#[prop(default = 40)] size: u32,
7+
#[prop(default = "fill-black".to_string())] class: String,
8+
) -> impl IntoView {
9+
view! {
10+
cx,
11+
<svg
12+
width=size
13+
height=size
14+
viewBox="0 0 24 24"
15+
class=class
16+
xmlns="http://www.w3.org/2000/svg"
17+
>
18+
<path
19+
d="M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 16.42 4.87 20.17 8.84 21.5C9.34 21.58 9.5 21.27 9.5 21V19.31C6.73 19.91 6.14 17.97 6.14 17.97C5.68 16.81 5.03 16.5 5.03 16.5C4.12 15.88 5.1 15.9 5.1 15.9C6.1 15.97 6.63 16.93 6.63 16.93C7.5 18.45 8.97 18 9.54 17.76C9.63 17.11 9.89 16.67 10.17 16.42C7.95 16.17 5.62 15.31 5.62 11.5C5.62 10.39 6 9.5 6.65 8.79C6.55 8.54 6.2 7.5 6.75 6.15C6.75 6.15 7.59 5.88 9.5 7.17C10.29 6.95 11.15 6.84 12 6.84C12.85 6.84 13.71 6.95 14.5 7.17C16.41 5.88 17.25 6.15 17.25 6.15C17.8 7.5 17.45 8.54 17.35 8.79C18 9.5 18.38 10.39 18.38 11.5C18.38 15.32 16.04 16.16 13.81 16.41C14.17 16.72 14.5 17.33 14.5 18.26V21C14.5 21.27 14.66 21.59 15.17 21.5C19.14 20.16 22 16.42 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z"
20+
/>
21+
</svg>
22+
}
23+
}

‎src/components/atom/mod.rs ‎src/components/icons/mod.rs

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
pub mod github_icon;
21
pub mod discord_icon;
3-
pub mod telegram_icon;
2+
pub mod github_icon;
3+
pub mod telegram_icon;

‎src/components/icons/telegram_icon.rs

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
use leptos::*;
2+
3+
#[component]
4+
pub fn TelegramIcon(
5+
cx: Scope,
6+
#[prop(default = 40)] size: u32,
7+
#[prop(default = "fill-black".to_string())] class: String,
8+
) -> impl IntoView {
9+
view! {
10+
cx,
11+
<svg
12+
width=size
13+
height=size
14+
viewBox="0 0 24 24"
15+
class=class
16+
xmlns="http://www.w3.org/2000/svg"
17+
>
18+
<path
19+
d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM16.64 8.8C16.49 10.38 15.84 14.22 15.51 15.99C15.37 16.74 15.09 16.99 14.83 17.02C14.25 17.07 13.81 16.64 13.25 16.27C12.37 15.69 11.87 15.33 11.02 14.77C10.03 14.12 10.67 13.76 11.24 13.18C11.39 13.03 13.95 10.7 14 10.49C14.0069 10.4582 14.006 10.4252 13.9973 10.3938C13.9886 10.3624 13.9724 10.3337 13.95 10.31C13.89 10.26 13.81 10.28 13.74 10.29C13.65 10.31 12.25 11.24 9.52 13.08C9.12 13.35 8.76 13.49 8.44 13.48C8.08 13.47 7.4 13.28 6.89 13.11C6.26 12.91 5.77 12.8 5.81 12.45C5.83 12.27 6.08 12.09 6.55 11.9C9.47 10.63 11.41 9.79 12.38 9.39C15.16 8.23 15.73 8.03 16.11 8.03C16.19 8.03 16.38 8.05 16.5 8.15C16.6 8.23 16.63 8.34 16.64 8.42C16.63 8.48 16.65 8.66 16.64 8.8Z"
20+
/>
21+
</svg>
22+
}
23+
}

‎src/components/layout/community_links.rs

-35
This file was deleted.

‎src/components/layout/header.rs

-20
This file was deleted.

‎src/components/layout/hero.rs

-19
This file was deleted.

‎src/components/layout/mod.rs

-4
This file was deleted.

0 commit comments

Comments
 (0)