Code runs and shows a base layout with some empty components.

.gitignore

@@ -1 +1,2 @@
 /target
+/dist

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "rust-analyzer.linkedProjects": [
+        "./Cargo.toml",
+    ],
+    "rust-analyzer.showUnlinkedFileNotification": false
+}

Dioxus.toml

@@ -33,7 +33,7 @@ index_on_404 = true
 [web.resource]
 
 # CSS style file
-style = ["/styles/tailwind.min.css"]
+style = ["styles/tailwind.min.css"]
 
 # Javascript code file
 script = []
@@ -41,7 +41,7 @@ script = []
 [web.resource.dev]
 
 # CSS style file
-style = ["/styles/tailwind.min.css"]
+# style = ["styles/tailwind.min.css"]
 
 # Javascript code file
 # serve: [dev-server] only

build.rs

@@ -1,7 +1,7 @@
 fn main() {
     let mut tailwind = std::process::Command::new("npx");
     tailwind.args(
-        "tailwindcss -i src/index.css -c tailwind.config.js -o styles/tailwind.min.css --minify"
+        "tailwindcss -i src/index.css -c tailwind.config.js -o public/styles/tailwind.min.css --minify"
             .split(" "),
     );
     tailwind.env("NODE_ENV", "production");

src/components.rs

@@ -0,0 +1,7 @@
+pub mod stream_base;
+pub mod stream_title;
+pub mod stream_content;
+pub mod stream_sidebar;
+pub mod stream_topbar;
+pub mod stream_chat;
+pub mod stream_overlays;

src/components/stream_base.rs

@@ -0,0 +1,20 @@
+use dioxus::prelude::*;
+use crate::components::stream_title::*;
+use crate::components::stream_sidebar::*;
+use crate::components::stream_topbar::*;
+use crate::components::stream_content::*;
+
+pub fn BasePage(cx: Scope) -> Element {
+    cx.render(rsx!{
+        div { class: "min-w-max min-h-screen bg-alice-werefox-grey-dark",
+            div { class: "relative w-1920 h-1080 p-4 ring-[1px] ring-pink-300",
+                div { class: "flex flex-col space-y-4",
+                    StreamTitle {},
+                    StreamSidebar {},
+                    StreamTopbar {},
+                    StreamContent {}
+                }
+            }
+        }
+    })
+}

src/components/stream_content.rs

@@ -0,0 +1,9 @@
+use dioxus::prelude::*;
+
+pub fn StreamContent(cx: Scope) -> Element {
+    cx.render(rsx!{
+        div { class: "absolute bottom-4 right-4 w-1280 h-720 p-4 ring-[1px] ring-ada-werefox-cyan bg-[rgb(255,0,150)]",
+            div {}
+        }
+    })
+}

src/components/stream_sidebar.rs

@@ -0,0 +1,9 @@
+use dioxus::prelude::*;
+
+pub fn StreamSidebar(cx: Scope) -> Element {
+    cx.render(rsx!{
+        div { class: "absolute bottom-4 left-4 p-4 ring-[1px] ring-ada-werefox-cyan bg-alice-werefox-grey w-[36rem] h-[60rem]",
+            div {}
+        }
+    })
+}

src/components/stream_title.rs

@@ -0,0 +1,11 @@
+use dioxus::prelude::*;
+
+pub fn StreamTitle(cx: Scope) -> Element {
+    return cx.render(rsx!{
+        div { class: "flex p-4 h-16 text-lg text-center ring-2 text-alice-werefox-grey-lighter ring-alice-werefox-grey-light bg-alice-werefox-grey",
+            div { class: "m-auto",
+                "Test Thing."
+            }
+        }
+    });
+}

src/components/stream_topbar.rs

@@ -0,0 +1,9 @@
+use dioxus::prelude::*;
+
+pub fn StreamTopbar(cx: Scope) -> Element {
+    cx.render(rsx!{
+        div { class: "absolute top-[5.5rem] right-4 p-4 ring-[1px] ring-ada-werefox-cyan bg-alice-werefox-grey w-[80rem] h-[13rem]",
+            div {}
+        }
+    })
+}

src/lib.rs

@@ -4,7 +4,7 @@
 
 #![allow(non_snake_case)]
 
-// mod components;
+mod components;
 // pub mod utils;
 
 /// A module that handles the functions needed
@@ -17,6 +17,7 @@ pub mod layouts_app {
     // use dioxus_helmet::Helmet;
     use dioxus_router::{Redirect, Route, Router};
     // use dioxus_use_storage::use_local_storage;
+    use crate::components::stream_base::*;
 
     pub fn DioxusApp(cx: Scope) -> Element {
 
@@ -38,9 +39,7 @@ pub mod layouts_app {
     /// Renders the app and returns the rendered Element.
     pub fn HomePage(cx: Scope) -> Element {
         cx.render(rsx!{
-            div { class: "",
+            BasePage {}
-                "Hello, world!"
-            }
         })
     }
 }

src/main.rs

@@ -2,7 +2,10 @@
 use console_error_panic_hook;
 
 #[cfg(target_family = "wasm")]
-use layouts_app;
+use dioxus_web;
+
+#[cfg(target_family = "wasm")]
+use werefox_stream_layouts::layouts_app;
 
 #[cfg(target_family = "wasm")]
 use wasm_logger;

tailwind.config.js

@@ -14,6 +14,15 @@ module.exports = {
       }
     },
     extend: {
+      width: {
+        "1920": "1920px",
+        "1280": "1280px",
+        "960": "960px",
+      },
+      height: {
+        "1080": "1080px",
+        "720": "720px",
+      },
       fontFamily: {
         nerd: ["DejaVuSansMono"],
         open: ["OpenDyslexic"],