diff --git a/assets/style.css b/assets/style.css new file mode 100644 index 0000000..9b91b9e --- /dev/null +++ b/assets/style.css @@ -0,0 +1,57 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f4f4f9; + color: #333; +} + +h1 { + color: #1e88e5; + text-align: center; + margin-bottom: 20px; +} + +form { + margin: 20px auto; + max-width: 600px; + padding: 20px; + background: white; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + border-radius: 8px; +} + +form input, form textarea, form button { + display: block; + width: 100%; + margin-bottom: 15px; + padding: 10px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 4px; +} + +form button { + background-color: #1e88e5; + color: white; + border: none; + cursor: pointer; + transition: background-color 0.3s ease; +} + +form button:hover { + background-color: #1565c0; +} + +ul { + list-style: none; + padding: 0; +} + +ul li { + background: #fff; + margin: 10px 0; + padding: 15px; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} diff --git a/src/app.rs b/src/app.rs index 0ae5007..2e54836 100644 --- a/src/app.rs +++ b/src/app.rs @@ -1,12 +1,14 @@ /// Main application entry point for CompareWare. /// Combines the item management components (form and list) to provide a cohesive user interface. use leptos::*; +use leptos_meta::*; use crate::components::{item_form::ItemForm, items_list::ItemsList}; use crate::models::item::Item; use uuid::Uuid; #[component] pub fn App() -> impl IntoView { + provide_meta_context(); // Signal to store and update the list of items. let (items_signal, set_items) = create_signal(Vec::::new()); @@ -23,12 +25,15 @@ pub fn App() -> impl IntoView { }; view! { -
-

{ "CompareWare" }

- // Form component for adding new items. - - // Component to display the list of items. - -
+ <> + +
+

{ "CompareWare" }

+ // Form component for adding new items. + + // Component to display the list of items. + +
+ } }