From 8ab01ca72587a853ff22b900963f3f34a4b2c4fb Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Fri, 25 Apr 2025 14:03:33 -0600 Subject: [PATCH] feat(home): homepage finished --- assets/styling/blog.css | 36 ++++- assets/styling/experience.css | 86 ++++++++++++ assets/styling/home.css | 25 ++-- assets/styling/main.css | 7 +- assets/styling/techs.css | 6 +- src/components/experience.rs | 116 +++++++++++++++ src/{views => components}/footer.rs | 2 +- src/components/mod.rs | 6 + src/helper_fun.rs | 209 +++++++++------------------- src/lib.rs | 7 +- src/views/blog.rs | 52 ++++--- src/views/home.rs | 11 +- src/views/mod.rs | 5 +- src/views/navbar.rs | 4 +- 14 files changed, 377 insertions(+), 195 deletions(-) create mode 100644 assets/styling/experience.css create mode 100644 src/components/experience.rs rename src/{views => components}/footer.rs (93%) diff --git a/assets/styling/blog.css b/assets/styling/blog.css index f27f060..a0f0c8b 100644 --- a/assets/styling/blog.css +++ b/assets/styling/blog.css @@ -1,8 +1,36 @@ #blog { - margin-top: 50px; + margin-top: 50px; } #blog a { - color: #ffffff; - margin-top: 50px; -} \ No newline at end of file + color: #ffffff; + margin-top: 50px; +} + +#blogs { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 80svh; +} + +#blogs h1 { + border-bottom: var(--underlineTitle); + border-radius: var(--underlineTitleBorderRadius); +} + +#blogs button { + background-color: var(--card-background-color); + border-radius: var(--card-border-radius); + border: none; + color: #ffffff; + font-size: xx-large; + padding: 1rem; +} + +#blogs a { + text-decoration: none; + background-color: var(--card-background-color); + border-radius: var(--card-border-radius); +} diff --git a/assets/styling/experience.css b/assets/styling/experience.css new file mode 100644 index 0000000..41f54ec --- /dev/null +++ b/assets/styling/experience.css @@ -0,0 +1,86 @@ +.experience-comp { + display: flex; + flex-direction: column; + flex-wrap: wrap; + + /* flex-basis: 50%; */ +} + +.experience-comp h3 { + display: flex; + /* width: 90%; */ + border-bottom: var(--underlineTitle); + border-radius: var(--underlineTitleBorderRadius); + margin: 2svh 2svw; + padding: 0svh 2svw; + padding-bottom: 1svh; +} + +.experience-comp table { + border-collapse: separate; + border-spacing: 0svh 0px; +} + +.experience-comp td { + position: relative; + margin: 0px; + padding: 0.25svh 2svw; +} +.experience-comp tr:nth-child(even) td { + padding-bottom: 2svh; +} + +.postion { + text-wrap: nowrap; +} +.date-location { + text-wrap: nowrap; +} +.symbol { + position: relative; + width: 30px; + text-align: center; +} + +.symbol[rowspan]::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 50%; + width: 2px; + background-color: rgb(120, 120, 120); + transform: translateX(-50%); + z-index: 0; +} +.symbol::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 18px; + height: 18px; + z-index: 1; +} + +.dot { + display: inline-block; + background-color: rgb(120, 120, 120); + border-radius: 100%; + width: 16px; + height: 16px; + line-height: 16px; + font-size: 12px; + font-weight: bold; + position: relative; + z-index: 2; +} + +tr:nth-child(1) > .symbol::before { + top: 50%; +} + +tr:nth-last-child(2) > .symbol::before { + bottom: 50%; +} diff --git a/assets/styling/home.css b/assets/styling/home.css index c64a3ff..01b72c1 100644 --- a/assets/styling/home.css +++ b/assets/styling/home.css @@ -3,14 +3,6 @@ flex-direction: column; } -/* .technologies p { - width: 90%; - margin: 2svh 0px; - margin-left: 2svw; - padding-left: 2svw; - padding-bottom: 1svh; -} */ - .technologies-cat { display: flex; flex-flow: row wrap; @@ -18,3 +10,20 @@ column-gap: 1svw; row-gap: 1svh; } + +#experience { + display: flex; + flex-direction: column; + margin-bottom: 4svh; + background-color: var(--card-background-color); + border-radius: var(--card-border-radius); +} + +#experience div { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + background-color: var(--card-background-color); + border-radius: var(--card-border-radius); + margin: 4svh 0px; +} diff --git a/assets/styling/main.css b/assets/styling/main.css index 6ff888f..ea9b087 100644 --- a/assets/styling/main.css +++ b/assets/styling/main.css @@ -5,12 +5,11 @@ body { margin: 20px; } h2 { - width: 90%; border-bottom: var(--underlineTitle); border-radius: var(--underlineTitleBorderRadius); - margin: 2svh 0px; - margin-left: 2svw; - padding-left: 2svw; + display: flex; + margin: 2svh 2svw; + padding: 0svh 2svw; padding-bottom: 1svh; } /* diff --git a/assets/styling/techs.css b/assets/styling/techs.css index 4e484d4..6818304 100644 --- a/assets/styling/techs.css +++ b/assets/styling/techs.css @@ -14,9 +14,9 @@ .tech-cat h3 { border-bottom: var(--underlineTitle); border-radius: var(--underlineTitleBorderRadius); - margin: 2svh 1svw; - - padding-left: 2svw; + display: flex; + margin: 2svh 2svw; + padding: 0svh 2svw; padding-bottom: 1svh; } diff --git a/src/components/experience.rs b/src/components/experience.rs new file mode 100644 index 0000000..b237bea --- /dev/null +++ b/src/components/experience.rs @@ -0,0 +1,116 @@ +use dioxus::prelude::*; + +const EXPERIENCE_CSS: Asset = asset!("/assets/styling/experience.css"); + +#[component] +pub fn Experience(professional_jobs: bool) -> Element { + let experience: [ExpDes; 4] = match professional_jobs { + true => EXPERIENCE_JOBS, + false => EXPERIENCE_VOL, + }; + rsx! { + div { class: "experience-comp", + document::Link { rel: "stylesheet", href: EXPERIENCE_CSS } + if professional_jobs { + h3 { "Professional" } + } else { + h3 { "Volunteering" } + } + table { + colgroup { + col { class: "symbol" } + col { class: "postion" } + col { class: "date-location" } + } + tbody { + for exp in experience { + tr { + td { class: "symbol", rowspan: 2, + span { class: "dot", "" } + } + td { "{exp.postition}" } + td { "{exp.start_month} - {exp.end_month}" } + } + tr { + // td { "" } + td { "{exp.company}" } + td { "{exp.location}" } + } + } + } + } + + } + } +} + +#[derive(PartialEq, Props, Clone)] +struct ExpDes { + pub postition: &'static str, + pub company: &'static str, + pub location: &'static str, + pub start_month: &'static str, + pub end_month: &'static str, +} + +const EXPERIENCE_JOBS: [ExpDes; 4] = [ + ExpDes { + postition: "Project Coordinator", + company: "Rally Engineering", + location: "Ab", + start_month: "Jan 2025", + end_month: "May 2025", + }, + ExpDes { + postition: "Project Controller Student", + company: "Rally Engineering", + location: "Ab", + start_month: "May 2024", + end_month: "Jan 2025", + }, + ExpDes { + postition: "Staff", + company: "Red Deer Farmer's Market", + location: "Ab", + start_month: "Mar 2013", + end_month: "Present", + }, + ExpDes { + postition: "Staff", + company: "Ghostrider Storage", + location: "BC", + start_month: "Mar 2020", + end_month: "Present", + }, +]; + +const EXPERIENCE_VOL: [ExpDes; 4] = [ + ExpDes { + postition: "Software Subteam Lead", + company: "UCalgary Baja", + location: "Ab", + start_month: "Sept 2024", + end_month: "Present", + }, + ExpDes { + postition: "Software, Logistics and Business Sub Team Lead", + company: "Schulich Off-Road", + location: "Ab", + start_month: "May 2023", + end_month: "Sept 2024", + }, + ExpDes { + postition: "Chassis Junior Member", + company: "Schulich Off-Road", + location: "Ab", + start_month: "Sept 2022", + end_month: "May 2023", + }, + ExpDes { + postition: "Coaching with Elk Valley Special Olympics", + company: "Elk Valley Dolphins", + location: "BC", + start_month: "May 2019", + end_month: "May 2019", + }, +]; diff --git a/src/views/footer.rs b/src/components/footer.rs similarity index 93% rename from src/views/footer.rs rename to src/components/footer.rs index ac3b257..042f87f 100644 --- a/src/views/footer.rs +++ b/src/components/footer.rs @@ -1,6 +1,6 @@ use std::collections::HashMap; -use crate::helper_fun::{get_tech_logos_from_str, tech_table_lookup, TechDes}; +use crate::helper_fun::{tech_table_lookup, TechDes}; use dioxus::prelude::*; const ENDER_CSS: Asset = asset!("/assets/styling/ender.css"); diff --git a/src/components/mod.rs b/src/components/mod.rs index 633dd46..b12b942 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -7,3 +7,9 @@ pub use hero::Hero; mod techs; pub use techs::TechCat; + +mod footer; +pub use footer::Ender; + +mod experience; +pub use experience::Experience; diff --git a/src/helper_fun.rs b/src/helper_fun.rs index 34f3aed..fb6aa24 100644 --- a/src/helper_fun.rs +++ b/src/helper_fun.rs @@ -11,6 +11,7 @@ pub fn get_tech_logos_from_str(used_tech: &'static str) -> Element { #[derive(PartialEq, Props, Clone, Copy)] pub struct TechDes { + pub tech_name: &'static str, pub tech_logo: &'static str, pub project_site: &'static str, pub skill_level: u8, @@ -26,326 +27,246 @@ pub struct ProjectDes { } pub fn tech_table_lookup(to_lookup: &str) -> Rc { - let techs_tools_frameworks_lookup: Rc> = HashMap::from([ - ( - "Rust", + let mut tech_to_return: TechDes = TechDes { + tech_name: "Not in table", + tech_logo: "", + project_site: "", + skill_level: 0, + }; + + for tech in TECH_TABLE { + if tech.tech_name == to_lookup { + tech_to_return = tech.into(); + } + } + tech_to_return.into() +} + +const TECH_TABLE:[TechDes; 37] = [ TechDes { + tech_name: "Rust", tech_logo: "https://www.svgrepo.com/show/374056/rust.svg", project_site: "https://www.rust-lang.org", skill_level: 60, }, - ), - - ( - "Python", TechDes { + tech_name: "Python", tech_logo: "https://www.svgrepo.com/show/452091/python.svg", project_site: "https://www.python.org", skill_level: 50, }, - ), - ( - "JavaScript", + TechDes { + tech_name: "JavaScript", tech_logo: "https://www.svgrepo.com/show/303206/javascript-logo.svg", project_site: "https://www.python.org", skill_level: 60, }, - ), - ( - "YAML", + TechDes { + tech_name: "YAML", tech_logo: "https://yaml.org/favicon.svg", project_site: "https://yaml.org", skill_level: 95, }, - ), - ( - "C", - TechDes { - tech_logo: "https://www.c-language.org/logo.svg", - project_site: "https://www.c-language.org", - skill_level: 49, - }, - ), - ( - "C++", - TechDes { - tech_logo: "https://www.svgrepo.com/show/452183/cpp.svg", - project_site: "https://cplusplus.com", - skill_level: 49, - }, - ), - ( - "Github", TechDes { + tech_name: "Github", tech_logo: "https://www.svgrepo.com/show/512317/github-142.svg", project_site: "https://github.com/darkicewolf50", skill_level: 80, }, - ), - ( - "Email", TechDes { + tech_name: "Email", tech_logo: "https://www.svgrepo.com/show/491226/email.svg", project_site: "mailto:darkicewolf50@gmail.com", skill_level: 100, }, - ), - ( - "LinkedIn", + TechDes { + tech_name: "LinkedIn", tech_logo: "https://www.svgrepo.com/show/521725/linkedin.svg", project_site: "https://www.linkedin.com/in/brock-tomlinson/", skill_level: 40, }, - ), - ( - "Twitch", TechDes { + tech_name: "Twitch", tech_logo: "https://www.svgrepo.com/show/519925/twitch.svg", project_site: "https://www.twitch.tv/darkicewolf50", skill_level: 60, }, - ), - ( - "Youtube", TechDes { + tech_name: "Youtube", tech_logo: "https://www.svgrepo.com/show/521936/youtube.svg", project_site: "https://www.youtube.com/@darkicewolf50", skill_level: 40, }, - ), - ( - "Internet", TechDes { + tech_name: "Internet", tech_logo: "https://www.svgrepo.com/show/490809/internet.svg", project_site: "https://google.com", skill_level: 99, }, - ), - ( - "React", TechDes { + tech_name: "React", tech_logo: "https://www.svgrepo.com/show/452092/react.svg", project_site: "https://react.dev", skill_level: 70, }, - ), - ( - "Docker", TechDes { + tech_name: "Docker", tech_logo: "https://www.svgrepo.com/show/448221/docker.svg", project_site: "https://www.docker.com", skill_level: 70, }, - ), - ( - "FastAPI", TechDes { + tech_name: "FastAPI", tech_logo: "https://fastapi.tiangolo.com/img/favicon.png", project_site: "https://fastapi.tiangolo.com", skill_level: 80, }, - ), - ( - "Actix", + TechDes { + tech_name: "Actix", tech_logo: "https://actix.rs/img/logo.png", project_site: "https://actix.rs", skill_level: 20, }, - ), - ( - "HTML5", TechDes { + tech_name: "HTML5", tech_logo: "https://www.svgrepo.com/show/452228/html-5.svg", project_site: "https://google.com", skill_level: 90, }, - ), - ( - "CSS", TechDes { + tech_name: "CSS", tech_logo: "https://www.svgrepo.com/show/452185/css-3.svg", project_site: "https://google.com", skill_level: 65, }, - ), - ( - "Git", TechDes { + tech_name: "Git", tech_logo: "https://www.svgrepo.com/show/452210/git.svg", project_site: "https://git-scm.com", skill_level: 55, }, - ), - ( - "Github Actions", TechDes { + tech_name: "Github Actions", tech_logo: "https://cdn.simpleicons.org/githubactions/2088FF", project_site: "https://github.com/", skill_level: 50, }, - ), - ( - "Vs Code", TechDes { + tech_name: "Vs Code", tech_logo: "https://www.svgrepo.com/show/452129/vs-code.svg", project_site: "https://code.visualstudio.com", skill_level: 60, }, - ), - ( - "Gitea", TechDes { + tech_name: "Gitea", tech_logo: "https://about.gitea.com/gitea.png", project_site: "https://about.gitea.com", skill_level: 85, }, - ), - ( - "AWS", TechDes { + tech_name: "AWS", tech_logo: "https://www.svgrepo.com/show/448266/aws.svg", project_site: "https://aws.amazon.com", skill_level: 30, }, - ), - ( - "Firefox", TechDes { - tech_logo: - "https://www.svgrepo.com/show/378808/firefox-developer-edition-57-70.svg", + tech_name: "Firefox", + tech_logo: "https://www.svgrepo.com/show/378808/firefox-developer-edition-57-70.svg", project_site: "https://www.mozilla.org/en-CA/firefox/developer/", skill_level: 80, }, - ), - ( - "Markdown", TechDes { + tech_name: "Markdown", tech_logo: "https://www.svgrepo.com/show/510065/markdown.svg", project_site: "https://www.markdownguide.org", skill_level: 90, }, - ), - ( - "Prettier", TechDes { + tech_name: "Prettier", tech_logo: "https://prettier.io/icon.png", project_site: "https://prettier.io", skill_level: 90, }, - ), - ( - "DynamoDB", - TechDes { - tech_logo: "https://www.svgrepo.com/show/473526/amazondynamodb.svg", - project_site: "https://aws.amazon.com/dynamodb/", - skill_level: 70, - }, - ), - ( - "Cloudflare", TechDes { + tech_name: "Cloudflare", tech_logo: "https://qualified-production.s3.us-east-1.amazonaws.com/uploads/3b522ef84c409e4457032e4b4e3b984abbc92522c6f100f4ccc55c0ccfd3062b.png", project_site: "https://www.cloudflare.com/en-ca/", skill_level: 65, }, - ), - ( - "Netlify", TechDes { + tech_name: "Netlify", tech_logo: "https://qualified-production.s3.us-east-1.amazonaws.com/uploads/0f63ae7280d8d193e346973a1915bf99aea8c63e254eb062bad0bde99b43a9b7.png", project_site: "https://www.netlify.com", skill_level: 60, }, - ), - ( - "Vercel", TechDes { + tech_name: "Vercel", tech_logo: "https://www.svgrepo.com/show/361653/vercel-logo.svg", project_site: "https://vercel.com/home", skill_level: 60, }, - ), - ( - "Dioxus", TechDes { + tech_name: "Dioxus", tech_logo: "https://dioxuslabs.com/assets/smalllogo-b1926fd214dc8427.png", project_site: "https://dioxuslabs.com", skill_level: 70, }, - ), - ( - "Vue", TechDes { + tech_name: "Vue", tech_logo: "https://vuejs.org/logo.svg", project_site: "https://vuejs.org", skill_level: 1, }, - ), - ( - "Mongodb", TechDes { + tech_name: "Mongodb", tech_logo: "https://www.svgrepo.com/show/331488/mongodb.svg", project_site: "https://www.mongodb.com", skill_level: 10, }, - ), - ( - "Sqlite", TechDes { + tech_name: "Sqlite", tech_logo: "https://www.svgrepo.com/show/374094/sqlite.svg", project_site: "https://www.sqlite.org", skill_level: 10, }, - ), - ( - "PostgreSQL", TechDes { + tech_name: "PostgreSQL", tech_logo: "https://www.svgrepo.com/show/303301/postgresql-logo.svg", project_site: "https://www.postgresql.org", skill_level: 10, }, - ), - ( - "Diesel", TechDes { + tech_name: "DynamoDB", + tech_logo: "https://www.svgrepo.com/show/473526/amazondynamodb.svg", + project_site: "https://aws.amazon.com/dynamodb/", + skill_level: 70, + }, + TechDes { + tech_name: "Diesel", tech_logo: "https://res.cloudinary.com/dpgrgsh7g/image/upload/v1745443276/diesel_logo_ujtvia.png", project_site: "https://diesel.rs", skill_level: 10, }, - ), - ( - "Kubernetes", TechDes { + tech_name: "Kubernetes", tech_logo: "https://kubernetes.io/images/kubernetes.png", project_site: "https://kubernetes.io", skill_level: 5, }, - ), - ( - "Terraform", TechDes { + tech_name: "Terraform", tech_logo: "https://www.svgrepo.com/show/448253/terraform.svg", project_site: "https://www.terraform.io", skill_level: 15, }, - ), - ( - "Traefik", TechDes { + tech_name: "Traefik", tech_logo: "https://hub.docker.com/api/media/repos_logo/v1/library%2Ftraefik", project_site: "https://traefik.io/traefik/", skill_level: 60, }, - ), - ]).into(); - techs_tools_frameworks_lookup[to_lookup].into() -} - -// pub fn techs_tools_frameworks_lookup_create() -> HashMap<&'static str, TechDes> { - -// techs_tools_frameworks_lookup -// } + ]; diff --git a/src/lib.rs b/src/lib.rs index 57b8e82..372dc25 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -1,7 +1,7 @@ use dioxus::prelude::*; // use components::Hero; -use views::{Blog, Home, Navbar, NewHome}; +use views::{Blog, Blogs, Home, Navbar, NewHome}; /// Define a components module that contains all shared components for our app. mod components; @@ -31,7 +31,10 @@ pub enum Route { #[route("/blogs/:id")] // Fields of the route variant will be passed to the component as props. In this case, the blog component must accept // an `id` prop of type `i32`. - Blog { id: i32 }, + Blogs { id: i32 }, + + #[route("/blogs/:blog_title")] + Blog {blog_title: String}, #[route("/test")] Hello {}, diff --git a/src/views/blog.rs b/src/views/blog.rs index 50c2ba7..0bbe8b4 100644 --- a/src/views/blog.rs +++ b/src/views/blog.rs @@ -1,5 +1,5 @@ use crate::Route; -use dioxus::prelude::*; +use dioxus::{document::Link, prelude::*}; const BLOG_CSS: Asset = asset!("/assets/styling/blog.css"); @@ -8,31 +8,43 @@ const BLOG_CSS: Asset = asset!("/assets/styling/blog.css"); /// The component takes a `id` prop of type `i32` from the route enum. Whenever the id changes, the component function will be /// re-run and the rendered HTML will be updated. #[component] -pub fn Blog(id: i32) -> Element { +pub fn Blog(blog_title: String) -> Element { rsx! { document::Link { rel: "stylesheet", href: BLOG_CSS } - div { - id: "blog", + div { id: "blog", // Content - h1 { "This is blog #{id}!" } - p { "In blog #{id}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components." } - - // Navigation links - // The `Link` component lets us link to other routes inside our app. It takes a `to` prop of type `Route` and - // any number of child nodes. - Link { - // The `to` prop is the route that the link should navigate to. We can use the `Route` enum to link to the - // blog page with the id of -1. Since we are using an enum instead of a string, all of the routes will be checked - // at compile time to make sure they are valid. - to: Route::Blog { id: id - 1 }, - "Previous" + h1 { "This is blog #{blog_title}!" } + p { + "In blog #{blog_title}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components." } - span { " <---> " } - Link { - to: Route::Blog { id: id + 1 }, - "Next" + + // // Navigation links + // // The `Link` component lets us link to other routes inside our app. It takes a `to` prop of type `Route` and + // // any number of child nodes. + // Link { + // // The `to` prop is the route that the link should navigate to. We can use the `Route` enum to link to the + // // blog page with the id of -1. Since we are using an enum instead of a string, all of the routes will be checked + // // at compile time to make sure they are valid. + // to: Route::Blog { id: id - 1 }, + // "Previous" + // } + // span { " <---> " } + // Link { to: Route::Blog { id: id + 1 }, "Next" } + } + } +} + +#[component] +pub fn Blogs(id: i32) -> Element { + rsx! { + document::Link { rel: "stylesheet", href: BLOG_CSS } + div { id: "blogs", + h1 { "Page Under Development" } + p { "Please Try Again Later" } + dioxus::prelude::Link { to: Route::Home {}, + button { "Home" } } } } diff --git a/src/views/home.rs b/src/views/home.rs index aff0444..eda279a 100644 --- a/src/views/home.rs +++ b/src/views/home.rs @@ -1,4 +1,4 @@ -use crate::components::TechCat; +use crate::components::{Experience, TechCat}; use crate::views::{Contact, Projects}; use dioxus::prelude::*; @@ -10,8 +10,6 @@ pub fn Home() -> Element { "Rust", "Python", "YAML", - "C", - "C++", "HTML5", "CSS", "JavaScript", @@ -52,6 +50,13 @@ pub fn Home() -> Element { } Contact {} Projects {} + div { id: "experience", + h2 { "Experience" } + div { + Experience { professional_jobs: true } + Experience { professional_jobs: false } + } + } } ) } diff --git a/src/views/mod.rs b/src/views/mod.rs index cb34b00..24b880f 100644 --- a/src/views/mod.rs +++ b/src/views/mod.rs @@ -12,7 +12,7 @@ mod new_home; pub use new_home::NewHome; mod blog; -pub use blog::Blog; +pub use blog::{Blog, Blogs}; mod navbar; pub use navbar::Navbar; @@ -20,9 +20,6 @@ pub use navbar::Navbar; mod home; pub use home::Home; -mod footer; -pub use footer::Ender; - mod contact; pub use contact::Contact; diff --git a/src/views/navbar.rs b/src/views/navbar.rs index 46042bf..f3f5603 100644 --- a/src/views/navbar.rs +++ b/src/views/navbar.rs @@ -1,4 +1,4 @@ -use crate::views::Ender; +use crate::components::Ender; use crate::Route; use dioxus::prelude::*; @@ -18,7 +18,7 @@ pub fn Navbar() -> Element { div { id: "navbar", Link { to: Route::NewHome {}, "Home" } - Link { to: Route::Blog { id: 0 }, "Blogs" } + Link { to: Route::Blogs { id: 0 }, "Blogs" } } // The `Outlet` component is used to render the next component inside the layout. In this case, it will render either