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

@@ -0,0 +1,46 @@
+mod components;
+
+use leptos::*;
+use leptos_meta::*;
+use leptos_router::*;
+
+#[component]
+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>
+            <Routes>
+                <Route path="" view=  move || view! { <Home/> }/>
+            </Routes>
+        </Router>
+    }
+}
+
+#[component]
+fn Home() -> impl IntoView {
+    let (count, set_count) = create_signal(0);
+
+    view! {
+        <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)
+            >
+                "Something's here | "
+                {move || if count() == 0 {
+                    "Click me!".to_string()
+                } else {
+                    count().to_string()
+                }}
+                " | Some more text"
+            </button>
+        </main>
+    }
+}