From 5e6f9ec28732c511f6d4e4328f227204dcab6969 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Fri, 12 Jul 2024 10:06:43 +0800
Subject: [PATCH] feat: optimize Text component

---
 demo_markdown/docs/tag/mod.md     | 14 ++----------
 demo_markdown/docs/text/mod.md    |  2 +-
 demo_markdown/src/markdown/mod.rs |  2 +-
 thaw/src/tag/mod.rs               | 10 --------
 thaw/src/text/mod.rs              | 38 +++++++++++++++++++------------
 thaw/src/text/text.css            |  9 ++++++++
 thaw/src/theme/common.rs          |  6 ++++-
 7 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/demo_markdown/docs/tag/mod.md b/demo_markdown/docs/tag/mod.md
index b1416ea..afe6064 100644
--- a/demo_markdown/docs/tag/mod.md
+++ b/demo_markdown/docs/tag/mod.md
@@ -2,12 +2,7 @@
 
 ```rust demo
 view! {
-    <Space>
-        <Tag>"default"</Tag>
-        <Tag variant=TagVariant::Success>"success"</Tag>
-        <Tag variant=TagVariant::Warning>"warning"</Tag>
-        <Tag variant=TagVariant::Error>"error"</Tag>
-    </Space>
+    <Tag>"default"</Tag>
 }
 ```
 
@@ -25,12 +20,7 @@ let success = move |_: SendWrapper<ev::MouseEvent>| {
 };
 
 view! {
-    <Space>
-        <Tag closable=true on_close=success>"Default"</Tag>
-        <Tag closable=true on_close=success variant=TagVariant::Success>"Success"</Tag>
-        <Tag closable=true on_close=success variant=TagVariant::Warning>"Warning"</Tag>
-        <Tag closable=true on_close=success variant=TagVariant::Error>"Error"</Tag>
-    </Space>
+    <Tag closable=true on_close=success>"Default"</Tag>
 }
 ```
 
diff --git a/demo_markdown/docs/text/mod.md b/demo_markdown/docs/text/mod.md
index 8af48bf..5317bb3 100644
--- a/demo_markdown/docs/text/mod.md
+++ b/demo_markdown/docs/text/mod.md
@@ -4,7 +4,7 @@
 view! {
     <Space>
         <Text>"text"</Text>
-        <Text code=true>"code"</Text>
+        <Text tag=TextTag::Code>"code"</Text>
         <Caption1>"Caption1"</Caption1>
         <Caption1Strong>"Caption1Strong"</Caption1Strong>
         <Body1>"Body1"</Body1>
diff --git a/demo_markdown/src/markdown/mod.rs b/demo_markdown/src/markdown/mod.rs
index 9447aad..c1e8b7e 100644
--- a/demo_markdown/src/markdown/mod.rs
+++ b/demo_markdown/src/markdown/mod.rs
@@ -146,7 +146,7 @@ fn iter_nodes<'a>(
         NodeValue::Code(node_code) => {
             let code = node_code.literal.clone();
             quote!(
-                <Text code=true>
+                <Text tag=TextTag::Code>
                     #code
                 </Text>
             )
diff --git a/thaw/src/tag/mod.rs b/thaw/src/tag/mod.rs
index 43f2e64..d0b92de 100644
--- a/thaw/src/tag/mod.rs
+++ b/thaw/src/tag/mod.rs
@@ -2,18 +2,8 @@ use leptos::{either::Either, ev, prelude::*};
 use send_wrapper::SendWrapper;
 use thaw_utils::{class_list, mount_style, OptionalProp};
 
-#[derive(Clone, Copy, Default, PartialEq, Eq, Hash)]
-pub enum TagVariant {
-    #[default]
-    Default,
-    Success,
-    Warning,
-    Error,
-}
-
 #[component]
 pub fn Tag(
-    #[prop(optional, into)] variant: MaybeSignal<TagVariant>,
     #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
     #[prop(optional, into)] closable: MaybeSignal<bool>,
     #[prop(optional, into)] on_close: Option<Callback<SendWrapper<ev::MouseEvent>>>,
diff --git a/thaw/src/text/mod.rs b/thaw/src/text/mod.rs
index 0293446..2cbd262 100644
--- a/thaw/src/text/mod.rs
+++ b/thaw/src/text/mod.rs
@@ -51,86 +51,93 @@ pub fn Text(
     #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] style: MaybeProp<String>,
     #[prop(optional)] tag: TextTag,
-    #[prop(optional)] code: bool,
     children: Children,
 ) -> impl IntoView {
     mount_style("text", include_str!("./text.css"));
+    let class = class_list!["thaw-text", class];
+    let style = move || style.get().unwrap_or_default();
 
     match tag {
         TextTag::B => view! {
-            <b class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
+            <b class=class style=style>
                 {children()}
             </b>
         }
         .into_any(),
+        TextTag::Code => view! {
+            <code class=class style=style>
+                {children()}
+            </code>
+        }
+        .into_any(),
         TextTag::Em => view! {
-            <em class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
+            <em class=class style=style>
                 {children()}
             </em>
         }
         .into_any(),
         TextTag::H1 => view! {
-            <h1 class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
+            <h1 class=class style=style>
                 {children()}
             </h1>
         }
         .into_any(),
         TextTag::H2 => view! {
-            <h2 class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
+            <h2 class=class style=style>
                 {children()}
             </h2>
         }
         .into_any(),
         TextTag::H3 => view! {
-            <h3 class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
+            <h3 class=class style=style>
                 {children()}
             </h3>
         }
         .into_any(),
         TextTag::H4 => view! {
-            <h4 class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
+            <h4 class=class style=style>
                 {children()}
             </h4>
         }
         .into_any(),
         TextTag::H5 => view! {
-            <h5 class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
+            <h5 class=class style=style>
                 {children()}
             </h5>
         }
         .into_any(),
         TextTag::H6 => view! {
-            <h6 class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
+            <h6 class=class style=style>
                 {children()}
             </h6>
         }
         .into_any(),
         TextTag::I => view! {
-            <i class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
+            <i class=class style=style>
                 {children()}
             </i>
         }
         .into_any(),
         TextTag::P => view! {
-            <p class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
+            <p class=class style=style>
                 {children()}
             </p>
         }
         .into_any(),
         TextTag::Pre => view! {
-            <pre class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
+            <pre class=class style=style>
                 {children()}
             </pre>
         }
         .into_any(),
         TextTag::Span => view! {
-            <span class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
+            <span class=class style=style>
                 {children()}
             </span>
         }
         .into_any(),
         TextTag::Strong => view! {
-            <strong class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
+            <strong class=class style=style>
                 {children()}
             </strong>
         }
@@ -138,9 +145,10 @@ pub fn Text(
     }
 }
 
-#[derive(Default)]
+#[derive(Default, PartialEq)]
 pub enum TextTag {
     B,
+    Code,
     Em,
     H1,
     H2,
diff --git a/thaw/src/text/text.css b/thaw/src/text/text.css
index fbed300..0b784cd 100644
--- a/thaw/src/text/text.css
+++ b/thaw/src/text/text.css
@@ -11,6 +11,15 @@
     font-family: var(--fontFamilyBase);
 }
 
+code.thaw-text {
+    padding: 1px 4px;
+    margin: 0 3px 0 3px;
+    background-color: var(--colorNeutralBackground4);
+    color: var(--colorNeutralForeground1);
+    font-family: var(--fontFamilyMonospace);
+    border-radius: var(--borderRadiusMedium);
+}
+
 .thaw-caption-1 {
     line-height: var(--lineHeightBase200);
     font-weight: var(--fontWeightRegular);
diff --git a/thaw/src/theme/common.rs b/thaw/src/theme/common.rs
index 6193220..fa460f6 100644
--- a/thaw/src/theme/common.rs
+++ b/thaw/src/theme/common.rs
@@ -3,6 +3,8 @@ use thaw_macro::WriteCSSVars;
 #[derive(Clone, WriteCSSVars)]
 pub struct CommonTheme {
     pub font_family_base: String,
+    pub font_family_monospace: String,
+    pub font_family_numeric: String,
 
     pub font_size_base_100: String,
     pub font_size_base_200: String,
@@ -67,7 +69,9 @@ impl CommonTheme {
     pub fn new() -> Self {
         Self {
             font_family_base: "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif".into(),
-            
+            font_family_monospace: "Consolas, 'Courier New', Courier, monospace".into(),
+            font_family_numeric: "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif".into(),
+
             font_size_base_100: "10px".into(),
             font_size_base_200: "12px".into(),
             font_size_base_300: "14px".into(),