feat: Demo switch version (#152)

Author: luoxiaozero

demo/Cargo.toml

@@ -16,6 +16,7 @@ demo_markdown = { path = "../demo_markdown" }
 icondata = "0.3.0"
 palette = "0.7.4"
 chrono = "0.4.33"
+cfg-if = "1.0.0"
 
 [features]
 default = ["csr"]

demo/src/components/mod.rs

@@ -1,5 +1,6 @@
 mod demo;
 mod site_header;
+mod switch_version;
 
 pub use demo::{Demo, DemoCode};
 pub use site_header::*;

demo/src/components/site_header.rs

@@ -1,3 +1,4 @@
+use super::switch_version::SwitchVersion;
 use leptos::*;
 use leptos_meta::Style;
 use leptos_router::{use_location, use_navigate};
@@ -102,6 +103,9 @@ pub fn SiteHeader() -> impl IntoView {
                 .demo-header__menu-popover-mobile {
                     padding: 0;
                 }
+                .demo-header__right-btn .thaw-select {
+                    width: 60px;
+                }
                 @media screen and (max-width: 600px) {
                     .demo-header {
                         padding: 0 8px;
@@ -167,7 +171,7 @@ pub fn SiteHeader() -> impl IntoView {
                         </Menu>
                     </div>
                 </Popover>
-                <Space class="demo-header__right-btn">
+                <Space class="demo-header__right-btn" align=SpaceAlign::Center>
                     <Button
                         variant=ButtonVariant::Text
                         on_click=move |_| {
@@ -191,6 +195,7 @@ pub fn SiteHeader() -> impl IntoView {
                     <Button variant=ButtonVariant::Text on_click=Callback::new(move |_| change_theme.call(()))>
                         {move || theme_name.get()}
                     </Button>
+                    <SwitchVersion />
                     <Button
                         variant=ButtonVariant::Text
                         icon=icondata::AiGithubOutlined

demo/src/components/switch_version.rs

@@ -0,0 +1,37 @@
+use leptos::*;
+use thaw::*;
+
+#[component]
+pub fn SwitchVersion() -> impl IntoView {
+    let options = vec![
+        SelectOption {
+            label: "main".into(),
+            value: "https://thawui.vercel.app".into(),
+        },
+        SelectOption {
+            label: "0.2.5".into(),
+            value: "https://thaw-8og1kv8zs-thaw.vercel.app".into(),
+        },
+    ];
+
+    cfg_if::cfg_if! {
+        if #[cfg(any(feature = "csr", feature = "hydrate"))] {
+            let location = window().location();
+            let host = location.host().ok();
+            let version = RwSignal::new(host);
+            let _ = version.watch(move |host| {
+                if let Some(host) = host {
+                    let pathname = location.pathname().unwrap_or_default();
+                    let href = format!("{}{}", host, pathname);
+                    let _ = location.set_href(&href);
+                }
+            });
+        } else {
+            let version = RwSignal::new(None::<String>);
+        }
+    }
+
+    view! {
+        <Select value=version options/>
+    }
+}