diff --git a/Cargo.lock b/Cargo.lock
index f909f47..12ff715 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -2497,6 +2497,15 @@ version = "0.1.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "b3bd0dd2cd90571056fdb71f6275fada10131182f84899f4b2a916e565d81d86"
+[[package]]
+name = "lucide-dioxus"
+version = "2.15.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0d06f27420e7a960d76a02f43819fba2fb3a513738714cc6262c02d9fd256e5c"
+dependencies = [
+ "dioxus",
+]
+
[[package]]
name = "mac"
version = "0.1.1"
@@ -3632,6 +3641,7 @@ name = "sentryx"
version = "0.1.0"
dependencies = [
"dioxus",
+ "lucide-dioxus",
]
[[package]]
diff --git a/Cargo.toml b/Cargo.toml
index b2f2349..c3a6f35 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -8,6 +8,7 @@ edition = "2021"
[dependencies]
dioxus = { version = "0.6.0", features = ["router", "fullstack"] }
+lucide-dioxus = { version = "2.15.0", features = ["all-icons"] }
[features]
default = ["web"]
diff --git a/assets/dashboard.css b/assets/dashboard.css
index db40365..99293b1 100644
--- a/assets/dashboard.css
+++ b/assets/dashboard.css
@@ -1,95 +1,155 @@
body {
- background-color: #111526;
+ background-color: #f1f5f9;
+ margin: 0;
+ color: #0f172a;
+}
+
+.sidebar-container {
+ margin-top: 20px;
+ display: flex;
+ gap: 20px;
+}
+
+.dashboard-container {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ flex: 1;
+ width: 100%;
+ padding-right: 25px;
+}
+
+.summary-container {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 18px;
+ width: 100%;
+}
+
+.summary-card {
+ box-sizing: border-box;
+ height: 100px;
+ background-color: #fff;
+ padding: 1.5rem;
+ border-radius: 10px;
+ display: flex;
+ align-items: center;
+ width: 100%;
+}
+
+.summary-card h3 {
+ font-size: x-large;
margin: 0;
}
-.container {
- display: grid;
- grid-template-columns: 400px 2fr 1.6fr;
+.summary-card p {
+ margin: 0;
+}
+
+.summary-card svg {
+ margin-left: auto;
+}
+
+#online {
+ color: #16a34a;
+}
+
+#issues {
+ color: rgb(234, 71, 12);
+}
+
+#cpu {
+ color: rgb(37, 99, 235);
+}
+
+#ram {
+ color: rgb(147, 51, 234);
+}
+
+.summary-card p {
+ color: black;
+}
+
+.overview-container {
+ display: flex;
gap: 20px;
}
-.left_container {
- display: grid;
- grid-template-rows: 200px 450px 230px;
- gap: 20px;
- padding-top: 20px;
-}
-
-#top_container,
-#mid_container,
-#bottom_container {
+.performance-card {
+ background-color: #fff;
box-sizing: border-box;
- background-color: #171b2e;
- border-radius: 20px;
+ padding: 1.5rem;
+ border-radius: 10px;
width: 100%;
- padding: 30px;
}
-.right_container {
- display: grid;
- gap: 20px;
- padding-top: 20px;
- padding-right: 20px;
- max-height: calc(100vh - 40px);
-}
+@media (max-width: 1300px) {
+ .summary-container {
+ grid-template-columns: repeat(2, 1fr);
+ }
-.right_box {
- box-sizing: border-box;
- padding: 30px;
- background-color: #171b2e;
- border-radius: 20px;
- width: 100%;
- height: 100%;
- overflow: auto;
-}
-
-@media (max-width: 1000px) {
- .container {
- display: flex;
+ .overview-container {
flex-direction: column;
- padding-left: 20px;
- padding-right: 20px;
}
- #sidebar {
- display: none;
- height: 150px;
- border-radius: 20px;
- }
-
- .right_container {
- padding-top: 10px;
- aspect-ratio: 1 / 1;
- width: 100%;
+ .dashboard-container {
+ padding-left: 25px;
}
}
-
-.line-chart {
+.search-container {
+ display: flex;
+ background-color: #fff;
+ box-sizing: border-box;
+ padding: 1.5rem;
+ border-radius: 10px;
width: 100%;
- height: 100%;
+ gap: 10px;
}
-
-.line-chart-svg {
+.search-input input {
+ appearance: auto;
+ background-color: #fff;
+ border: 1px solid rgb(226, 232, 240);
+ border-radius: 6px;
+ box-sizing: border-box;
+ color: rgb(2, 8, 23);
+ cursor: auto;
+ display: flex;
+ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ height: 40px;
width: 100%;
- height: 100%;
- display: block;
+ padding: 8px 12px 8px 40px;
+ margin: 0;
+ text-align: start;
}
-.line-chart .fill {
- background: linear-gradient(to right, red, yellow);
- -webkit-mask: url(#svg-path);
- mask: url(#svg-path);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-position: center;
- mask-position: center;
+.search-input input:focus {
+ border-color: rgb(0, 0, 0);
+ border-width: 2px;
+ outline: none;
}
-.line-chart .line {
- stroke-width: 1px;
+.search-input {
+ position: relative;
+ width: 100%;
+}
+
+.search-input svg {
+ position: absolute;
+ top: 12px;
+ left: 12px;
+}
+
+.search-container button {
+ background-color: transparent;
+ border: 1px solid currentColor;
+ border-radius: 6px;
+ outline: none;
+ white-space: nowrap;
+ font-weight: bold;
}
diff --git a/assets/font.css b/assets/font.css
index 4727f57..bac68ab 100644
--- a/assets/font.css
+++ b/assets/font.css
@@ -1,79 +1,91 @@
@font-face {
- font-family: 'Roboto';
- src: url('assets/font/Roboto-Regular.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
+ font-family: "Roboto";
+ src: url("assets/font/Roboto-Regular.ttf") format("truetype");
+ font-weight: normal;
+ font-style: normal;
}
@font-face {
- font-family: 'Roboto';
- src: url('assets/font/Roboto-Bold.ttf') format('truetype');
- font-weight: bold;
- font-style: normal;
+ font-family: "Roboto";
+ src: url("assets/font/Roboto-Bold.ttf") format("truetype");
+ font-weight: bold;
+ font-style: normal;
}
@font-face {
- font-family: 'Roboto';
- src: url('assets/font/Roboto-Italic.ttf') format('truetype');
- font-weight: normal;
- font-style: italic;
+ font-family: "Roboto";
+ src: url("assets/font/Roboto-Italic.ttf") format("truetype");
+ font-weight: normal;
+ font-style: italic;
}
@font-face {
- font-family: 'Roboto';
- src: url('assets/font/Roboto-BoldItalic.ttf') format('truetype');
- font-weight: bold;
- font-style: italic;
+ font-family: "Roboto";
+ src: url("assets/font/Roboto-BoldItalic.ttf") format("truetype");
+ font-weight: bold;
+ font-style: italic;
}
@font-face {
- font-family: 'Roboto Condensed';
- src: url('assets/font/Roboto_Condensed-ExtraLight.ttf') format('truetype');
- font-weight: 200;
- font-style: normal;
+ font-family: "Roboto Condensed";
+ src: url("assets/font/Roboto_Condensed-ExtraLight.ttf") format("truetype");
+ font-weight: 200;
+ font-style: normal;
}
@font-face {
- font-family: 'Roboto Condensed';
- src: url('assets/font/Roboto_Condensed-ExtraLightItalic.ttf') format('truetype');
- font-weight: 200;
- font-style: italic;
+ font-family: "Roboto Condensed";
+ src: url("assets/font/Roboto_Condensed-ExtraLightItalic.ttf")
+ format("truetype");
+ font-weight: 200;
+ font-style: italic;
}
@font-face {
- font-family: 'Roboto';
- src: url('assets/font/Roboto-Medium.ttf') format('truetype');
- font-weight: 500;
- font-style: normal;
+ font-family: "Roboto";
+ src: url("assets/font/Roboto-Medium.ttf") format("truetype");
+ font-weight: 500;
+ font-style: normal;
}
@font-face {
- font-family: 'Roboto';
- src: url('assets/font/Roboto-MediumItalic.ttf') format('truetype');
- font-weight: 500;
- font-style: italic;
+ font-family: "Roboto";
+ src: url("assets/font/Roboto-MediumItalic.ttf") format("truetype");
+ font-weight: 500;
+ font-style: italic;
}
@font-face {
- font-family: 'Roboto';
- src: url('assets/font/Roboto-SemiBold.ttf') format('truetype');
- font-weight: 600;
- font-style: normal;
+ font-family: "Roboto";
+ src: url("assets/font/Roboto-SemiBold.ttf") format("truetype");
+ font-weight: 600;
+ font-style: normal;
}
@font-face {
- font-family: 'Roboto';
- src: url('assets/font/Roboto-SemiBoldItalic.ttf') format('truetype');
- font-weight: 600;
- font-style: italic;
+ font-family: "Roboto";
+ src: url("assets/font/Roboto-SemiBoldItalic.ttf") format("truetype");
+ font-weight: 600;
+ font-style: italic;
}
@font-face {
- font-family: 'Roboto';
- src: url('assets/font/Roboto-ExtraBold.ttf') format('truetype');
- font-weight: 800;
- font-style: normal;
+ font-family: "Roboto";
+ src: url("assets/font/Roboto-ExtraBold.ttf") format("truetype");
+ font-weight: 800;
+ font-style: normal;
}
@font-face {
- font-family: 'Roboto';
- src: url('assets/font/Roboto-ExtraBoldItalic.ttf') format('truetype');
- font-weight: 800;
- font-style: italic;
+ font-family: "Roboto";
+ src: url("assets/font/Roboto-ExtraBoldItalic.ttf") format("truetype");
+ font-weight: 800;
+ font-style: italic;
}
body {
- font-family: 'Roboto', 'Roboto Condensed', sans-serif;
- font-weight: normal;
- font-style: normal;
- color: #ffffff;
+ font-family: "Roboto", "Roboto Condensed", sans-serif;
+ font-weight: normal;
+ font-style: normal;
+ color: black;
+}
+
+.line-chart {
+ width: 100%;
+ height: 100%;
+}
+
+.line-chart-svg {
+ width: 100%;
+ height: 100%;
+ display: block;
}
diff --git a/assets/sidebar.css b/assets/sidebar.css
index e2d1bcc..b3947f7 100644
--- a/assets/sidebar.css
+++ b/assets/sidebar.css
@@ -1,10 +1,10 @@
#sidebar {
box-sizing: border-box;
- background-color: #171b2e;
- width: 400px;
- height: 100%;
- border-top-right-radius: 20px;
- border-bottom-right-radius: 20px;
+ background-color: #fff;
+ width: 300px;
+ height: calc(100vh - 40px);
+ border-radius: 20px;
+ margin-left: 25px;
padding: 20px;
}
@@ -28,7 +28,7 @@
.sidebar-item p {
text-decoration: none;
- color: #fff;
+ color: #0f172a;
font: inherit;
font-size: larger;
font-weight: bold;
diff --git a/assets/sidebar/dashboard-selected.svg b/assets/sidebar/dashboard-selected.svg
index c69e755..cd2096b 100644
--- a/assets/sidebar/dashboard-selected.svg
+++ b/assets/sidebar/dashboard-selected.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/assets/sidebar/dashboard.svg b/assets/sidebar/dashboard.svg
index 7832351..080cd4d 100644
--- a/assets/sidebar/dashboard.svg
+++ b/assets/sidebar/dashboard.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/assets/sidebar/home-selected.svg b/assets/sidebar/home-selected.svg
index 2cd65e7..1e76bc8 100644
--- a/assets/sidebar/home-selected.svg
+++ b/assets/sidebar/home-selected.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/assets/sidebar/home.svg b/assets/sidebar/home.svg
index 3a5a978..f59bc7c 100644
--- a/assets/sidebar/home.svg
+++ b/assets/sidebar/home.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/components/mod.rs b/src/components/mod.rs
index a723397..6f3f8b2 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -98,7 +98,9 @@ pub fn LineChart(
}
}
+#[allow(unused)]
const RADIUS: f64 = 50.0;
+#[allow(unused)]
const CIRCUMFERENCE: f64 = 2.0 * std::f64::consts::PI * RADIUS;
#[component]
diff --git a/src/dashboard.rs b/src/dashboard.rs
index 6885ee0..af95184 100644
--- a/src/dashboard.rs
+++ b/src/dashboard.rs
@@ -1,6 +1,7 @@
use dioxus::prelude::*;
-use crate::components::{sidebar::SideBar, LineChart, RadialChart};
+use crate::components::{sidebar::SideBar, LineChart};
+use lucide_dioxus;
const DASHBOARD_CSS: Asset = asset!("/assets/dashboard.css");
@@ -9,41 +10,74 @@ pub fn Dashboard() -> Element {
rsx! {
document::Link { rel: "stylesheet", href: DASHBOARD_CSS }
- div {
- class: "container",
-
+ div { class: "sidebar-container",
SideBar { selected: 0 }
- div {
- class: "left_container",
- div { id: "top_container",
- RadialChart { percent: 0.6 }
- RadialChart { percent: 0.6 }
- RadialChart { percent: 0.6 }
- RadialChart { percent: 0.6 }
- RadialChart { percent: 0.6 }
- RadialChart { percent: 0.6 }
- RadialChart { percent: 0.6 }
+
+ div { class: "dashboard-container",
+ div { class: "summary-container",
+ div { class: "summary-card", id: "online",
+ div {
+ p { "Online Servers" }
+ h3 { "3" }
+ }
+ lucide_dioxus::CircleCheckBig { size: 32, color: "currentColor" }
+ }
+
+ div { class: "summary-card", id: "issues",
+ div {
+ p { "Issues" }
+ h3 { "2" }
+ }
+ lucide_dioxus::TriangleAlert { size: 32, color: "currentColor" }
+ }
+
+ div { class: "summary-card", id: "cpu",
+ div {
+ p { "Avg CPU Usage" }
+ h3 { "42%" }
+ }
+ lucide_dioxus::Cpu { size: 32, color: "currentColor" }
+ }
+
+ div { class: "summary-card", id: "ram",
+ div {
+ p { "Avg Memory" }
+ h3 { "42%" }
+ }
+ lucide_dioxus::MemoryStick { size: 32, color: "currentColor" }
+ }
}
- div { id: "mid_container",
- LineChart { data: vec![90, 60, 70, 50], max: 170, start_opacity: 0.3 }
+
+ div { class: "overview-container",
+ div { class: "performance-card",
+ LineChart { data: vec![90, 20, 40, 90, 60], max: 100 }
+ }
+
+ div { class: "performance-card",
+ LineChart { data: vec![90, 20, 40, 90, 60], max: 100 }
+ }
}
- div { id: "bottom_container",
- RadialChart { percent: 0.6 }
- RadialChart { percent: 0.6 }
- RadialChart { percent: 0.6 }
- RadialChart { percent: 0.6 }
- RadialChart { percent: 0.6 }
- RadialChart { percent: 0.6 }
- RadialChart { percent: 0.6 }
+
+ div { class: "search-container",
+ div { class: "search-input",
+ lucide_dioxus::Search { size: 16, color: "currentColor" }
+ input { placeholder: "Search servers by name, location, or IP..." }
+ }
+ button { "All (4)" }
+ button { id: "online", "Online (3)" }
+ button { id: "issues", "Warning (1)" }
+ button { id: "ram", "Offline (1)" }
+ button { id: "cpu", "Maintenance (1)" }
}
- }
- div {
- class: "right_container",
- div { class: "right_box",
- LineChart { data: vec![90, 60, 70, 50], max: 170, start_opacity: 0.3 }
- }
- div { class: "right_box",
- LineChart { data: vec![90, 60, 70, 50], max: 170, start_opacity: 0.3 }
+
+ div { class: "server-container",
+ div { class: "performance-card",
+ LineChart { data: vec![90, 20, 40, 90, 60], max: 100 }
+ }
+
+ div { class: "performance-card",
+ LineChart { data: vec![90, 20, 40, 90, 60], max: 100 }
+ }
}
}
}