feat(client): header component on layout

crates/client/src/components/atoms/github_stars.rs

@@ -20,14 +20,13 @@ pub fn GitHubStars() -> impl IntoView {
                 }
                 Err(err) => {
                     leptos::logging::error!("{err}");
-                    // error.set(Some(err.to_string()));
                 }
             }
         });
     });
 
     view! {
-        <div id="github-stars" class="flex items-center gap-x-1 md:gap-x-2 ms-auto py-1 md:ps-6 md:order-3 md:col-span-3">
+         <div id="github-stars" class="flex items-center gap-x-1 md:gap-x-2 ms-auto py-1 md:ps-6 md:order-3 md:col-span-3">
             <a href="https://github.com/rustacean-sh/rustacean.sh"  target="_blank" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-md bg-white border border-gray-200 text-black hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none ">
             <figure >
                 <img  height="15" width="15" src={"../assets/images/star-svgrepo-com.svg"} alt={"Star in github"} />

crates/client/src/components/mod.rs

@@ -1 +1,3 @@
 pub mod atoms;
+pub mod molecules;
+pub mod organisms;

crates/client/src/components/molecules/mod.rs

@@ -0,0 +1 @@
+pub mod navigation_bar;

crates/client/src/components/molecules/navigation_bar.rs

@@ -0,0 +1,21 @@
+use leptos::{component, view, IntoView};
+
+use crate::components::atoms::github_stars::GitHubStars;
+
+#[component]
+
+pub fn NavigationBar() -> impl IntoView {
+    view! {
+        <nav class="relative max-w-7xl w-full flex flex-wrap  basis-full items-center px-4 md:px-6 md:px-8 mx-auto">
+                    <div class="md:col-span-3">
+                        <a class="flex-none rounded-xl text-xl inline-block font-semibold focus:outline-none focus:opacity-80" href="#" aria-label="Preline">
+                            <figure class=" rounded-full overflow-hidden">
+                                <img  height="110" width="110" src={"../assets/images/rustacean-flat-happy.svg"} alt={"Ferris, the crab"} />
+                            </figure>
+                        </a>
+                    </div>
+                     <GitHubStars />
+
+                </nav>
+    }
+}

crates/client/src/components/organisms/header.rs

@@ -0,0 +1,12 @@
+use leptos::{component, view, IntoView};
+
+use crate::components::molecules::navigation_bar::NavigationBar;
+
+#[component]
+pub fn Header() -> impl IntoView {
+    view! {
+        <header class="flex flex-wrap md:justify-start md:flex-nowrap z-50 w-full ">
+        <NavigationBar/>
+    </header>
+    }
+}

crates/client/src/components/organisms/mod.rs

@@ -0,0 +1 @@
+pub mod header;

crates/client/src/lib.rs

@@ -10,10 +10,10 @@ use leptos::{
 };
 use leptos_meta::provide_meta_context;
 
+use self::services::Services;
 use proto::rustacean::Rustacean;
 
-use self::components::atoms::github_stars::GitHubStars;
-use self::services::Services;
+use components::organisms::header::Header;
 
 #[component]
 pub fn App() -> impl IntoView {
@@ -43,21 +43,8 @@ pub fn App() -> impl IntoView {
     });
 
     view! {
-            <header class="flex flex-wrap md:justify-start md:flex-nowrap z-50 w-full ">
-                <nav class="relative max-w-7xl w-full flex flex-wrap md:grid md:grid-cols-12 basis-full items-center px-4 md:px-6 md:px-8 mx-auto">
-                    <div class="md:col-span-3">
-                        //   <!-- Logo -->
-                        <a class="flex-none rounded-xl text-xl inline-block font-semibold focus:outline-none focus:opacity-80" href="#" aria-label="Preline">
-                            <figure class=" rounded-full overflow-hidden">
-                                <img  height="110" width="110" src={"../assets/images/rustacean-flat-happy.svg"} alt={"Ferris, the crab"} />
-                            </figure>
-                        </a>
-                        //   <!-- End Logo -->
-                    </div>
-                     <GitHubStars />
 
-                </nav>
-            </header>
+            <Header/>
             <main class="flex flex-col justify-start items-center bg-gray-800 text-white h-screen font-bold">
                 <h1 class="text-2xl py-4">"rustacean.sh"</h1>
                 <p>"The Rustacean Hub, for contributors, projects and news."</p>