From f0e83a26327e2ddb0914ab5e3404baabe54d7d95 Mon Sep 17 00:00:00 2001
From: Mathias <mathiasbergqvist88@gmail.com>
Date: Thu, 10 Oct 2024 14:01:46 +0200
Subject: [PATCH] Add two new components: Spinner & Error

---
 lab3/src/components/Error/Error.jsx     | 10 ++++++++++
 lab3/src/components/Spinner/Spinner.css | 19 +++++++++++++++++++
 lab3/src/components/Spinner/Spinner.jsx | 10 ++++++++++
 3 files changed, 39 insertions(+)
 create mode 100644 lab3/src/components/Error/Error.jsx
 create mode 100644 lab3/src/components/Spinner/Spinner.css
 create mode 100644 lab3/src/components/Spinner/Spinner.jsx

diff --git a/lab3/src/components/Error/Error.jsx b/lab3/src/components/Error/Error.jsx
new file mode 100644
index 0000000..65dbead
--- /dev/null
+++ b/lab3/src/components/Error/Error.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+
+const Error = ({ message }) => (
+  <div class="alert alert-danger" role="alert">
+    <h4 class="alert-heading">Error</h4>
+    {message}
+  </div>
+);
+
+export default Error;
diff --git a/lab3/src/components/Spinner/Spinner.css b/lab3/src/components/Spinner/Spinner.css
new file mode 100644
index 0000000..0fcd644
--- /dev/null
+++ b/lab3/src/components/Spinner/Spinner.css
@@ -0,0 +1,19 @@
+.spinnerContainer {
+    display: flex;
+    justify-content: center;
+    margin: 50px;
+}
+
+.spinner {
+    border: 8px solid #f3f3f3; /* Light grey */
+    border-top: 8px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
\ No newline at end of file
diff --git a/lab3/src/components/Spinner/Spinner.jsx b/lab3/src/components/Spinner/Spinner.jsx
new file mode 100644
index 0000000..6ee845c
--- /dev/null
+++ b/lab3/src/components/Spinner/Spinner.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import "./Spinner.css";
+
+const Spinner = () => (
+  <div className="spinnerContainer">
+    <div className="spinner" role="status" />
+  </div>
+);
+
+export default Spinner;