Refactor PostMetadata display

src/app/models/mod.rs

@@ -1,6 +1,6 @@
 mod post;
 
-pub use post::Post;
+pub use post::{Post, PostMetadata};
 
 cfg_if::cfg_if! {
     if #[cfg(feature = "ssr")] {

src/app/pages/posts.rs

@@ -1,7 +1,7 @@
 use leptos::*;
 use leptos_router::*;
 use crate::app::{
-    models::Post,
+    models::{Post, PostMetadata},
     components::{
         Loading, Nav, ReadingTime, DateTime
     }
@@ -49,6 +49,34 @@ pub async fn get_post(
     .and_then(|post| post.ok_or_else(|| ServerFnError::ServerError("Post not found".to_string())))
 }
 
+#[component]
+pub fn PostHeader(
+    metadata: PostMetadata,
+    full_element: bool
+) -> impl IntoView {
+    let class = if full_element {
+        "metadata border-b-2 pb-5"
+    } else {
+        "metadata"
+    };
+
+    let title = if full_element {
+        view! { <>{metadata.title.clone()}</> }.into_view()
+    } else {
+        view! { <A href=format!("/posts/{}", metadata.slug.clone())>{metadata.title.clone()}</A> }
+    };
+
+    view! {
+        <div class=class>
+            <h2>{title}</h2>
+            <p>{metadata.description.clone()}</p>
+            <DateTime datetime=metadata.date />
+            <ReadingTime time=metadata.reading_time />
+            <PostTags tags=metadata.tags.clone()/>
+        </div>
+    }
+}
+
 #[component]
 pub fn PostTags(
     tags: Vec<String>
@@ -82,13 +110,7 @@ pub fn PostListCard(
                 }
             }
 
-            <div>
+            <PostHeader metadata=post.metadata.clone() full_element=false />
-                <PostTags tags=post.metadata.tags.clone()/>
-                <h2><A href=format!("/posts/{}", post.metadata.slug.clone())>{post.metadata.title.clone()}</A></h2>
-                <p>{post.metadata.description.clone()}</p>
-                <DateTime datetime=post.metadata.date />
-                <ReadingTime time=post.metadata.reading_time />
-            </div>
         </div>
     }
 }
@@ -142,14 +164,7 @@ pub fn PostElement() -> impl IntoView {
                         }
                     }
 
-                    <div class="border-b-2 pb-5">
+                    <PostHeader metadata=post.metadata.clone() full_element=true />
-                        <img src={post.metadata.image_path.clone()} alt=format!("Image {}", post.metadata.title)/>
-                        <h1>{post.metadata.title.clone()}</h1>
-                        <p>{post.metadata.description.clone()}</p>
-                        <DateTime datetime=post.metadata.date />
-                        <ReadingTime time=post.metadata.reading_time />
-                        <PostTags tags=post.metadata.tags.clone()/>
-                    </div>
 
                     <div inner_html={post.content.clone()}></div>
                 </>

style/post.css

@@ -62,6 +62,12 @@
         & pre code {
             @apply p-0;
         }
+
+        .metadata {
+            & > .icon_container, & > .tags_list {
+                @apply my-1;
+            }
+        }
     }
 
     .posts {
@@ -83,7 +89,7 @@
                 }
 
                 & > div {
-                    @apply p-5 flex flex-col gap-3;
+                    @apply p-5;
                 }
             }
         }