project setup

src/components/hero.rs

@@ -0,0 +1,25 @@
+use dioxus::prelude::*;
+
+const HEADER_SVG: Asset = asset!("/assets/header.svg");
+
+#[component]
+pub fn Hero() -> Element {
+	rsx! {
+		// We can create elements inside the rsx macro with the element name followed by a block of attributes and children.
+		div {
+			// Attributes should be defined in the element before any children
+			id: "hero",
+			// After all attributes are defined, we can define child elements and components
+			img { src: HEADER_SVG, id: "header" }
+			div { id: "links",
+				// The RSX macro also supports text nodes surrounded by quotes
+				a { href: "https://dioxuslabs.com/learn/0.7/", "📚 Learn Dioxus" }
+				a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" }
+				a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" }
+				a { href: "https://github.com/DioxusLabs/sdk", "⚙️ Dioxus Development Kit" }
+				a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", "💫 VSCode Extension" }
+				a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" }
+			}
+		}
+	}
+}

src/components/mod.rs

@@ -0,0 +1,6 @@
+//! The components module contains all shared components for our app. Components are the building blocks of dioxus apps.
+//! They can be used to defined common UI elements like buttons, forms, and modals. In this template, we define a Hero
+//! component  to be used in our app.
+
+mod hero;
+pub use hero::Hero;