Skip to content

Commit e01d4d8

Browse files
Brayan-724Brayan-724
committed
fix: Responsive books on /aprende
1 parent fde71ff commit e01d4d8

File tree

2 files changed

+84
-81
lines changed

2 files changed

+84
-81
lines changed

‎src/components/aprende/books.rs

+83-80
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
use leptos::{component, view, IntoView};
1+
use leptos::{component, view, Children, IntoView};
2+
use std::collections::HashMap;
23

34
use crate::components::ButtonLink;
45

@@ -41,39 +42,15 @@ BookData {
4142
pub fn Books() -> impl IntoView {
4243
let book = |book: BookData| {
4344
view! {
44-
<section class="w-full md:w-1/2 lg:w-1/3 min-h-[28rem] px-8">
45-
<div class="relative group flex flex-col gap-y-6 border border-black p-2 sm:p-6 bg-orange-100 dark:hover:bg-zinc-900/40 dark:bg-black/40 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] justify-between group transition-all transform min-h-[inherit]">
46-
{book
47-
.english
48-
.then_some(|| {
49-
view! {
50-
<span class="absolute top-0 end-0 inline-flex items-center size-3.5 group-hover:min-w-28 rounded-full border-2 border-white text-xs font-medium transition-all transform -translate-y-1/2 translate-x-1/2 bg-blue-400 dark:border-slate-900 badge-container">
51-
<span class="sr-only text-black badge-content transition-all transform">
52-
"En Inglés"
53-
</span>
54-
</span>
55-
}
56-
})}
57-
<h1 class="font-alfa-slab text-xl sm:text-2xl lg:text-3xl text-center mb-5">
58-
{book.name}
59-
</h1> <p class="container mx-auto">{book.description}</p>
60-
{(!book.complete)
61-
.then_some(|| {
62-
view! {
63-
<div class="flex gap-2 items-center bg-orange-200 rounded-md px-2 py-3">
64-
<p class="font-work-sans text-black text-sm">
65-
"ℹ️ Este Libro está marcado como incompleto"
66-
</p>
67-
</div>
68-
}
69-
})}
70-
<div class="mx-auto">
71-
<ButtonLink href=book.url size="big" class="max-w-fit">
72-
{book.url_name}
73-
</ButtonLink>
74-
</div>
75-
</div>
76-
</section>
45+
<Book title={book.name} description={book.description} link={book.url} link_text={book.url_name} incomplete={!book.complete}>
46+
{book
47+
.english
48+
.then_some(|| {
49+
view! {
50+
<Badge color="teal"> "En Inglés" </Badge>
51+
}
52+
})}
53+
</Book>
7754
}
7855
};
7956

@@ -95,51 +72,13 @@ pub fn Books() -> impl IntoView {
9572
"Hemos dedicado tiempo y esfuerzo a adaptar libros al español, estamos orgullosos de compartir estos recursos, esperando que contribuyan al acceso y comprensión de valiosos conocimientos."
9673
</p>
9774
</div>
98-
<div class="flex flex-col md:flex-row justify-center items-center container mx-auto mb-16 md:mb-28 gap-4">
99-
<section class="w-full md:w-1/2 px-8">
100-
<div class="relative group flex flex-col gap-y-6 border border-black p-2 sm:p-6 bg-orange-100 dark:hover:bg-zinc-900/40 dark:bg-black/40 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] justify-between group transition-all transform">
101-
<span class="absolute top-0 end-0 inline-flex items-center size-3.5 group-hover:min-w-28 rounded-full border-2 border-white text-xs font-medium transition-all transform -translate-y-1/2 translate-x-1/2 bg-teal-500 dark:border-slate-900 badge-container">
102-
<span class="sr-only text-black badge-content transition-all transform ">
103-
"Recomendado"
104-
</span>
105-
</span>
106-
<h1 class="font-alfa-slab text-xl sm:text-2xl lg:text-3xl text-center mb-5">
107-
"El Lenguaje de Programación Rust"
108-
</h1>
109-
<p class="container mx-auto">
110-
"Cariñosamente conocido como “el libro”, El Lenguaje de Programación Rust te dará una visión del lenguaje desde los principios básicos. Construirás unos cuantos proyectos por el camino y, al final, tendrás una comprensión sólida del lenguaje."
111-
</p>
112-
<div class="mx-auto">
113-
<ButtonLink href="https://rustlang-es.org/rust-book-es" size="big">
114-
"Ir a “El Libro”"
115-
</ButtonLink>
116-
</div>
117-
</div>
118-
</section>
119-
120-
<section class="w-full md:w-1/2 px-8 flex flex-col h-full">
121-
<div class="group flex flex-col gap-y-6 border border-black p-2 sm:p-6 bg-orange-100 dark:hover:bg-zinc-900/40 dark:bg-black/40 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between">
122-
<span class="absolute top-0 end-0 inline-flex items-center size-3.5 group-hover:min-w-28 rounded-full border-2 border-white text-xs font-medium transition-all transform -translate-y-1/2 translate-x-1/2 bg-yellow-500 dark:border-slate-900 badge-container">
123-
<span class="sr-only text-black badge-content transition-all transform ">
124-
"¡En Progreso!"
125-
</span>
126-
</span>
127-
<h1 class="font-alfa-slab text-xl sm:text-2xl lg:text-3xl text-center mb-5">
128-
"Rust para C#/.NET Developers"
129-
</h1>
130-
<p class="container mx-auto">
131-
"La guía esta hecha por la misma Microsoft y es para desarrolladores experimentados en C#/.NET que exploran Rust. Ofrece una breve comparación, enlaces a recursos y respuestas rápidas."
132-
</p>
133-
<div class="mx-auto">
134-
<ButtonLink
135-
href="https://rustlang-es.org/rust-para-dotnet-devs"
136-
size="big"
137-
>
138-
"Ir a la guía"
139-
</ButtonLink>
140-
</div>
141-
</div>
142-
</section>
75+
<div class="grid grid-cols-1 md:grid-cols-2 container mx-auto mb-16 md:mb-28 gap-4 h-fit">
76+
<Book title="El lenguaje de Programación Rust" description="Cariñosamente conocido como “el libro”, El Lenguaje de Programación Rust te dará una visión del lenguaje desde los principios básicos. Construirás unos cuantos proyectos por el camino y, al final, tendrás una comprensión sólida del lenguaje." link="https://rustlang-es.org/rust-book-es" link_text="Ir a “El Libro”">
77+
<Badge color="teal"> "Recomendado" </Badge>
78+
</Book>
79+
<Book title="Rust para C#/.NET Developers" description="La guía esta hecha por la misma Microsoft y es para desarrolladores experimentados en C#/.NET que exploran Rust. Ofrece una breve comparación, enlaces a recursos y respuestas rápidas." link="https://rustlang-es.org/rust-para-dotnet-devs" link_text="Ir a la guía">
80+
<Badge color="yellow"> "¡En Progreso!" </Badge>
81+
</Book>
14382
</div>
14483

14584
<div class="container mx-auto mb-5">
@@ -150,9 +89,73 @@ pub fn Books() -> impl IntoView {
15089
"Estos son algunos otros libros que nos interesa compartir."
15190
</p>
15291
</div>
153-
<div class="flex flex-row flex-wrap w-full gap-y-6 justify-center items-center container mx-auto">
92+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 w-full gap-y-6 container mx-auto">
15493
{books_list}
15594
</div>
15695
</section>
15796
}
15897
}
98+
99+
#[component]
100+
fn Book(
101+
#[prop(into)]
102+
title: String,
103+
#[prop(into)]
104+
description: String,
105+
#[prop(into)]
106+
link: String,
107+
#[prop(into)]
108+
link_text: String,
109+
#[prop(optional)]
110+
incomplete: bool,
111+
children: Children) -> impl IntoView {
112+
view! {
113+
<article class="w-full h-full px-8">
114+
<div class="h-full relative group flex flex-col gap-y-6 border border-black p-2 sm:p-6 bg-orange-100 dark:hover:bg-zinc-900/40 dark:bg-black/40 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] justify-between group transition-all transform">
115+
{children()}
116+
<h1 class="font-alfa-slab text-xl sm:text-2xl lg:text-3xl text-center mb-5">
117+
{title}
118+
</h1>
119+
<p class="container mx-auto text-pretty"> {description} </p>
120+
{incomplete
121+
.then_some(|| {
122+
view! {
123+
<div class="flex gap-2 items-center bg-orange-200 rounded-md px-2 py-3">
124+
<p class="font-work-sans text-black text-sm">
125+
"ℹ️ Este Libro está marcado como incompleto"
126+
</p>
127+
</div>
128+
}
129+
})}
130+
<div class="mx-auto">
131+
<ButtonLink href={link} size="big">
132+
{link_text}
133+
</ButtonLink>
134+
</div>
135+
</div>
136+
</article>
137+
}
138+
}
139+
140+
#[component]
141+
fn Badge(
142+
color: &'static str,
143+
children: Children) -> impl IntoView {
144+
let colors = HashMap::from([
145+
("teal", "bg-teal-500"),
146+
("yellow", "bg-yellow-500"),
147+
]);
148+
let color = (*colors.get(&color).expect("Unknown color")).to_string();
149+
150+
view! {
151+
<span class=format!(
152+
"absolute top-0 end-0 inline-flex items-center size-3.5 group-hover:min-w-28 rounded-full border-2 border-white text-xs font-medium transition-all transform -translate-y-1/2 translate-x-1/2 badge-container dark:border-slate-900 {}",
153+
color
154+
)>
155+
<span class="sr-only text-black badge-content transition-all transform">
156+
{children()}
157+
</span>
158+
</span>
159+
}
160+
}
161+

‎src/components/button_link.rs

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ pub fn ButtonLink(
3131
href=href
3232
target="_blank"
3333
class=format!(
34-
"tracking-wider font-work-sans border border-black dark:border-white flex items-center px-4 transition w-fit gap-x-4 sm:whitespace-nowrap max-w-[10rem] sm:max-w-none {} {} {} {}",
34+
"tracking-wider text-center font-work-sans border border-black dark:border-white flex items-center px-4 transition w-fit gap-x-4 max-w-[10rem] sm:max-w-none {} {} {} {}",
3535
current_color,
3636
current_size,
3737
class,

0 commit comments

Comments
 (0)