Updates to client

AobaClient/assets/style/inputs.scss

@@ -0,0 +1,4 @@
+.searchBar {
+	display: grid;
+	width: 100%;
+}

AobaClient/assets/style/main.scss

@@ -1,5 +1,6 @@
-@import 'mixins';
-@import 'colors';
+@import "mixins";
+@import "colors";
+@import "inputs";
 
 :root {
 	background-color: $mainBGColor;
@@ -9,8 +10,7 @@
 	font-optical-sizing: auto;
 	font-weight: 400;
 	font-style: normal;
-	font-variation-settings:
-		"wdth" 100;
+	font-variation-settings: "wdth" 100;
 }
 
 body {
@@ -27,4 +27,39 @@ body {
 #content {
 	grid-area: Content;
 	margin-left: $navBarSize;
-}
+}
+
+.mediaGrid {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 5px;
+
+	.mediaItem {
+		width: 200px;
+		background-color: $featureColor;
+
+		img {
+			aspect-ratio: 1;
+			object-fit: cover;
+			object-position: center;
+			width: 100%;
+			background-color: $invertTextColor;
+			border: 0;
+			outline: none;
+		}
+
+		.info {
+			padding: 2px 5px;
+
+			.name {
+				text-align: center;
+				width: 100%;
+				display: block;
+			}
+			.details {
+				display: flex;
+				justify-content: space-between;
+			}
+		}
+	}
+}

AobaClient/src/components/basic/button.rs

@@ -0,0 +1,20 @@
+use dioxus::prelude::*;
+
+#[derive(PartialEq, Clone, Props)]
+pub struct ButtonProps {
+	variant: Option<ButtonVariant>,
+	text: String,
+}
+
+#[derive(PartialEq, Clone)]
+pub enum ButtonVariant {
+	Base,
+	Muted,
+	Accented,
+}
+
+pub fn Button(props: ButtonProps) -> Element {
+	rsx! {
+		button { "{props.text}" }
+	}
+}

AobaClient/src/components/basic/input.rs

@@ -0,0 +1,27 @@
+use dioxus::prelude::*;
+
+#[derive(PartialEq, Clone, Props)]
+pub struct InputProps {
+	pub r#type: Option<String>,
+	pub value: Option<String>,
+	pub label: Option<String>,
+	pub placeholder: Option<String>,
+	pub name: String,
+}
+
+#[component]
+pub fn Input(props: InputProps) -> Element {
+	let label = props.label.unwrap_or("".into());
+	let ph = props.placeholder.unwrap_or(label.clone());
+	rsx! {
+		label {
+			"{label}",
+			input {
+				type : props.r#type.unwrap_or("text".into()),
+				value: props.value,
+				name: props.name,
+				placeholder:ph
+			}
+		}
+	}
+}

AobaClient/src/components/basic/mod.rs

@@ -0,0 +1,4 @@
+mod button;
+mod input;
+pub use button::*;
+pub use input::*;

AobaClient/src/components/media_grid.rs

@@ -0,0 +1,39 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn MediaGrid() -> Element {
+	rsx! {
+		div{
+			class: "mediaGrid",
+			{(0..50).map(|_| rsx!{
+				MediaItem {}
+			})}
+		}
+	}
+}
+
+#[component]
+pub fn MediaItem() -> Element {
+	rsx! {
+		div{
+			class: "mediaItem",
+			img{}
+			div {
+				class: "info",
+				span{
+					class: "name",
+					"Filename"
+				},
+				div{
+					class: "details",
+					span{
+						"Type"
+					},
+					span{
+						"View Count"
+					},
+				}
+			}
+		}
+	}
+}

AobaClient/src/components/mod.rs

@@ -1,4 +1,7 @@
-mod main_layout;
+pub mod basic;
+mod media_grid;
 mod navbar;
-pub use main_layout::MainLayout;
-pub use navbar::Navbar;
+mod search;
+pub use media_grid::*;
+pub use navbar::*;
+pub use search::*;

AobaClient/src/components/search.rs

@@ -0,0 +1,14 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn Search() -> Element {
+	rsx! {
+		div{
+			class: "searchBar",
+			input {
+				type: "search",
+				placeholder: "Search Files"
+			}
+		}
+	}
+}

AobaClient/src/layouts/basic_layout.rs

@@ -0,0 +1,10 @@
+use dioxus::prelude::*;
+
+use crate::route::Route;
+
+#[component]
+pub fn BasicLayout() -> Element {
+	rsx! {
+		Outlet::<Route> {}
+	}
+}

AobaClient/src/layouts/mod.rs

@@ -0,0 +1,4 @@
+mod basic_layout;
+mod main_layout;
+pub use basic_layout::*;
+pub use main_layout::*;

AobaClient/src/main.rs

@@ -1,4 +1,5 @@
 pub mod components;
+mod layouts;
 pub mod models;
 pub mod route;
 pub mod views;

AobaClient/src/route.rs

@@ -1,12 +1,19 @@
+use crate::{
+	layouts::{BasicLayout, MainLayout},
+	views::{Home, Login, Settings},
+};
 use dioxus::prelude::*;
-use crate::views::{Home, Settings};
-use crate::components::MainLayout;
 
 #[derive(Debug, Clone, Routable, PartialEq)]
+#[rustfmt::skip]
 pub enum Route {
 	#[layout(MainLayout)]
-	#[route("/")]
-	Home {},
-	#[route("/settings")]
-	Settings {},
+		#[route("/")]
+		Home {},
+		#[route("/settings")]
+		Settings {},
+	#[end_layout]
+	#[layout(BasicLayout)]
+		#[route("/login")]
+		Login {},
 }

AobaClient/src/views/home.rs

@@ -1,4 +1,4 @@
-use crate::models::media::Media;
+use crate::components::{MediaGrid, Search};
 use dioxus::prelude::*;
 
 #[component]
@@ -6,12 +6,8 @@ pub fn Home() -> Element {
 	rsx! {
 		div { id: "content",
 			"This is home"
+			Search {  },
+			MediaGrid { }
 		}
 	}
 }
-#[component]
-fn MediaDisplay(media: Media) -> Element {
-	rsx! {
-		div { "{media.id}" }
-	}
-}

AobaClient/src/views/login.rs

@@ -0,0 +1,17 @@
+use dioxus::prelude::*;
+
+use crate::components::basic::{Button, Input};
+
+#[component]
+pub fn Login() -> Element {
+	rsx! {
+		div{
+			id: "centralModal",
+			form{
+				Input { type : "text", name: "username", label: "Username" },
+				Input{ type : "password", name: "password", label: "Password" },
+				Button{text: "Login!"}
+			}
+		}
+	}
+}

AobaClient/src/views/mod.rs

@@ -1,5 +1,7 @@
 mod home;
-pub use home::Home;
+mod login;
+pub use home::*;
+pub use login::*;
 
 mod settings;
 pub use settings::Settings;