feat: create impromptu demo page

src/components/panel.rs

@@ -2,11 +2,11 @@ use leptos::prelude::*;
 
 /// A panel for use in visual separation of a group of components. A `Panel` arranges
 /// a series of elements within a shaded rectangle using the flexbox column layout.
-/// 
+///
 /// It takes a series of children. Usually these would be in the form of a `Row` element,
 /// which will arrange its own children in a row within the panel, however it can be any
 /// HTML element.
-/// 
+///
 /// Example:
 /// ```
 /// view! {
@@ -24,14 +24,16 @@ use leptos::prelude::*;
 /// ```
 #[component]
 pub fn Panel(
-    children: Children
+    #[prop(optional, default = false)] hidden: bool,
+    #[prop(optional)] children: Option<Children>
 ) -> impl IntoView {
     view! {
         <div
             class="flex flex-col gap-2 p-2 m-4 flex-1
                 border-1 border-gray-600/10
-                rounded-md shadow-[0_0_6px_rgba(0,0,0,0.50)]">
-            {children()}
+                rounded-md shadow-[0_0_6px_rgba(0,0,0,0.50)]"
+            class=(["hidden"], hidden) >
+            {children.and_then(move |t| {Some(t())})}
         </div>
     }
 }