feat(treewide): Switch to tailwindcss and add more components

1 files changed, 24 insertions, 23 deletions

diff --git a/src/components/container.rs b/src/components/container.rs
index cf7aa5a..7a4a64f 100644
--- a/src/components/container.rs
+++ b/src/components/container.rs
@@ -1,34 +1,35 @@
 use leptos::{
     IntoView, component,
-    prelude::{Children, ClassAttribute, ElementChild},
+    prelude::{Children, ClassAttribute, ElementChild, OnAttribute},
     view,
 };
-use leptos_meta::Style;
+use leptos_router::{NavigateOptions, hooks::use_navigate};
 
 #[component]
-pub fn Container(header: impl IntoView, children: Children) -> impl IntoView {
+pub fn Container(
+    header: impl IntoView,
+    buttons: Vec<(impl IntoView, &'static str)>,
+    children: Children,
+) -> impl IntoView {
     view! {
-        <Style>
-            "
-            .rocie-container {
-                border-width: 0.1rem;
-                border-style: solid;
-                border-color: gray;
-                border-radius: 15%;
-
-                padding: 0.2rem;
-
-                text-align: left;
-            }
-            .rocie-container-header {
-                font-size: 1.5rem;
-            }
-            "
-        </Style>
-
-        <div class="rocie-container">
-            <p class="rocie-container-header">{header}</p>
+        <div class="p-4 mt-4 mr-4 ml-4 md-2 rounded-lg border-gray-600 border">
+            <p class="text-lg text-bold">{header}</p>
             {children()}
+
+            <ul class="flex flex-row gap-1 pt-2 overflow-x-auto">
+                {buttons
+                    .into_iter()
+                    .map(|(name, path)| {
+                        view! {
+                            <li class="bg-green-400/40 p-2 first:rounded-l-full last:rounded-r-full">
+                                <button on:click=move |_| {
+                                    use_navigate()(path, NavigateOptions::default());
+                                }>{name}</button>
+                            </li>
+                        }
+                    })
+                    .collect::<Vec<_>>()}
+            </ul>
         </div>
     }
 }