feat: create new header component

This component is now required for forms.

src/components/header.rs

@@ -0,0 +1,40 @@
+use leptos::prelude::*;
+
+/// # Header Component
+/// 
+/// A simple header that may also contain a description. Should be used to annotate sections and
+/// forms, with extra information about how that section/form will work.
+/// 
+/// Example usage:
+/// ```
+/// view! {
+///     <Header
+///         title: "Example header"
+///         description: "Example description"
+///     />
+/// }
+/// ```
+#[component]
+pub fn Header(
+    /// The title of the header. Must always be present.
+    #[prop(into)] title: Signal<String>,
+    /// The description of the header. Hidden when nothing i s
+    #[prop(optional, into)] description: Signal<String>,
+) -> impl IntoView {
+    let show_description = Signal::derive(move || {
+        !description.get().is_empty()
+    });
+    
+    view! {
+        <div class="m-1.5 mb-5">
+            <div class="text-3xl font-bold">
+                {title}
+            </div>
+            <Show when=move || show_description.get()>
+                <div>
+                    {description}
+                </div>
+            </Show>
+        </div>
+    }
+}

src/components/mod.rs

@@ -10,9 +10,10 @@ mod utils;
 mod validated_form;
 mod lists;
 mod toasts;
+mod header;
 
 pub use self::{
     action_button::*, banner::*, dashboard_button::*, lists::*,
     loading::*, multi_entry::*, panel::*, row::*, text_field::*,
-    validated_form::*, toasts::*
+    validated_form::*, toasts::*, header::*
 };

src/components/validated_form.rs

@@ -1,7 +1,7 @@
 use leptos::logging::log;
 use leptos::prelude::*;
 use leptos::web_sys::SubmitEvent;
-use crate::components::ActionButton;
+use crate::components::{ActionButton, Header};
 
 /// Indicates the current state of an input.
 #[derive(Default, Debug, Clone)]
@@ -71,7 +71,11 @@ pub fn use_validation_context() -> Option<FormValidationRegistry> {
 /// Example usage in the view macro:
 /// ```
 /// view! {
-///     <ValidatedForm on_submit=Callback::new(move || {/* something here */})>
+///     <ValidatedForm 
+///         on_submit=Callback::new(move || {/* something here */})
+///         title="Example Title"
+///         description="Example description."
+///     >
 ///         {/* As many input components as you want */}
 ///     </ValidatedForm>
 /// }
@@ -102,6 +106,10 @@ pub fn ValidatedForm(
     children: Children,
     /// A callback that runs when the form successfully validates.
     #[prop(into)] on_submit: Callback<()>,
+    /// The title of the included header.
+    #[prop(into)] title: Signal<String>,
+    /// The description for the included header.
+    #[prop(optional, into)] description: Signal<String>,
 ) -> impl IntoView {
     let validators = RwSignal::new(vec![]);
 
@@ -142,6 +150,10 @@ pub fn ValidatedForm(
 
     view! {
         <form novalidate on:submit=submit_success_event>
+            <Header
+                title=title
+                description=description
+            />
             {children()}
             <ActionButton
                 on:click=move |_| {