})
+#[allow(non_snake_case)]
+// Composing different components together is how we build
+// user interfaces. Here, we'll define a reusable .
+// You'll see how doc comments can be used to document components
+// and their properties.
+
+/// Shows progress toward a goal.
+#[component]
+fn ProgressBar(
+ // Marks this as an optional prop. It will default to the default
+ // value of its type, i.e., 0.
+ #[prop(default = 100)]
+ /// The maximum value of the progress bar.
+ max: u16,
+ // Will run `.into()` on the value passed into the prop.
+ #[prop(into)]
+ // `Signal` is a wrapper for several reactive types.
+ // It can be helpful in component APIs like this, where we
+ // might want to take any kind of reactive value
+ /// How much progress should be displayed.
+ progress: Signal,
+) -> impl IntoView {
+ view! {
+
+
+ }
+}
+
+#[component]
+fn App() -> impl IntoView {
+ let (count, set_count) = signal(0);
+
+ let double_count = move || count.get() * 2;
+
+ view! {
+
+
+ // If you have this open in CodeSandbox or an editor with
+ // rust-analyzer support, try hovering over `ProgressBar`,
+ // `max`, or `progress` to see the docs we defined above
+
+ // Let's use the default max value on this one
+ // the default is 100, so it should move half as fast
+
+ // Signal::derive creates a Signal wrapper from our derived signal
+ // using double_count means it should move twice as fast
+
+ }
+}
+
+fn main() {
+ leptos::mount::mount_to_body(App)
}