Move switches to different page

Author: LimeBeck

src/jsMain/kotlin/Application.kt

@@ -25,6 +25,7 @@ import org.jetbrains.compose.web.renderComposableInBody
 import pages.CatFactPage
 import pages.HelloWorldPage
 import pages.HomePage
+import pages.SwitchesPage
 
 fun main() {
     val client =
@@ -68,6 +69,9 @@ fun main() {
                     route("/") {
                         HomePage()
                     }
+                    route("/switches") {
+                        SwitchesPage()
+                    }
                     route("/hello-world") {
                         HelloWorldPage()
                     }

src/jsMain/kotlin/components/Switch.kt

@@ -21,6 +21,8 @@ import org.jetbrains.compose.web.dom.Text
 internal class SwitchStyles(
     invertedColors: Boolean,
 ) : StyleSheet() {
+    val animationDuration = 0.3.s
+
     val switch by style {
         position(Position.Relative)
         display(DisplayStyle.InlineBlock)
@@ -53,7 +55,7 @@ internal class SwitchStyles(
             },
         )
         transitions {
-            defaultDuration(0.4.s)
+            "" { duration = animationDuration }
         }
         borderRadius(34.px)
 
@@ -82,7 +84,7 @@ internal class SwitchStyles(
                 },
             )
             transitions {
-                defaultDuration(0.4.s)
+                "" { duration = animationDuration }
             }
             borderRadius(50.percent)
         }

src/jsMain/kotlin/pages/HomePage.kt

@@ -1,20 +1,18 @@
 package pages
 
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.mutableStateOf
 import app.softwork.routingcompose.NavLink
-import components.Switch
 import org.jetbrains.compose.web.dom.Text
 
 @Composable
 fun HomePage() {
-    val state = mutableStateOf(false)
-    Switch("123", state = state)
-    Switch("Disabled", disabled = true, state = state)
     NavLink("/hello-world") {
         Text("To Hello world!")
     }
     NavLink("/cat-fact") {
         Text("To Cat Facts!")
     }
+    NavLink("/switches") {
+        Text("To Switches!")
+    }
 }

src/jsMain/kotlin/pages/SwitchesPage.kt

@@ -0,0 +1,18 @@
+package pages
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import app.softwork.routingcompose.NavLink
+import components.Switch
+import org.jetbrains.compose.web.dom.Text
+
+@Composable
+fun SwitchesPage() {
+    val state = mutableStateOf(false)
+    Switch("123", state = state)
+    Switch("Disabled", disabled = true, state = state)
+
+    NavLink("/") {
+        Text("Back to the main page")
+    }
+}