From f1e177c7b074ee6b5367aa52d7e6303e0c0b88aa Mon Sep 17 00:00:00 2001
From: Ethan Girouard <ethan@girouard.com>
Date: Mon, 21 Oct 2024 22:57:27 -0400
Subject: [PATCH] Add page for displaying error

---
 src/pages.rs       |  3 ++-
 src/pages/error.rs | 24 ++++++++++++++++++++++++
 style/error.scss   | 18 ++++++++++++++++++
 style/main.scss    |  1 +
 4 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/error.rs
 create mode 100644 style/error.scss

diff --git a/src/pages.rs b/src/pages.rs
index 40f63fd..35dad03 100644
--- a/src/pages.rs
+++ b/src/pages.rs
@@ -1,2 +1,3 @@
 pub mod login;
-pub mod signup;
\ No newline at end of file
+pub mod signup;
+pub mod error;
diff --git a/src/pages/error.rs b/src/pages/error.rs
new file mode 100644
index 0000000..9b68b8f
--- /dev/null
+++ b/src/pages/error.rs
@@ -0,0 +1,24 @@
+use leptos::*;
+use leptos_icons::*;
+use std::fmt::Display;
+
+#[component]
+pub fn ServerError<E: Display + 'static>(
+	#[prop(optional, into, default="An Error Occurred".into())]
+	title: TextProp,
+	#[prop(optional, into)]
+	message: TextProp,
+	#[prop(optional, into)]
+	error: Option<ServerFnError<E>>,
+) -> impl IntoView {
+	view! {
+		<div class="error-container home-component">
+			<div class="error-header">
+				<Icon icon=icondata::BiErrorSolid />
+				<h1>{title}</h1>
+			</div>
+			<p>{message}</p>
+			<p>{error.map(|error| format!("{}", error))}</p>
+		</div>
+	}
+}
diff --git a/style/error.scss b/style/error.scss
new file mode 100644
index 0000000..dae3a36
--- /dev/null
+++ b/style/error.scss
@@ -0,0 +1,18 @@
+.error-container {
+	.error-header {
+		display: inline-grid;
+
+		svg {
+			width: 30px;
+			height: 30px;
+			grid-row-start: 1;
+			align-self: center;
+			padding-right: 10px;
+		}
+
+		h1 {
+			grid-row-start: 1;
+			align-self: center;
+		}
+	}
+}
diff --git a/style/main.scss b/style/main.scss
index de15da6..3dfb627 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -9,6 +9,7 @@
 @import 'search.scss';
 @import 'personal.scss';
 @import 'upload.scss';
+@import 'error.scss';
 
 body {
   font-family: sans-serif;