feat(style): add stying

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);
+}

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::<Item>::new());
 
@@ -23,12 +25,15 @@ pub fn App() -> impl IntoView {
     };
 
     view! {
-        <div>
-            <h1>{ "CompareWare" }</h1>
-            // Form component for adding new items.
-            <ItemForm on_submit=Box::new(add_item) />
-            // Component to display the list of items.
-            <ItemsList items=items_signal />
-        </div>
+        <>
+            <Stylesheet href="/assets/style.css" />
+            <div>
+                <h1>{ "CompareWare" }</h1>
+                // Form component for adding new items.
+                <ItemForm on_submit=Box::new(add_item) />
+                // Component to display the list of items.
+                <ItemsList items=items_signal />
+            </div>
+        </>
     }
 }