Migrate link and tag components

src/app/components/link.rs

@@ -0,0 +1,17 @@
+use leptos::*;
+use leptos_icons::FiIcon::FiExternalLink;
+use leptos_icons::*;
+
+#[component]
+pub fn Link(
+    #[prop[optional]]
+    url: String,
+    children: Children
+) -> impl IntoView {
+    view! {
+        <a class="flex gap-1 font-semibold italic" href={url} target="_blank">
+            { children() }
+            <i class="flex items-center"><Icon icon=Icon::from(FiExternalLink) class="scale-75" /></i>
+        </a>
+    }
+}

src/app/components/mod.rs

@@ -0,0 +1,5 @@
+mod tag;
+pub use tag::Tag;
+
+mod link;
+pub use link::Link;

src/app/components/tag.rs

@@ -0,0 +1,14 @@
+use leptos::*;
+
+#[component]
+pub fn Tag(
+    #[prop[optional]]
+    url: String,
+    children: Children
+) -> impl IntoView {
+    view! {
+        <a class="rounded-lg px-3 py-1 font-normal text-sm bg-primary dark:bg-dark_primary text-on_primary dark:text-dark_on_primary" href=url target="_blank">
+            {children()}
+        </a>
+    }
+}

src/app/mod.rs

@@ -1,3 +1,5 @@
+mod components;
+
 use leptos::*;
 use leptos_meta::*;
 use leptos_router::*;
@@ -7,7 +9,6 @@ pub fn App() -> impl IntoView {
     provide_meta_context();
 
     view! {
-
         <Stylesheet id="leptos" href="/pkg/portfolio.css"/>
         <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
         <Router>
@@ -26,6 +27,8 @@ fn Home() -> impl IntoView {
         <main class="my-0 mx-auto max-w-3xl text-center">
             <h2 class="p-6 text-4xl">"Welcome to Leptos with Tailwind"</h2>
             <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>
             <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)