wip

crates/ascend/src/components/button.rs

@@ -1,23 +1,39 @@
+use super::icons::Icon;
 use leptos::prelude::*;
 use web_sys::MouseEvent;
 
 #[component]
-pub fn Button<I, I_IV, T, T_IV>(icon: I, text: T, onclick: impl FnMut(MouseEvent) + 'static) -> impl IntoView
-where
-    I: Fn() -> I_IV,
-    I_IV: IntoView,
-    T: Fn() -> T_IV,
-    T_IV: IntoView,
-{
-    // let icon = icon.map(|f| f());
+pub fn Button(
+    #[prop(optional)]
+    #[prop(into)]
+    icon: MaybeProp<Icon>,
+
+    #[prop(into)] text: Signal<String>,
+
+    onclick: impl FnMut(MouseEvent) + 'static,
+) -> impl IntoView {
+    let icon_view = icon.get().map(|i| {
+        let icon_view = i.into_view();
+        view! { <div class="self-center mx-5 my-2.5 text-pink-500 rounded-sm">{icon_view}</div> }
+    });
+
+    let separator = icon
+        .get()
+        .is_some()
+        .then(|| view! { <div class="w-0.5 bg-gradient-to-br from-pink-500 to-orange-400" /> });
+
+    let text_view = view! { <div class="self-center mx-5 my-2.5 uppercase w-full text-lg font-thin">{text.get()}</div> };
+
     view! {
         <button
             on:click=onclick
             type="button"
-            class="py-2.5 px-5 mb-2 text-sm font-medium text-black bg-orange-300 rounded-lg hover:bg-orange-400 focus:ring-4 focus:ring-orange-500 focus:outline-none me-2"
+            class="p-0.5 mb-2 bg-gradient-to-br from-pink-500 to-orange-400 rounded-lg me-2 hover:brightness-125 active:brightness-90"
         >
-            {icon()}
-            {text()}
+            <div class="flex items-stretch py-1.5 bg-gray-900 rounded-md">
+                {icon_view} {separator} {text_view}
+
+            </div>
         </button>
     }
 }
@@ -28,17 +44,16 @@ mod tests {
 
     #[test]
     fn baseline() {
-        let icon = || ();
-        let text = || ();
+        let text = "foo";
         let onclick = |_| {};
-        let props = ButtonProps { icon, text, onclick };
-        Button(props);
+
+        view! { <Button text onclick /> };
     }
 
     #[test]
     fn simple() {
-        let icon = || view! { <crate::components::icons::ForwardSolid /> };
-        let text = || Some("foo".to_string());
+        let icon = Icon::ForwardSolid;
+        let text = "foo";
         let onclick = |_| {};
 
         view! { <Button icon text onclick /> };

crates/ascend/src/components/icons.rs

@@ -1,5 +1,34 @@
 use leptos::prelude::*;
 
+#[derive(Copy, Debug, Clone)]
+pub enum Icon {
+    BoltSolid,
+    BoltSlashSolid,
+    WrenchSolid,
+    ForwardSolid,
+    Check,
+    HeartOutline,
+    ArrowPath,
+    PaperAirplaneSolid,
+    NoSymbol,
+}
+impl Icon {
+    // TODO: Actually impl IntoView for Icon instead
+    pub fn into_view(self) -> impl IntoView {
+        match self {
+            Icon::BoltSolid => view! { <BoltSolid /> }.into_any(),
+            Icon::BoltSlashSolid => view! { <BoltSlashSolid /> }.into_any(),
+            Icon::WrenchSolid => view! { <WrenchSolid /> }.into_any(),
+            Icon::ForwardSolid => view! { <ForwardSolid /> }.into_any(),
+            Icon::Check => view! { <Check /> }.into_any(),
+            Icon::HeartOutline => view! { <HeartOutline /> }.into_any(),
+            Icon::ArrowPath => view! { <ArrowPath /> }.into_any(),
+            Icon::PaperAirplaneSolid => view! { <PaperAirplaneSolid /> }.into_any(),
+            Icon::NoSymbol => view! { <NoSymbol /> }.into_any(),
+        }
+    }
+}
+
 #[component]
 pub fn BoltSolid() -> impl IntoView {
     view! {

crates/ascend/src/pages/wall.rs

@@ -1,16 +1,35 @@
-// +----------- <Best attempt> -----------+
+// +--------------- Filter ----------- ↓ -+
+// |                                      |
+// |                                      |
+// |                                      |
+// |                                      |
+// |                                      |
+// |                                      |
+// |                                      |
+// +--------------------------------------+
+//
+//      +---------------------------+
+//      |        Next Problem       |
+//      +---------------------------+
+//
+// +--------------- Problem --------------+
 // |    Name: ...                         |
 // |  Method: ...                         |
 // |  Set by: ...                         |
 // |                                      |
 // |   |  Flash  |   Top   |  Attempt  |  |
 // |                                      |
-// +--------------- History --------------+
+// +--------------------------------------+
+
+// + ------- +   + ------ -+   +---------+
+// |  Flash  |   |   Top   |   | Attempt |
+// + ------- +   + ------ -+   +---------+
+//
+// +---------- <Latest attempt> ----------+
 // | Today:                     <Attempt> |
 // | 14 days ago:               <Attempt> |
 // +--------------------------------------+
 
-use crate::codec::ron::RonEncoded;
 use crate::components::ProblemInfo;
 use crate::components::attempt::Attempt;
 use crate::components::button::Button;
@@ -18,6 +37,7 @@ use crate::components::header::HeaderItem;
 use crate::components::header::HeaderItems;
 use crate::components::header::StyledHeader;
 use crate::components::icons;
+use crate::components::icons::Icon;
 use crate::models;
 use crate::models::HoldRole;
 use leptos::Params;
@@ -142,8 +162,8 @@ pub fn Wall() -> impl IntoView {
 
                                 <div>
                                     <Button
-                                        icon=|| view! { <icons::ForwardSolid /> }
-                                        text=|| Some("Next problem".to_string())
+                                        icon=Icon::ArrowPath
+                                        text="Next problem"
                                         onclick=move |_| fn_next_problem(&wall)
                                     />
 

todo.md

@@ -10,3 +10,4 @@
 - clock
 - hotkeys (enter =next problem, arrow = shift left/right up/down)
 - impl `sizes` hint next to `srcset`
+- add refresh wall button for when a hold is changed