Implement Timeline (No css)

src/app/components/timeline.rs

@@ -4,53 +4,104 @@ use leptos_icons::*;
 
 #[component]
 pub fn Timeline(
-    children: Children
+    #[prop(default=vec![])] elements: Vec<TimelineElement>,
 ) -> impl IntoView {
     view! {
         <div class="w-full px-5">
             <ul class="list-none py-5 px-0 relative w-full max-w-5xl mx-auto before:top-0 before:bottom-0 before:left-0 before:md:left-1/2 before:absolute before:content-[\"\"] before:w-2 before:bg-primary/10 before:dark:bg-dark_primary/10 before:shadow-md before:shadow-primary/5 before:dark:shadow-dark_primary/5">
-                { children() }
+                { elements.collect_view() }
             </ul>
         </div>
     }
 }
 
+#[slot]
+pub struct TimelineElementLabel {
+    children: ChildrenFn,
+}
+
+impl IntoView for TimelineElementLabel {
+    fn into_view(self) -> View {
+        let view = view! { <>{ (self.children)() }</> };
+        view.into_view()
+    }
+}
+
+#[slot]
+pub struct TimelineElement {
+    #[prop(default=vec![])] labels: Vec<TimelineElementLabel>,
+    #[prop(default=vec![])] cards: Vec<TimelineCard>,
+}
+
+impl IntoView for TimelineElement {
+    fn into_view(self) -> View {
+        let view = view! {
+            <li class="timeline-element">
+                <div class="timeline-element__category">
+                    { self.labels.collect_view() }
+                </div>
+                <div class="timeline-element__info">
+                    { self.cards.collect_view() }
+                </div>
+            </li>
+        };
+        view.into_view()
+    }
+}
+
 #[slot]
 pub struct TimelineCardContent {
     children: ChildrenFn,
 }
 
+impl IntoView for TimelineCardContent {
+    fn into_view(self) -> View {
+        let view = view! { <>{ (self.children)() }</> };
+        view.into_view()
+    }
+}
+
 #[slot]
 pub struct TimelineCardSummary {
     children: ChildrenFn,
     tags: ChildrenFn,
 }
 
-#[component]
+impl IntoView for TimelineCardSummary {
-pub fn TimelineCard(
+    fn into_view(self) -> View {
-    #[prop(default=vec![])] titles: Vec<TimelineCardSummary>,
+        let view = view! {
-    #[prop(default=vec![])] childrens: Vec<TimelineCardContent>,
+            <>
-) -> impl IntoView {
+                { (self.children)() }
-    view! {
-        <details>
-            <summary>
                 {
-                    titles.iter().map(|v| view! {
+                    view! {
-                        <>
+                        <div class="flex flex-wrap gap-2 mt-2">
-                            { (v.children)() }
+                          { (self.tags)() }
-                            {
+                        </div>
-                                view! {
+                    }
-                                    <div class="flex flex-wrap gap-2 mt-2">
-                                      { (v.tags)() }
-                                    </div>
-                                }
-                            }
-                        </>
-                    }).collect_view()
                 }
-                <i><Icon icon=Icon::from(FaCaretDownSolid) /></i>
+            </>
-            </summary>
+        };
-            <div>{ childrens.iter().map(|v| (v.children)()).collect_view() }</div>
+        view.into_view()
-        </details>
     }
-}
+}
+
+#[slot]
+pub struct TimelineCard {
+    #[prop(default=vec![])] titles: Vec<TimelineCardSummary>,
+    #[prop(default=vec![])] cards: Vec<TimelineCardContent>,
+}
+
+impl IntoView for TimelineCard {
+    fn into_view(self) -> View {
+        let view =  view! {
+            <details>
+                <summary>
+                    { self.titles.collect_view() }
+                    <i><Icon icon=Icon::from(FaCaretDownSolid) /></i>
+                </summary>
+                <div>{ self.cards.collect_view() }</div>
+            </details>
+        };
+        view.into_view()
+    }
+}