Se agregan y modifican componentes para el hacktoberfest

Author: Wilovy09

src/components/button_large_link.rs

@@ -0,0 +1,46 @@
+use leptos::{component, view, Children, IntoView};
+use std::collections::HashMap;
+
+#[component]
+pub fn ButtonLargeLink(
+    #[prop(into)] href: String,
+    #[prop(default = "primary")] color: &'static str,
+    #[prop(default = "normal")] size: &'static str,
+    #[prop(default = "drop")] shadow: &'static str,
+    #[prop(into, optional)] class: String,
+    children: Children,
+) -> impl IntoView {
+    let colors = HashMap::from([
+        (
+            "primary",
+            "bg-orange-200 dark:bg-transparent hover:bg-black hover:text-white",
+        ),
+        ("white", "bg-orange-100 dark:bg-transparent hover:bg-black hover:text-white"),
+    ]);
+    let shadows = HashMap::from([
+        ("drop", "drop-shadow-[4px_4px_0_rgba(0,0,0)] hover:drop-shadow-[0_0_0_rgba(0,0,0)]"),
+        ("box", "drop-shadow-[4px_4px_0_rgba(0,0,0)] hover:drop-shadow-[0_0_0_rgba(0,0,0)] dark:drop-shadow-none shadow-sm hover:drop-shadow-none dark:hover:shadow-lg shadow-black"),
+    ]);
+    let sizes = HashMap::from([("tiny", "min-h-7"), ("normal", "h-9"), ("big", "h-12")]);
+    let current_color = (*colors.get(&color).unwrap()).to_string();
+    let current_size = (*sizes.get(&size).unwrap()).to_string();
+    let shadow = (*shadows.get(&shadow).unwrap()).to_string();
+
+    view! {
+        <a
+            href=href
+            target="_blank"
+            class=format!(
+                "tracking-wider text-center font-work-sans border border-black dark:border-white flex items-center px-4 transition w-full max-w-full sm:max-w-[20rem] gap-x-4 {} {} {} {} whitespace-nowrap",
+                current_color,
+                current_size,
+                class,
+                shadow,
+            )
+        >
+
+            {children()}
+        </a>
+    }
+}
+

src/components/button_link.rs

@@ -15,7 +15,7 @@ pub fn ButtonLink(
             "primary",
             "bg-orange-200 dark:bg-transparent hover:bg-black hover:text-white",
         ),
-        ("white", "bg-orange-100 dark:bg-transparent hover:bg-black"),
+        ("white", "bg-orange-100 dark:bg-transparent hover:bg-black hover:text-white"),
     ]);
     let shadows = HashMap::from([
         ("drop", "drop-shadow-[4px_4px_0_rgba(0,0,0)] hover:drop-shadow-[0_0_0_rgba(0,0,0)]"),

src/components/hacktoberfest.rs

@@ -0,0 +1,61 @@
+use leptos::{component, view, IntoView};
+
+use crate::components::{
+    button_link::ButtonLink,
+    button_large_link::ButtonLargeLink,
+    icons::{DiscordIcon, CalendarIcon, GithubIcon},
+};
+
+#[component]
+pub fn Hacktoberfest() -> impl IntoView {
+    view! {
+        <section class="bg-orange-200/30 dark:bg-transparent">
+            <div class="container mx-auto px-4">
+                <div class="flex flex-col items-center py-20 gap-y-6">
+                    <h2 class="text-4xl text-center mb-4">
+                        <span class="font-work-sans font-light">
+                            "🚀 ¡Únete a la celebración del" 
+                            <span class="font-alfa-slab text-orange-500">" Hacktoberfest "</span>
+                            "con nosotros! 🚀"
+                        </span>
+                    </h2>
+                    <p class="text-center text-xl">
+                        "Este" <span class="text-orange-500 font-alfa-slab">" 28 de septiembre"</span>"
+                        , nuestro comunidad se une a este emocionante evento de programación. 
+                        Aprovecha esta excelente oportunidad para contribuir a proyectos open-source, aprender nuevas habilidades 
+                        y conectar con otros amantes del open-source."
+                    </p>
+                    <div class="flex items-center gap-x-12 gap-y-6 flex-col *:w-full sm:flex-row">
+                        <ButtonLink
+                            href="https://discord.gg/4ng5HgmaMg"
+                            shadow="box"
+                            color="white"
+                            size="big"
+                        >
+                            <DiscordIcon size=30/>
+                            "Participa"
+                        </ButtonLink>
+                        <ButtonLargeLink
+                            href="https://calendar.google.com/calendar/event?action=TEMPLATE&tmeid=M2ZiMjhzbGNqbTZoMjNrZ2ZpbW4zYzk1ZGUgZGFmYzYyODQwMzRkOWJlZjNlMzFkZTNiZDE1OTI2OGQ5OGU4YzlhOGY2MjU3Mzk4NGI3MGE1OWQ2NjU3ZjVhZkBn&tmsrc=dafc6284034d9bef3e31de3bd159268d98e8c9a8f62573984b70a59d6657f5af%40group.calendar.google.com"
+                            shadow="box"
+                            color="white"
+                            size="big"
+                        >
+                            <CalendarIcon size=30/>
+                            "Añade a tu calendario"
+                        </ButtonLargeLink>
+                        <ButtonLargeLink
+                            href="https://github.com/RustLangES"
+                            shadow="box"
+                            color="white"
+                            size="big"
+                        >
+                            <GithubIcon size=30/>
+                            "Postula tu proyecto"
+                        </ButtonLargeLink>
+                    </div>
+                </div>
+            </div>
+        </section>
+    }
+}

src/components/mod.rs

@@ -1,5 +1,6 @@
 mod aprende;
 mod button_link;
+mod button_large_link;
 mod cards;
 mod community_projects;
 mod footer;
@@ -8,13 +9,15 @@ mod header;
 mod hero;
 mod icons;
 mod other_communities;
+mod hacktoberfest;
 mod our_communities;
 pub mod separator;
 mod slogan_button;
 mod sponsors;
 
 pub use aprende::{Books, HeaderAprende, Roadmap, Youtube};
 pub use button_link::ButtonLink;
+pub use button_large_link::ButtonLargeLink;
 pub use cards::{CardTitle, CommunityCard, ContributorCard, ProjectCard};
 pub use community_projects::CommunityProjects;
 pub use footer::Footer;
@@ -25,6 +28,8 @@ pub use icons::{
     CloudflareIcon, DiscordIcon, GithubIcon, LinkedinIcon, LocationIcon, NextIcon, TelegramIcon,
     TwitterIcon,
 };
+
+pub use hacktoberfest::Hacktoberfest;
 pub use other_communities::OtherCommunities;
 pub use our_communities::OurCommunities;
 pub use separator::Separator;