From 9563a5f2c098da4b1497e07b559a29b704207f9d Mon Sep 17 00:00:00 2001
From: moonstar-x <christian.lopez99@outlook.com>
Date: Fri, 2 Jun 2023 13:50:30 -0500
Subject: [PATCH] Added ui components.

---
 .../SlideshowPicker/SlideshowPicker.js        | 10 ++++-----
 src/components/ui/ErrorMessage.css            | 21 +++++++++++++++++++
 src/components/ui/ErrorMessage.js             | 16 ++++++++++++++
 src/components/ui/Loading.css                 | 19 +++++++++++++++++
 src/components/ui/Loading.js                  | 10 +++++++++
 5 files changed, 70 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ui/ErrorMessage.css
 create mode 100644 src/components/ui/ErrorMessage.js
 create mode 100644 src/components/ui/Loading.css
 create mode 100644 src/components/ui/Loading.js

diff --git a/src/components/SlideshowPicker/SlideshowPicker.js b/src/components/SlideshowPicker/SlideshowPicker.js
index d638564..330780a 100644
--- a/src/components/SlideshowPicker/SlideshowPicker.js
+++ b/src/components/SlideshowPicker/SlideshowPicker.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import useFetch from '../../hooks/fetch';
 import PickerItem from '../PickerItem/PickerItem';
+import Loading from '../ui/Loading';
+import ErrorMessage from '../ui/ErrorMessage';
 import './SlideshowPicker.css';
 
 const SlideshowPicker = () => {
@@ -8,17 +10,13 @@ const SlideshowPicker = () => {
 
   if (loading) {
     return (
-      <div>
-        LOADING
-      </div>
+      <Loading />
     );
   }
 
   if (error) {
     return (
-      <div>
-        {error}
-      </div>
+      <ErrorMessage error={error.message} />
     );
   }
 
diff --git a/src/components/ui/ErrorMessage.css b/src/components/ui/ErrorMessage.css
new file mode 100644
index 0000000..b73e76e
--- /dev/null
+++ b/src/components/ui/ErrorMessage.css
@@ -0,0 +1,21 @@
+.error {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  padding: 2rem;
+  background: pink;
+  border-radius: 5px;
+}
+
+.error h2 {
+  margin-bottom: 1rem;
+  color: red;
+}
+
+.error pre {
+  padding: 1rem;
+  background: #eee;
+  border-radius: 5px;
+}
diff --git a/src/components/ui/ErrorMessage.js b/src/components/ui/ErrorMessage.js
new file mode 100644
index 0000000..5c55fe2
--- /dev/null
+++ b/src/components/ui/ErrorMessage.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import "./ErrorMessage.css";
+
+const ErrorMessage = ({ error }) => {
+  return (
+    <div className="error">
+      <h2>Something happened!</h2>
+
+      <pre>
+        {JSON.stringify(error, null, 2)}
+      </pre>
+    </div>
+  );
+};
+
+export default ErrorMessage;
diff --git a/src/components/ui/Loading.css b/src/components/ui/Loading.css
new file mode 100644
index 0000000..d0fd48e
--- /dev/null
+++ b/src/components/ui/Loading.css
@@ -0,0 +1,19 @@
+.loading {
+  width: 50px;
+  height: 50px;
+
+  position: fixed;
+  top: calc(50% - 25px);
+  left: calc(50% - 25px);
+
+  animation: rotation 1.5s infinite linear;
+}
+
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
diff --git a/src/components/ui/Loading.js b/src/components/ui/Loading.js
new file mode 100644
index 0000000..5e71c73
--- /dev/null
+++ b/src/components/ui/Loading.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import './Loading.css';
+
+const Loading = () => {
+  return (
+    <img className="loading" src="/android-chrome-256x256.png" alt="logo" />
+  );
+};
+
+export default Loading;