Migrate link and tag components

Cargo.lock

@@ -1144,6 +1144,41 @@ dependencies = [
  "want",
 ]
 
+[[package]]
+name = "icondata"
+version = "0.0.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f41f2deec9249d16ef6b1a8442fbe16013f67053797052aa0b7d2f5ebd0f0098"
+dependencies = [
+ "icondata_core",
+ "icondata_fa",
+ "icondata_fi",
+]
+
+[[package]]
+name = "icondata_core"
+version = "0.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1640a4c1d5ddd08ab1d9854ffa7a2fa3dc52339492676b6d3031e77ca579f434"
+
+[[package]]
+name = "icondata_fa"
+version = "0.0.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a515ecda53468cf4a383409da1708da2e4c00253561873c46304cd7f412e9414"
+dependencies = [
+ "icondata_core",
+]
+
+[[package]]
+name = "icondata_fi"
+version = "0.0.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a68806fd5abc6bcf395fc54f6193b0f9085aa2a6c740d72825e7e43be4d6a366"
+dependencies = [
+ "icondata_core",
+]
+
 [[package]]
 name = "ident_case"
 version = "1.0.1"
@@ -1373,6 +1408,17 @@ dependencies = [
  "walkdir",
 ]
 
+[[package]]
+name = "leptos_icons"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8b3fad7820b18b983d49ff4262df88de94dc8fd993278937979cc0dd188868e5"
+dependencies = [
+ "icondata",
+ "leptos",
+ "tracing",
+]
+
 [[package]]
 name = "leptos_integration_utils"
 version = "0.5.1"
@@ -1766,6 +1812,7 @@ dependencies = [
  "gloo-net 0.4.0",
  "leptos",
  "leptos_actix",
+ "leptos_icons",
  "leptos_meta",
  "leptos_router",
  "log",

Cargo.toml

@@ -17,6 +17,12 @@ gloo-net = { version = "0.4.0", features = ["http"] }
 log = "0.4"
 cfg-if = "1.0"
 
+# https://carlosted.github.io/icondata/
+leptos_icons = { version = "0.1.0", features = [
+    "FiExternalLink",
+    "FaGithubBrands",
+]}
+
 # dependecies for client (enable when csr or hydrate set)
 wasm-bindgen = { version = "0.2", optional = true }
 console_log = { version = "1", optional = true }

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)

src_old/components/Link.scss

@@ -1,11 +0,0 @@
-.link {
-    @apply flex gap-1 font-semibold italic;
-
-    & > i {
-        @apply flex items-center;
-
-        & > svg {
-            @apply scale-75;
-        }
-    }
-}

src_old/components/Link.tsx

@@ -1,19 +0,0 @@
-import react, { ReactNode } from 'react';
-import './Link.scss'
-import { FaExternalLinkAlt } from 'react-icons/fa';
-
-type LinkProps = {
-    children: ReactNode,
-    url: string
-}
-
-function Link({ children, url }: LinkProps) {
-    return (
-        <a className="link" href={url} target='_blank'>
-            { children }
-            <i><FaExternalLinkAlt/></i>
-        </a>
-    )
-}
-
-export default Link

src_old/components/Tag.scss

@@ -1,4 +0,0 @@
-.tag {
-    @apply rounded-lg px-3 py-1 font-normal text-sm;
-    @apply bg-primary dark:bg-dark_primary text-on_primary dark:text-dark_on_primary;
-}

src_old/components/Tag.tsx

@@ -1,16 +0,0 @@
-import './Tag.scss'
-
-type TagProps = {
-    name: string,
-    url?: string
-}
-
-function Tag({ name, url }: TagProps) {
-    return (
-        <a className="tag" href={url} target='_blank'>
-            {name}
-        </a>
-    )
-}
-
-export default Tag

src_old/index.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;