From 92890986c20197238ef9cda08dbc5ce9ed232811 Mon Sep 17 00:00:00 2001
From: Ever Ruiz Diaz <ruizdiaz.oe@gmail.com>
Date: Fri, 21 Jun 2024 02:10:56 +0200
Subject: [PATCH] feat: entry blog of home component created

---
 src/components/home/entry.rs     | 48 ++++++++++++++++++++++++++++++++
 src/layouts/components/header.rs |  4 +--
 src/lib.rs                       |  1 +
 src/pages/home.rs                | 37 ++++++++++++++++++++++--
 4 files changed, 86 insertions(+), 4 deletions(-)
 create mode 100644 src/components/home/entry.rs

diff --git a/src/components/home/entry.rs b/src/components/home/entry.rs
new file mode 100644
index 0000000..32d015f
--- /dev/null
+++ b/src/components/home/entry.rs
@@ -0,0 +1,48 @@
+use icondata as i;
+use leptos::*;
+use leptos_icons::*;
+use crate::components::common::link::Link;
+
+#[component]
+pub fn Entry(
+    title: String,
+    description: String,
+    uri: String,
+    time: u8,
+    date: String,
+    categories: Vec<String>
+) -> impl IntoView {
+    view! {
+        <div class="flex flex-row items-center h-36 md:h-32 p-4 border border-gray-300
+            hover:border-gray-400 transition duration-200 ease-out
+            hover:ease-in rounded-md bg-white shadow-sm hover:shadow-md
+            transition-shadow relative">
+
+            <div class="flex-1 flex flex-col gap-2">
+                <div class="flex justify-between items-center">
+                    <Link title={title} link={uri} blank={false}/>
+                    <div class="flex items-center gap-2">
+                        <Icon width="1em" height="1em" icon=i::AiClockCircleOutlined />
+                        <span class="text-sm text-muted-foreground">{time} min read</span>
+                    </div>
+                </div>
+                <p class="text-sm text-muted-foreground">
+                    {description}
+                </p>
+                <div class="flex justify-between items-center mt-2">
+                    <section class="flex gap-2 flex-wrap">
+                        {categories.iter().map(|category| {
+                            view! {
+                                <span class="flex items-center justify-center whitespace-nowrap
+                                rounded-lg bg-gray-100 border border-gray-300 h-6 px-2.5 py-1 text-sm text-gray-700">
+                                    {category}
+                                </span>
+                            }
+                        }).collect::<Vec<_>>()}
+                    </section>
+                    <span class="text-sm text-muted-foreground">{date}</span>
+                </div>
+            </div>
+        </div>
+    }
+}
diff --git a/src/layouts/components/header.rs b/src/layouts/components/header.rs
index 7177a39..202ddc8 100644
--- a/src/layouts/components/header.rs
+++ b/src/layouts/components/header.rs
@@ -11,8 +11,8 @@ pub fn Header() -> impl IntoView {
                 <div class="md:flex md:items-center md:gap-12">
                     <a href="/" class="flex items-center justify-center text-gray-900 hover:text-gray-950 duration-200">
                         <div class="block items-center justify-center">
-                            <p class="text-xl font-semibold">Ever Ruiz Diaz</p>
-                            <p class="text-md">Rust Developer</p>
+                            <p class="text-2xl font-semibold">Ever Ruiz Diaz</p>
+                            <p class="text-lg">Rust Developer</p>
                         </div>
                     </a>
                 </div>
diff --git a/src/lib.rs b/src/lib.rs
index ab2df06..ba973ec 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -37,6 +37,7 @@ pub mod components {
     pub mod home {
         pub mod experience;
         pub mod project_card;
+        pub mod entry;
     }
 
     pub mod common {
diff --git a/src/pages/home.rs b/src/pages/home.rs
index 7c9e6a0..3b5cbf5 100644
--- a/src/pages/home.rs
+++ b/src/pages/home.rs
@@ -1,5 +1,6 @@
 use crate::components::common::values::Icon;
 use crate::components::home::{experience::Experience, project_card::Project};
+use crate::components::home::entry::Entry;
 use crate::layouts::layout::Layout;
 use leptos::*;
 
@@ -45,6 +46,18 @@ pub fn Home() -> impl IntoView {
         Icon::Docker.to_view(),
     ];
 
+    let categories_portfolio = vec![
+        "Project".to_string(),
+        "Rust".to_string(),
+        "Astro".to_string(),
+    ];
+
+    let categories_cookies = vec![
+        "GraphQL".to_string(),
+        "Rust".to_string(),
+        "Axum".to_string()
+    ];
+
     view! {
         <Layout>
             // Childrens
@@ -53,7 +66,7 @@ pub fn Home() -> impl IntoView {
                 <br/>
                 {SUB_DESCRIPTION}
             </p>
-            <h1 class="text-2xl mt-6">Projects</h1>
+            <h1 class="text-2xl font-medium mt-6">Projects</h1>
             <div class="grid gap-4 grid-cols-1 md:grid-cols-2 place-items-center">
                 <Project
                     github=false
@@ -86,7 +99,27 @@ pub fn Home() -> impl IntoView {
                     {berli_icons}
                 </Project>
             </div>
-            <h1 class="text-2xl mt-6">Experience</h1>
+
+            // Blog
+            <h1 class="text-2xl font-medium mt-6">Blog</h1>
+            <Entry
+                title="Portfolio WASM".to_string()
+                description="My new portfolio WASM powered by Rust with Leptos".to_string()
+                uri="/blog/portfolio".to_string()
+                time=5
+                date="Jun 20, 2024".to_string()
+                categories=categories_portfolio
+            />
+            <Entry
+                title="Cookies with GraphQL in Rust".to_string()
+                description="Learn best practices and enhance the security of your GraphQL interface in Rust".to_string()
+                uri="/blog/portfolio".to_string()
+                time=5
+                date="Jun 20, 2024".to_string()
+                categories=categories_cookies
+            />
+
+            <h1 class="text-2xl font-medium mt-6">Experience</h1>
             <div class="relative flex flex-col gap-4">
                   <div class="after:absolute after:inset-y-0 after:w-px after:bg-gray-500/20 relative pl-6 after:left-0 grid gap-10">
                     <Experience