Skip to content

Commit 57e62d7

Browse files
Phosphorus-MPhosphorus-M
committed
feat: add DailyChallenges and Channels components, include Clippy example image, and update styles for Resources
1 parent 4a8bb77 commit 57e62d7

File tree

7 files changed

+216
-6
lines changed

7 files changed

+216
-6
lines changed

‎assets/new/images/clippy-example.png‎

276 KB
Loading

‎input.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,3 +98,9 @@
9898
aspect-ratio: 0.75;
9999
clip-path: shape(from 86.92% 2.32%,curve to 80.37% 0% with 85.31% 0.85%/82.91% 0%,hline to 8.48%,curve to 0% 6.36% with 3.8% 0%/0% 2.85%,vline to 93.64%,curve to 8.48% 100% with 0% 97.15%/3.8% 100%,hline to 91.52%,curve to 100% 93.64% with 96.2% 100%/100% 97.15%,vline to 16.52%,curve to 98.07% 12.47% with 100% 15.04%/99.32% 13.61%,line to 86.92% 2.32%,close);
100100
}
101+
102+
103+
.drop-shadow-cards {
104+
filter: drop-shadow(0px 0px 0px #000000) drop-shadow(4px 4px 0px #000000);
105+
@apply h-auto w-full stroke-[#000000];
106+
}

‎src/components/challenges.rs‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
use leptos::{component, prelude::*};
2+
use rustlanges_components::button::{Button, Variant as ButtonVariant};
3+
4+
pub fn DailyChallenges() -> impl IntoView {
5+
view! {
6+
<section class="bg-primary-500 dark:bg-primary-600 p-4 lg:p-20 w-full">
7+
<div class="container xl:min-w-[9rem] lg:px-32 mx-auto">
8+
<div class="bg-neutral-50 dark:bg-neutral-900 p-8 py-4 md:p-20 md:py-10 rounded-2xl drop-shadow-cards flex flex-row flex-wrap md:flex-nowrap justify-center items-stretch gap-4">
9+
<div class="md:w-1/2 gap-4 lg:gap-8 flex flex-col font-body justify-between xl:p-12">
10+
<div class="gap-4 flex flex-col not-md:justify-center not-md:items-center w-full">
11+
<h1 class="text-heading-1 font-bold">Retos Diarios</h1>
12+
<p class="text-body not-md:text-center">
13+
Encuentra más ejemplos de aplicación de Rust practicando con nuestros retos diarios
14+
</p>
15+
</div>
16+
<Button
17+
variant=ButtonVariant::Primary
18+
class="bg-primary-500 hidden md:block"
19+
on_click=|_| {}
20+
label="Practicar"
21+
/>
22+
</div>
23+
<div class="md:w-1/2 flex flex-col justify-center items-center">
24+
<img src="/assets/new/images/clippy-example.png" class="rounded-xl" />
25+
26+
<Button
27+
variant=ButtonVariant::Primary
28+
class="bg-primary-500 md:hidden mt-4"
29+
on_click=|_| {}
30+
label="Practicar"
31+
/>
32+
</div>
33+
</div>
34+
</div>
35+
</section>
36+
}
37+
}

‎src/components/channels.rs‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
use leptos::prelude::*;
2+
use rustlanges_components::{
3+
avatar::Avatar,
4+
button::{Button, Variant as ButtonVariant},
5+
card::Card,
6+
icons::Youtube,
7+
};
8+
9+
pub fn Channels() -> impl IntoView {
10+
view! {
11+
<section class="bg-light dark:bg-dark p-4 lg:p-20 w-full">
12+
<div class="container xl:max-w-7xl lg:px-36 mx-auto">
13+
<h2 class="text-h2 text-center mb-8 mt-16">"Canales Recomendados"</h2>
14+
</div>
15+
16+
<div class="flex flex-row justify-center items-center max-w-full w-full">
17+
<div class="inline-flex flex-row items-center justify-center gap-8 not-md:overflow-x-auto p-4 md:flex-wrap w-full">
18+
<Card class="w-md">
19+
<div class="flex flex-col gap-4 justify-between h-full">
20+
<div class="flex flex-row items-center gap-4">
21+
<Avatar
22+
url="https://avatars.githubusercontent.com/u/136520331?u=7353ba372f09091049692d6e95f5a8cd8a42565f&v=4"
23+
size=52
24+
/>
25+
<div>
26+
<h2 class="text-heading-3 mt-2 mb-2">"Nombre canal"</h2>
27+
<h3 class="text-paragraph-3 mt-2 mb-2">"Subtítulo"</h3>
28+
</div>
29+
</div>
30+
<div>
31+
<p class="text-paragraph-3 mb-4">
32+
"Breve descripción del canal o recurso contando qué muestra o para qué sirve."
33+
</p>
34+
</div>
35+
<div class="flex items-end justify-end w-full gap-2 flex-wrap">
36+
<Button
37+
variant=ButtonVariant::Icon
38+
on_click=|_| {}
39+
icon=view! { <Youtube /> }.into_any()
40+
/>
41+
</div>
42+
</div>
43+
</Card>
44+
45+
<Card class="w-md">
46+
<div class="flex flex-col gap-4 justify-between h-full">
47+
<div class="flex flex-row items-center gap-4">
48+
<Avatar
49+
url="https://avatars.githubusercontent.com/u/136520331?u=7353ba372f09091049692d6e95f5a8cd8a42565f&v=4"
50+
size=52
51+
/>
52+
<div>
53+
<h2 class="text-heading-3 mt-2 mb-2">"Nombre canal"</h2>
54+
<h3 class="text-paragraph-3 mt-2 mb-2">"Subtítulo"</h3>
55+
</div>
56+
</div>
57+
<div>
58+
<p class="text-paragraph-3 mb-4">
59+
"Breve descripción del canal o recurso contando qué muestra o para qué sirve."
60+
</p>
61+
</div>
62+
<div class="flex items-end justify-end w-full gap-2 flex-wrap">
63+
<Button
64+
variant=ButtonVariant::Icon
65+
on_click=|_| {}
66+
icon=view! { <Youtube /> }.into_any()
67+
/>
68+
</div>
69+
</div>
70+
</Card>
71+
72+
<Card class="w-md">
73+
<div class="flex flex-col gap-4 justify-between h-full">
74+
<div class="flex flex-row items-center gap-4">
75+
<Avatar
76+
url="https://avatars.githubusercontent.com/u/136520331?u=7353ba372f09091049692d6e95f5a8cd8a42565f&v=4"
77+
size=52
78+
/>
79+
<div>
80+
<h2 class="text-heading-3 mt-2 mb-2">"Nombre canal"</h2>
81+
<h3 class="text-paragraph-3 mt-2 mb-2">"Subtítulo"</h3>
82+
</div>
83+
</div>
84+
<div>
85+
<p class="text-paragraph-3 mb-4">
86+
"Breve descripción del canal o recurso contando qué muestra o para qué sirve."
87+
</p>
88+
</div>
89+
<div class="flex items-end justify-end w-full gap-2 flex-wrap">
90+
<Button
91+
variant=ButtonVariant::Icon
92+
on_click=|_| {}
93+
icon=view! { <Youtube /> }.into_any()
94+
/>
95+
</div>
96+
</div>
97+
</Card>
98+
99+
<Card class="w-md">
100+
<div class="flex flex-col gap-4 justify-between h-full">
101+
<div class="flex flex-row items-center gap-4">
102+
<Avatar
103+
url="https://avatars.githubusercontent.com/u/136520331?u=7353ba372f09091049692d6e95f5a8cd8a42565f&v=4"
104+
size=52
105+
/>
106+
<div>
107+
<h2 class="text-heading-3 mt-2 mb-2">"Nombre canal"</h2>
108+
<h3 class="text-paragraph-3 mt-2 mb-2">"Subtítulo"</h3>
109+
</div>
110+
</div>
111+
<div>
112+
<p class="text-paragraph-3 mb-4">
113+
"Breve descripción del canal o recurso contando qué muestra o para qué sirve."
114+
</p>
115+
</div>
116+
<div class="flex items-end justify-end w-full gap-2 flex-wrap">
117+
<Button
118+
variant=ButtonVariant::Icon
119+
on_click=|_| {}
120+
icon=view! { <Youtube /> }.into_any()
121+
/>
122+
</div>
123+
</div>
124+
</Card>
125+
126+
<Card class="w-md">
127+
<div class="flex flex-col gap-4 justify-between h-full">
128+
<div class="flex flex-row items-center gap-4">
129+
<Avatar
130+
url="https://avatars.githubusercontent.com/u/136520331?u=7353ba372f09091049692d6e95f5a8cd8a42565f&v=4"
131+
size=52
132+
/>
133+
<div>
134+
<h2 class="text-heading-3 mt-2 mb-2">"Nombre canal"</h2>
135+
<h3 class="text-paragraph-3 mt-2 mb-2">"Subtítulo"</h3>
136+
</div>
137+
</div>
138+
<div>
139+
<p class="text-paragraph-3 mb-4">
140+
"Breve descripción del canal o recurso contando qué muestra o para qué sirve."
141+
</p>
142+
</div>
143+
<div class="flex items-end justify-end w-full gap-2 flex-wrap">
144+
<Button
145+
variant=ButtonVariant::Icon
146+
on_click=|_| {}
147+
icon=view! { <Youtube /> }.into_any()
148+
/>
149+
</div>
150+
</div>
151+
</Card>
152+
</div>
153+
</div>
154+
</section>
155+
}
156+
}

‎src/components/mod.rs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ pub use icons::{
1010
};
1111

1212
pub mod became_sponsor;
13+
pub mod challenges;
14+
pub mod channels;
1315
pub mod community_project;
1416
pub mod footer;
1517
pub mod our_community;

‎src/components/resources.rs‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,10 @@ pub fn Resources() -> impl IntoView {
2424
<InputSearch on_change_filter=move |resource: ResourceAlias| () />
2525
<div class="gap-6 overflow-x-auto p-4 flex flex-row flex-wrap justify-center items-center">
2626

27-
<Card class="p-4" variant=CardVariant::Resource>
27+
<Card
28+
class="p-4 text-primary-50 dark:text-neutral-900"
29+
variant=CardVariant::Resource
30+
>
2831
<div class="flex flex-col gap-4 justify-between h-full overflow-hidden">
2932
<div>
3033
<Chip label="Destacado" variant=ChipVariant::Featured />

‎src/pages/aprende.rs‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
11
use leptos::prelude::*;
22
use rustlanges_components::button::{Button, Variant as ButtonVariant};
33

4-
use crate::components::resources::Resources;
4+
use crate::components::{challenges::DailyChallenges, channels::Channels, resources::Resources};
55

66
#[component]
77
pub fn Aprende() -> impl IntoView {
88
view! {
99
<div class="w-full h-[65dvh] rustlang-es-background-secondary dark:bg-[#3E1C96CC] text-akira flex items-center justify-center">
1010
<div class="w-full container flex flex-col-reverse md:flex-row items-center justify-center m-auto">
1111
<div class="flex flex-col justify-center gap-8">
12-
<div class="flex flex-col gap-2 justify-center">
12+
<div class="flex flex-col gap-2 justify-center not-md:items-center w-full text-center lg:text-left">
1313
<p class="uppercase text-h1">Aprende Rust</p>
1414
<p class="uppercase text-h1 text-primary-500">En Español</p>
15-
<p>"Roadmap de aprendizaje, libros, guías y más."</p>
16-
<p>"Explora todos los recursos y ¡empieza a tu viaje! 🚀"</p>
15+
<p class="text-heading-4 font-heading-4">
16+
"Roadmap de aprendizaje, libros, guías y más."
17+
</p>
18+
<p class="text-heading-4 font-heading-4">
19+
"Explora todos los recursos y ¡empieza a tu viaje! 🚀"
20+
</p>
1721
</div>
18-
<div class="flex gap-4 flex-wrap max-w-full">
22+
<div class="flex gap-4 flex-wrap w-full not-md:justify-center not-md:items-center">
1923
<Button
2024
variant=ButtonVariant::Primary
2125
class="bg-light"
@@ -34,5 +38,7 @@ pub fn Aprende() -> impl IntoView {
3438
</div>
3539
</div>
3640
<Resources />
41+
<DailyChallenges />
42+
<Channels />
3743
}
3844
}

0 commit comments

Comments
 (0)