Migrate social_link components

src/app/components/mod.rs

@@ -2,4 +2,7 @@ mod tag;
 pub use tag::Tag;
 
 mod link;
-pub use link::Link;
+pub use link::Link;
+
+mod social_link;
+pub use social_link::{SocialLinkContainer, SocialLink};

src/app/components/social_link.rs

@@ -0,0 +1,27 @@
+use leptos::*;
+use leptos_icons::*;
+
+#[component]
+pub fn SocialLinkContainer(
+    children: Children
+) -> impl IntoView {
+    view! {
+        <div class="flex gap-5 justify-center flex-wrap my-5">
+            { children() }
+        </div>
+    }
+}
+
+#[component]
+pub fn SocialLink(
+    children: Children,
+    url: String,
+    icon: Icon,
+) -> impl IntoView {
+    view! {
+        <a class="mx-auto scale-150 mb-1" href=url target="_blank">
+            <Icon icon=icon class="mx-auto scale-150 mb-1" />
+            <span class="text-sm">{ children() }</span>
+        </a>
+    }
+}

src/app/mod.rs

@@ -3,6 +3,8 @@ mod components;
 use leptos::*;
 use leptos_meta::*;
 use leptos_router::*;
+use leptos_icons::FaIcon::FaGithubBrands;
+use leptos_icons::*;
 
 #[component]
 pub fn App() -> impl IntoView {
@@ -29,6 +31,10 @@ fn Home() -> impl IntoView {
             <p class="px-10 pb-10 text-left">"Tailwind will scan your Rust files for Tailwind class names and compile them into a CSS file."</p>
             <components::Tag>Salut</components::Tag>
             <components::Link>Salut</components::Link>
+            <components::SocialLinkContainer>
+                <components::SocialLink icon=Icon::from(FaGithubBrands) url="https://github.com/mrdev023".to_string()>Github</components::SocialLink>
+                <components::SocialLink icon=Icon::from(FaGithubBrands) url="https://github.com/mrdev023".to_string()>Github</components::SocialLink>
+            </components::SocialLinkContainer>
             <button
                 class="bg-amber-600 hover:bg-sky-700 px-5 py-3 text-white rounded-lg"
                 on:click=move |_| set_count.update(|count| *count += 1)