feat: implement disabled behavior for all components

src/components/checkboxes.rs

@@ -4,7 +4,8 @@ use leptos::prelude::*;
 pub fn Checkbox(
     #[prop()] checked: Signal<bool>,
     #[prop(into)] on_change: Callback<(), ()>,
-    #[prop(into)] value: String
+    #[prop(into)] value: String,
+    #[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
 ) -> impl IntoView {
     view! {
         <label for=value
@@ -20,13 +21,16 @@ pub fn Checkbox(
                 id={value.clone()}
                 on:change = move |_| on_change.run(())
                 prop:checked = checked
+                disabled = disabled
             />
             // This div displays the box for the checkbox, and applies some styling to the child
             // span element.
             <div
-                class="relative inline-block h-5 w-5 m-1 rounded-sm border border-gray-300 bg-white
+                class="relative inline-block h-5 w-5 m-1 mr-2 rounded-sm border border-gray-300 bg-white
                     transition-bg duration-150 peer-checked:bg-red-700 peer-checked:border-red-700
-                    [&>span]:opacity-0 peer-checked:[&>span]:opacity-100"
+                    [&>span]:opacity-0 peer-checked:[&>span]:opacity-100
+                    peer-disabled:bg-gray-600/33 peer-disabled:border-gray-600
+                    peer-disabled:peer-checked:bg-gray-600"
             >
                 // This span is the check icon. It is centered within the div and has a border on the bottom
                 // and right sides, which is then rotated to appear like a checkmark.
@@ -44,7 +48,8 @@ pub fn Checkbox(
 #[component]
 pub fn CheckboxList(
     #[prop(default = RwSignal::new(vec![]))] selected: RwSignal<Vec<String>>,
-    #[prop()] items: Vec<String>
+    #[prop()] items: Vec<String>,
+    #[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
 ) -> impl IntoView {
     view! {
         // Checkbox elements go in here. Each one will have a derived signal
@@ -53,6 +58,7 @@ pub fn CheckboxList(
 
         // Somehow create a derived signal??
 
+        <div>
             {
                 items.into_iter().map(|item| {
                     let is_checked = {
@@ -83,9 +89,11 @@ pub fn CheckboxList(
                                 }
                             }
                             // The actual selected values are tracked by this element, not by the checkboxes themselves.
-                        value = item.clone() />
+                            value = item.clone()
+                            disabled = disabled />
                     }
                 }).collect::<Vec<_>>()
             }
+        </div>
     }
 }

src/components/select.rs

@@ -16,12 +16,14 @@ pub fn Select(
             <label>
                 {label}
                 <select
-                    class="relative border-2 m-1.5 p-1.5 rounded-md"
-                    class=(["border-red-700", "bg-transparent"], move || !disabled.get())
-                    class=(["border-gray-600", "pointer-events-none", "bg-gray-600/33"], move || disabled.get())
+                    class="relative border-2 m-1.5 p-1.5 rounded-md
+                        transition-border duration-150
+                        border-red-700 bg-transparent
+                        disabled:border-gray-600 disabled:pointer-events-none disabled:bg-gray-600/33"
                     on:change:target=move |e| {
                         value.set(e.target().value());
-                    }>
+                    }
+                    disabled = disabled >
                     // This closure handles the display of the options.
                     {move || {
                         value_list.iter().map(

src/components/text_field.rs

@@ -22,12 +22,13 @@ where
     };
 
     view! (
+        <div>
             <label>
                 { label }
                 <input
-                class="border-2 m-1.5 p-1.5 rounded-md bg-transparent mt-6 relative transition-all duration-400"
-                class=(["border-red-700", "bg-transparent"], move || !disabled.get())
-                class=(["border-gray-600", "pointer-events-none", "bg-gray-600/33"], move || disabled.get())
+                    class="border-2 m-1.5 p-1.5 rounded-md bg-transparent mt-6 relative transition-all duration-150
+                        border-red-700 bg-transparent
+                        disabled:border-gray-600 disabled:pointer-events-none disabled:bg-gray-600/33"
                     r#type={input_type}
                     disabled={disabled}
                     placeholder={placeholder}
@@ -36,5 +37,6 @@ where
                     on:input=on_input  // Sets the value on each input.
                 />
             </label>
+        </div>
     )
 }

src/pages/home_page.rs

@@ -155,39 +155,43 @@ pub fn HomePage() -> impl IntoView {
                             let select_value = RwSignal::new(String::from("Math"));
                             let chk_select = RwSignal::new(vec!["Testing 2".into()]);
 
+                            let elements_disabled = RwSignal::new(false);
+
                             view! {
                                 <p>
                                     "Current user's reported full name from the API: "
                                     {reactive_info.first_name}" "{reactive_info.last_name}
                                 </p>
 
-                                <form>
-                                    <div>
+                                <form
+                                    class="flex flex-col gap-4">
+                                    <div class="flex flex-row gap-2">
                                         <OutlinedTextField
                                             label="First Name".into()
                                             placeholder="John".into()
+                                            disabled=elements_disabled
                                             value=reactive_info.first_name />
-                                    </div>
-                                    <div>
                                         <OutlinedTextField
                                             label="Last Name".into()
                                             placeholder="Smith".into()
+                                            disabled=elements_disabled
                                             value=reactive_info.last_name />
-                                    </div>
-                                    <div>
                                         <OutlinedTextField
                                             label="Testing".into()
                                             placeholder="Test".into()
+                                            disabled=elements_disabled
                                             value=reactive_info.math_sat_score />
                                     </div>
+                                    <div class="flex flex-row gap-2">
                                         <Select
                                             value_list = vec!["Math".into(), "English".into(), "Science".into()]
                                             value = select_value
+                                            disabled=elements_disabled
                                         />
-                                    <div>
                                         <CheckboxList
                                             selected = chk_select
-                                            items = vec!["Testing 1".into(), "Testing 2".into()] />
+                                            items = vec!["Testing 1".into(), "Testing 2".into()]
+                                            disabled=elements_disabled />
                                     </div>
                                     <div>
                                         <ActionButton