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)

src_old/components/social_link/SocialLink.tsx

@@ -1,18 +0,0 @@
-import react, { ReactNode } from 'react'
-
-type SocialLinkProps = {
-    icon: ReactNode,
-    url: string,
-    name: string
-}
-
-function SocialLink({ icon, url, name }: SocialLinkProps) {
-    return (
-        <a className="social_link" href={url} target="_blank">
-            {icon}
-            <span>{name}</span>
-        </a>
-    )
-}
-
-export default SocialLink

src_old/components/social_link/SocialLinks.scss

@@ -1,13 +0,0 @@
-.social_links {
-    @apply flex gap-5 justify-center flex-wrap my-5;
-
-    & > .social_link {
-        & > svg {
-            @apply mx-auto scale-150 mb-1;
-        }
-
-        & > span {
-            @apply text-sm;
-        }
-    }
-}

src_old/components/social_link/SocialLinks.tsx

@@ -1,16 +0,0 @@
-import './SocialLinks.scss'
-import react, { ReactNode } from 'react'
-
-type SocialLinksProps = {
-    children: ReactNode
-}
-
-function SocialLinks({ children }: SocialLinksProps) {
-    return (
-        <div className='social_links'>
-            {children}
-        </div>
-    )
-}
-
-export default SocialLinks